/* ==========================================================
   BANCANET EMPRESAS FINANCIAL GROUP
   PREMIUM CORPORATE FINANCIAL THEME
   style.css
   BLOQUE 1/10
========================================================== */

/* ==========================================================
   GOOGLE FONTS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

:root{

/* Primary Palette */

--primary:#0B1F3A;
--primary-dark:#071426;
--primary-light:#16345F;

/* Secondary Palette */

--secondary:#C9A45C;
--secondary-dark:#A9853D;
--secondary-light:#E6C98B;

/* Neutral Colors */

--white:#FFFFFF;
--off-white:#F8FAFC;
--light:#F1F5F9;
--gray:#94A3B8;
--gray-dark:#475569;
--text:#1E293B;
--text-light:#64748B;

/* Status */

--success:#16A34A;
--warning:#F59E0B;
--danger:#DC2626;

/* Effects */

--shadow-sm:0 2px 10px rgba(0,0,0,.05);
--shadow-md:0 8px 25px rgba(0,0,0,.08);
--shadow-lg:0 20px 40px rgba(0,0,0,.12);
--shadow-xl:0 30px 70px rgba(0,0,0,.15);

--radius-sm:8px;
--radius-md:16px;
--radius-lg:24px;
--radius-xl:32px;

--transition:.35s ease;

--container:1280px;

}

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

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
font-size:16px;
line-height:1.7;
color:var(--text);
background:var(--white);
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
transition:var(--transition);

}

ul{

list-style:none;

}

button{

font-family:'Inter',sans-serif;
border:none;
outline:none;
cursor:pointer;

}

input,
textarea,
select{

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

}

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

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

font-weight:800;
line-height:1.2;
color:var(--primary);

}

h1{

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

}

h2{

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

}

h3{

font-size:1.4rem;

}

p{

margin-bottom:1rem;
color:var(--text-light);

}

strong{

color:var(--primary);

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

width:92%;
max-width:var(--container);
margin:auto;

}

/* ==========================================================
   SECTION SPACING
========================================================== */

section{

padding:100px 0;

}

.light-section{

background:var(--off-white);

}

/* ==========================================================
   TOP BAR
========================================================== */

.top-bar{

background:var(--primary-dark);
color:var(--white);
padding:10px 0;
font-size:.88rem;

}

.top-bar-content{

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;

}

.top-bar-content span{

margin-right:20px;
opacity:.95;

}

/* ==========================================================
   HEADER
========================================================== */

.header{

position:sticky;
top:0;
left:0;
width:100%;
z-index:999;
background:rgba(255,255,255,.98);
backdrop-filter:blur(12px);
box-shadow:var(--shadow-sm);
transition:var(--transition);

}

.header.sticky{

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

}

.navbar{

display:flex;
align-items:center;
justify-content:space-between;
height:90px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

font-size:1.8rem;
font-weight:900;
color:var(--primary);

}

.logo span{

color:var(--secondary);

}

/* ==========================================================
   NAVIGATION
========================================================== */

.nav-links{

display:flex;
align-items:center;
gap:28px;

}

.nav-links a{

font-weight:600;
color:var(--text);

}

.nav-links a:hover{

color:var(--secondary);

}

.nav-links a.active{

color:var(--secondary);

}

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

.btn{

display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
background:var(--secondary);
color:var(--white);
font-weight:700;
border-radius:999px;
box-shadow:var(--shadow-md);
transition:var(--transition);

}

.btn:hover{

transform:translateY(-3px);
background:var(--secondary-dark);

}

.nav-btn{

padding:14px 26px;
background:var(--primary);
color:var(--white) !important;
border-radius:999px;

}

.nav-btn:hover{

background:var(--primary-light);

}

/* ==========================================================
   MENU TOGGLE
========================================================== */

.menu-toggle{

display:none;
font-size:2rem;
background:none;
color:var(--primary);

}

/* ==========================================================
   CONTINÚA EN BLOQUE 2/10
========================================================== */
/* ==========================================================
   HERO SECTIONS
========================================================== */

.hero-page,
.hero-finance{

position:relative;
overflow:hidden;
background:
linear-gradient(
135deg,
rgba(11,31,58,.96),
rgba(22,52,95,.92)
);

color:var(--white);

}

.hero-page::before,
.hero-finance::before{

content:"";
position:absolute;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(201,164,92,.25),
transparent 40%
);

pointer-events:none;

}

.hero-page-content,
.center-content{

position:relative;
z-index:2;
text-align:center;
max-width:900px;
margin:auto;

}

.hero-page h1,
.hero-finance h2{

color:var(--white);
margin-bottom:25px;

}

.hero-page p,
.hero-finance p{

color:rgba(255,255,255,.90);
font-size:1.12rem;
max-width:850px;
margin:0 auto 18px;

}

.hero-badge{

display:inline-block;
padding:10px 20px;
margin-bottom:25px;

background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);

border-radius:999px;

font-size:.9rem;
font-weight:700;
letter-spacing:.5px;

backdrop-filter:blur(10px);

}

/* ==========================================================
   SECTION TITLES
========================================================== */

.section-title{

max-width:850px;
margin:0 auto 70px;
text-align:center;

}

.section-title h2{

margin-bottom:20px;

}

.section-title p{

font-size:1.05rem;
margin-bottom:0;

}

/* ==========================================================
   GRID SYSTEM
========================================================== */

.grid{

display:grid;
gap:30px;

}

.grid-2{

grid-template-columns:repeat(2,1fr);

}

.grid-3{

grid-template-columns:repeat(3,1fr);

}

.grid-4{

grid-template-columns:repeat(4,1fr);

}

/* ==========================================================
   CARD COMPONENTS
========================================================== */

.card{

background:var(--white);
padding:40px;
border-radius:var(--radius-md);

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

transition:var(--transition);
border:1px solid rgba(15,23,42,.05);

height:100%;

}

.card:hover{

transform:translateY(-8px);
box-shadow:var(--shadow-lg);

}

.card h3{

margin-bottom:18px;

}

.card p:last-child{

margin-bottom:0;

}

/* ==========================================================
   METRIC BOXES
========================================================== */

.metric-box{

background:var(--white);
padding:35px 25px;
text-align:center;

border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.metric-box:hover{

transform:translateY(-8px);
box-shadow:var(--shadow-md);

}

.metric-box h3{

font-size:1.3rem;
margin-bottom:12px;
color:var(--primary);

}

.metric-box p{

margin-bottom:0;

}

.metric-number{

font-size:3rem;
font-weight:900;
color:var(--secondary);
line-height:1;

margin-bottom:15px;

}

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

.split-layout{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

.split-layout img{

border-radius:var(--radius-lg);
box-shadow:var(--shadow-xl);

}

/* ==========================================================
   FEATURE BOX
========================================================== */

.feature-box{

display:flex;
gap:18px;
margin-bottom:25px;

}

.feature-icon{

width:60px;
height:60px;

display:flex;
align-items:center;
justify-content:center;

background:rgba(201,164,92,.15);
color:var(--secondary);

border-radius:16px;

font-size:1.4rem;
font-weight:800;

flex-shrink:0;

}

/* ==========================================================
   ICON CARD
========================================================== */

.icon-card{

text-align:center;
padding:40px 30px;

background:var(--white);
border-radius:var(--radius-md);

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

transition:var(--transition);

}

.icon-card:hover{

transform:translateY(-10px);

}

.icon-card-icon{

width:80px;
height:80px;

margin:0 auto 25px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--secondary),
var(--secondary-dark)
);

color:var(--white);

font-size:1.8rem;
font-weight:900;

}

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

.rounded{

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

}

.shadow-lg{

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

}

.shadow-md{

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

}

/* ==========================================================
   CONTENT WIDTHS
========================================================== */

.content-sm{

max-width:720px;
margin:auto;

}

.content-md{

max-width:900px;
margin:auto;

}

.content-lg{

max-width:1100px;
margin:auto;

}

/* ==========================================================
   CONTINÚA EN BLOQUE 3/10
========================================================== */
/* ==========================================================
   TIMELINE COMPONENT
========================================================== */

.timeline{

position:relative;
max-width:1000px;
margin:auto;

}

.timeline::before{

content:"";
position:absolute;

top:0;
bottom:0;
left:50%;

width:4px;

background:
linear-gradient(
180deg,
var(--secondary),
var(--secondary-dark)
);

transform:translateX(-50%);

border-radius:999px;

}

.timeline-item{

position:relative;
display:flex;
align-items:center;

margin-bottom:70px;

}

.timeline-item:nth-child(even){

flex-direction:row-reverse;

}

.timeline-content{

width:calc(50% - 60px);

background:var(--white);
padding:35px;

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

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

}

.timeline-content h3{

margin-bottom:12px;

}

.timeline-content p{

margin-bottom:0;

}

.timeline-year{

width:70px;
height:70px;

display:flex;
align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
var(--secondary),
var(--secondary-dark)
);

color:var(--white);

font-size:1.1rem;
font-weight:800;

border-radius:50%;

position:absolute;
left:50%;

transform:translateX(-50%);

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

z-index:2;

}

/* ==========================================================
   CHECK LIST
========================================================== */

.check-list{

display:flex;
flex-direction:column;
gap:14px;

}

.check-list li{

position:relative;
padding-left:34px;

color:var(--text-light);

}

.check-list li::before{

content:"✓";

position:absolute;
left:0;
top:0;

font-weight:800;
color:var(--success);

}

/* ==========================================================
   STATS SECTION
========================================================== */

.stats-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.stat-card{

background:var(--white);

padding:45px 25px;
text-align:center;

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

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

}

.stat-number{

font-size:3rem;
font-weight:900;

color:var(--secondary);

line-height:1;
margin-bottom:10px;

}

.stat-label{

font-weight:600;
color:var(--text-light);

}

/* ==========================================================
   TESTIMONIALS
========================================================== */

.testimonial-card{

background:var(--white);

padding:40px;

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

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

position:relative;

}

.testimonial-card::before{

content:"“";

position:absolute;

top:10px;
left:25px;

font-size:5rem;
line-height:1;

color:rgba(201,164,92,.15);

font-weight:900;

}

.testimonial-text{

font-size:1.05rem;
font-style:italic;

margin-bottom:25px;

}

.testimonial-author{

font-weight:800;
color:var(--primary);

}

.testimonial-role{

font-size:.92rem;
color:var(--text-light);

}

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

.blog-card{

background:var(--white);

overflow:hidden;

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

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

transition:var(--transition);

}

.blog-card:hover{

transform:translateY(-8px);
box-shadow:var(--shadow-lg);

}

.blog-card img{

height:250px;
width:100%;

object-fit:cover;

}

.blog-content{

padding:30px;

}

.blog-meta{

display:flex;
gap:15px;
flex-wrap:wrap;

font-size:.85rem;

margin-bottom:15px;

color:var(--gray);

}

.blog-content h3{

margin-bottom:15px;

}

.blog-content p{

margin-bottom:20px;

}

/* ==========================================================
   FAQ ACCORDION
========================================================== */

.faq-item{

background:var(--white);

margin-bottom:20px;

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

overflow:hidden;

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

}

.faq-question{

padding:25px 30px;

font-weight:700;
cursor:pointer;

display:flex;
align-items:center;
justify-content:space-between;

color:var(--primary);

}

.faq-answer{

padding:0 30px 30px;

color:var(--text-light);

}

/* ==========================================================
   CTA SECTION
========================================================== */

.cta-section{

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);

color:var(--white);
text-align:center;

}

.cta-section h2{

color:var(--white);
margin-bottom:20px;

}

.cta-section p{

color:rgba(255,255,255,.90);

max-width:800px;
margin:0 auto 30px;

}

/* ==========================================================
   CONTINÚA EN BLOQUE 4/10
========================================================== */
/* ==========================================================
   FORMS
========================================================== */

.form-container{

background:var(--white);
padding:50px;

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

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

}

.form-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.form-group{

display:flex;
flex-direction:column;

}

.form-group.full{

grid-column:1/-1;

}

.form-group label{

font-weight:600;
margin-bottom:10px;

color:var(--primary);

}

.form-group input,
.form-group textarea,
.form-group select{

padding:16px 18px;

border:1px solid rgba(148,163,184,.35);

border-radius:12px;

font-size:1rem;

transition:var(--transition);

background:var(--white);

}

.form-group textarea{

resize:vertical;
min-height:160px;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

border-color:var(--secondary);

box-shadow:0 0 0 4px rgba(201,164,92,.15);

}

/* ==========================================================
   CONTACT SECTION
========================================================== */

.contact-card{

background:var(--white);

padding:35px;

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

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

text-align:center;

transition:var(--transition);

}

.contact-card:hover{

transform:translateY(-8px);
box-shadow:var(--shadow-lg);

}

.contact-icon{

width:70px;
height:70px;

margin:0 auto 20px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--secondary),
var(--secondary-dark)
);

color:var(--white);

font-size:1.5rem;

}

/* ==========================================================
   TABLES
========================================================== */

.table-responsive{

overflow-x:auto;

}

.table{

width:100%;
border-collapse:collapse;

background:var(--white);

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

overflow:hidden;

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

}

.table thead{

background:var(--primary);

color:var(--white);

}

.table th,
.table td{

padding:18px 20px;
text-align:left;

}

.table tbody tr{

border-bottom:1px solid rgba(148,163,184,.15);

}

.table tbody tr:hover{

background:var(--off-white);

}

.table tbody tr:last-child{

border-bottom:none;

}

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

.badge{

display:inline-flex;
align-items:center;
justify-content:center;

padding:8px 16px;

border-radius:999px;

font-size:.85rem;
font-weight:700;

}

.badge-primary{

background:rgba(11,31,58,.1);
color:var(--primary);

}

.badge-secondary{

background:rgba(201,164,92,.15);
color:var(--secondary-dark);

}

.badge-success{

background:rgba(22,163,74,.15);
color:var(--success);

}

.badge-warning{

background:rgba(245,158,11,.15);
color:var(--warning);

}

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

.pricing-card{

background:var(--white);

padding:45px 35px;

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

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

position:relative;

transition:var(--transition);

}

.pricing-card:hover{

transform:translateY(-10px);
box-shadow:var(--shadow-xl);

}

.pricing-featured{

border:2px solid var(--secondary);

}

.pricing-price{

font-size:3rem;
font-weight:900;

color:var(--secondary);

margin:20px 0;

}

.pricing-card ul{

display:flex;
flex-direction:column;
gap:14px;

margin:25px 0;

}

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

.team-card{

background:var(--white);

text-align:center;

padding:35px;

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

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

transition:var(--transition);

}

.team-card:hover{

transform:translateY(-8px);

}

.team-card img{

width:180px;
height:180px;

object-fit:cover;

border-radius:50%;

margin:0 auto 25px;

}

.team-position{

color:var(--secondary);
font-weight:700;

margin-top:10px;

}

/* ==========================================================
   CONTINÚA EN BLOQUE 5/10
========================================================== */
/* ==========================================================
   FOOTER
========================================================== */

.footer{

background:var(--primary-dark);
color:rgba(255,255,255,.85);

padding:90px 0 30px;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;

margin-bottom:50px;

}

.footer h3{

color:var(--white);
margin-bottom:20px;

font-size:1.15rem;

}

.footer p{

color:rgba(255,255,255,.75);

}

.footer ul{

display:flex;
flex-direction:column;
gap:12px;

}

.footer ul a{

color:rgba(255,255,255,.75);

}

.footer ul a:hover{

color:var(--secondary);

}

.footer hr{

border:none;
height:1px;

background:rgba(255,255,255,.12);

margin:35px 0;

}

.footer-bottom{

display:flex;
justify-content:space-between;
align-items:center;

gap:20px;
flex-wrap:wrap;

}

.footer-bottom p{

margin:0;

}

/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb{

padding:18px 0;

background:var(--off-white);

}

.breadcrumb-list{

display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;

font-size:.92rem;

}

.breadcrumb-list a{

color:var(--primary);

}

.breadcrumb-list span{

color:var(--text-light);

}

/* ==========================================================
   PAGINATION
========================================================== */

.pagination{

display:flex;
justify-content:center;
align-items:center;
gap:10px;

margin-top:50px;

}

.pagination a{

width:46px;
height:46px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:var(--white);

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

font-weight:700;

color:var(--primary);

}

.pagination a:hover,
.pagination a.active{

background:var(--secondary);
color:var(--white);

}

/* ==========================================================
   ALERTS
========================================================== */

.alert{

padding:20px 24px;

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

margin-bottom:25px;

font-weight:500;

}

.alert-success{

background:rgba(22,163,74,.12);
color:var(--success);

border-left:5px solid var(--success);

}

.alert-warning{

background:rgba(245,158,11,.12);
color:#b45309;

border-left:5px solid var(--warning);

}

.alert-danger{

background:rgba(220,38,38,.10);
color:var(--danger);

border-left:5px solid var(--danger);

}

.alert-info{

background:rgba(11,31,58,.08);
color:var(--primary);

border-left:5px solid var(--primary);

}

/* ==========================================================
   PROGRESS BARS
========================================================== */

.progress-wrapper{

margin-bottom:30px;

}

.progress-label{

display:flex;
justify-content:space-between;
margin-bottom:10px;

font-weight:600;

}

.progress{

height:10px;

background:#E2E8F0;

border-radius:999px;

overflow:hidden;

}

.progress-bar{

height:100%;

background:
linear-gradient(
90deg,
var(--secondary),
var(--secondary-dark)
);

border-radius:999px;

}

/* ==========================================================
   CLIENT LOGOS
========================================================== */

.client-logos{

display:grid;
grid-template-columns:repeat(5,1fr);
gap:30px;

align-items:center;

}

.client-logo{

background:var(--white);

padding:25px;

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

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

display:flex;
align-items:center;
justify-content:center;

min-height:120px;

transition:var(--transition);

}

.client-logo:hover{

transform:translateY(-6px);
box-shadow:var(--shadow-md);

}

.client-logo img{

max-height:60px;
width:auto;

opacity:.85;

}

/* ==========================================================
   CONTINÚA EN BLOQUE 6/10
========================================================== */
/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar-layout{

display:grid;
grid-template-columns:320px 1fr;
gap:40px;

align-items:start;

}

.sidebar{

background:var(--white);

padding:30px;

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

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

position:sticky;
top:120px;

}

.sidebar-title{

font-size:1.2rem;
margin-bottom:20px;

}

.sidebar-menu{

display:flex;
flex-direction:column;
gap:12px;

}

.sidebar-menu a{

padding:14px 18px;

border-radius:12px;

font-weight:600;
color:var(--text);

transition:var(--transition);

}

.sidebar-menu a:hover,
.sidebar-menu a.active{

background:rgba(201,164,92,.12);
color:var(--secondary-dark);

}

/* ==========================================================
   ARTICLE CONTENT
========================================================== */

.article-content{

background:var(--white);

padding:50px;

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

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

}

.article-content h2{

margin-top:40px;
margin-bottom:20px;

}

.article-content h3{

margin-top:30px;
margin-bottom:15px;

}

.article-content ul{

list-style:disc;

padding-left:25px;

margin-bottom:20px;

}

.article-content ol{

padding-left:25px;

margin-bottom:20px;

}

.article-content li{

margin-bottom:10px;

color:var(--text-light);

}

/* ==========================================================
   AUTHOR BOX
========================================================== */

.author-box{

display:flex;
gap:25px;

align-items:center;

padding:30px;

background:var(--off-white);

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

margin-top:50px;

}

.author-box img{

width:90px;
height:90px;

object-fit:cover;

border-radius:50%;

}

.author-box h4{

margin-bottom:8px;

}

/* ==========================================================
   SEARCH BOX
========================================================== */

.search-box{

position:relative;

}

.search-box input{

width:100%;

padding:16px 55px 16px 20px;

border:1px solid rgba(148,163,184,.35);

border-radius:999px;

}

.search-box button{

position:absolute;

right:8px;
top:50%;

transform:translateY(-50%);

width:42px;
height:42px;

border-radius:50%;

background:var(--secondary);

color:var(--white);

}

/* ==========================================================
   NEWSLETTER
========================================================== */

.newsletter{

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);

padding:60px;

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

text-align:center;

color:var(--white);

}

.newsletter h2{

color:var(--white);

margin-bottom:20px;

}

.newsletter p{

color:rgba(255,255,255,.85);

max-width:700px;
margin:0 auto 30px;

}

.newsletter-form{

display:flex;
gap:15px;

max-width:700px;
margin:auto;

}

.newsletter-form input{

flex:1;

padding:18px 22px;

border:none;

border-radius:999px;

}

/* ==========================================================
   COUNTERS
========================================================== */

.counter-section{

text-align:center;

}

.counter{

font-size:4rem;
font-weight:900;

color:var(--secondary);

line-height:1;

margin-bottom:15px;

}

/* ==========================================================
   AWARDS SECTION
========================================================== */

.award-card{

background:var(--white);

padding:35px;

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

text-align:center;

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

transition:var(--transition);

}

.award-card:hover{

transform:translateY(-8px);
box-shadow:var(--shadow-lg);

}

.award-icon{

font-size:3rem;

margin-bottom:20px;

color:var(--secondary);

}

/* ==========================================================
   CONTINÚA EN BLOQUE 7/10
========================================================== */
/* ==========================================================
   MODALS
========================================================== */

.modal{

position:fixed;
inset:0;

display:flex;
align-items:center;
justify-content:center;

background:rgba(2,6,23,.75);

opacity:0;
visibility:hidden;

transition:var(--transition);

z-index:9999;

}

.modal.active{

opacity:1;
visibility:visible;

}

.modal-content{

background:var(--white);

width:90%;
max-width:700px;

padding:45px;

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

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

position:relative;

animation:modalFade .35s ease;

}

@keyframes modalFade{

from{

opacity:0;
transform:translateY(25px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.modal-close{

position:absolute;
top:20px;
right:20px;

width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:var(--off-white);

font-size:1.2rem;
font-weight:700;

cursor:pointer;

}

/* ==========================================================
   TABS
========================================================== */

.tabs{

width:100%;

}

.tabs-nav{

display:flex;
gap:15px;

flex-wrap:wrap;

margin-bottom:30px;

}

.tab-btn{

padding:14px 24px;

background:var(--off-white);

border-radius:999px;

font-weight:700;

color:var(--primary);

transition:var(--transition);

}

.tab-btn.active,
.tab-btn:hover{

background:var(--secondary);
color:var(--white);

}

.tab-content{

display:none;

}

.tab-content.active{

display:block;

animation:fadeIn .4s ease;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* ==========================================================
   STEPS PROCESS
========================================================== */

.process-steps{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.process-step{

text-align:center;
position:relative;

}

.process-step-number{

width:90px;
height:90px;

margin:0 auto 25px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--secondary),
var(--secondary-dark)
);

color:var(--white);

font-size:1.6rem;
font-weight:900;

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

}

.process-step h3{

margin-bottom:15px;

}

.process-step p{

margin-bottom:0;

}

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

.service-card{

background:var(--white);

padding:40px;

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

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

transition:var(--transition);

height:100%;

}

.service-card:hover{

transform:translateY(-10px);
box-shadow:var(--shadow-lg);

}

.service-icon{

width:75px;
height:75px;

display:flex;
align-items:center;
justify-content:center;

margin-bottom:25px;

border-radius:20px;

background:
linear-gradient(
135deg,
rgba(201,164,92,.15),
rgba(201,164,92,.25)
);

color:var(--secondary);

font-size:1.8rem;
font-weight:800;

}

.service-card h3{

margin-bottom:15px;

}

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

.value-card{

padding:35px;

background:var(--white);

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

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

border-top:5px solid var(--secondary);

transition:var(--transition);

}

.value-card:hover{

transform:translateY(-8px);

}

.value-card h3{

margin-bottom:15px;

}

/* ==========================================================
   CONTINÚA EN BLOQUE 8/10
========================================================== */
/* ==========================================================
   HERO DECORATIONS
========================================================== */

.hero-shape{

position:absolute;
pointer-events:none;

}

.hero-shape-1{

top:-120px;
right:-120px;

width:350px;
height:350px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(201,164,92,.25),
transparent 70%
);

}

.hero-shape-2{

bottom:-140px;
left:-140px;

width:400px;
height:400px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.08),
transparent 70%
);

}

/* ==========================================================
   IMAGE OVERLAY CARD
========================================================== */

.image-card{

position:relative;
overflow:hidden;

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

}

.image-card img{

width:100%;
height:100%;

object-fit:cover;

transition:var(--transition);

}

.image-card:hover img{

transform:scale(1.08);

}

.image-overlay{

position:absolute;
inset:0;

display:flex;
align-items:flex-end;

padding:30px;

background:
linear-gradient(
180deg,
transparent,
rgba(2,6,23,.85)
);

}

.image-overlay h3,
.image-overlay p{

color:var(--white);

}

/* ==========================================================
   VIDEO SECTION
========================================================== */

.video-wrapper{

position:relative;

overflow:hidden;

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

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

}

.video-wrapper img{

width:100%;

}

.video-play{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:90px;
height:90px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.95);

font-size:1.8rem;

color:var(--secondary);

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

}

/* ==========================================================
   KPI DASHBOARD
========================================================== */

.kpi-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}

.kpi-card{

background:var(--white);

padding:30px;

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

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

}

.kpi-title{

font-size:.9rem;
font-weight:600;

color:var(--text-light);

margin-bottom:12px;

}

.kpi-value{

font-size:2.3rem;
font-weight:900;

color:var(--primary);

line-height:1;

margin-bottom:10px;

}

.kpi-growth{

font-weight:700;

color:var(--success);

}

/* ==========================================================
   DOCUMENT LIST
========================================================== */

.document-list{

display:flex;
flex-direction:column;
gap:15px;

}

.document-item{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 25px;

background:var(--white);

border-radius:14px;

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

transition:var(--transition);

}

.document-item:hover{

transform:translateX(6px);

}

.document-item h4{

margin-bottom:0;

}

.document-download{

font-weight:700;
color:var(--secondary);

}

/* ==========================================================
   QUOTE BLOCK
========================================================== */

.quote-block{

position:relative;

padding:50px;

background:var(--off-white);

border-left:6px solid var(--secondary);

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

}

.quote-block::before{

content:"“";

position:absolute;

top:10px;
left:25px;

font-size:6rem;

color:rgba(201,164,92,.15);

line-height:1;

font-weight:900;

}

.quote-block p{

font-size:1.15rem;
font-style:italic;

margin-bottom:20px;

}

.quote-author{

font-weight:800;
color:var(--primary);

}

/* ==========================================================
   CONTINÚA EN BLOQUE 9/10
========================================================== */
/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes floatY{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0);
}

}

.float-animation{

animation:floatY 4s ease-in-out infinite;

}

@keyframes pulseGlow{

0%{
box-shadow:0 0 0 0 rgba(201,164,92,.45);
}

70%{
box-shadow:0 0 0 20px rgba(201,164,92,0);
}

100%{
box-shadow:0 0 0 0 rgba(201,164,92,0);
}

}

.pulse{

animation:pulseGlow 2s infinite;

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.fade-up{

animation:fadeUp .8s ease forwards;

}

/* ==========================================================
   REVEAL ON SCROLL
========================================================== */

.reveal{

opacity:0;
transform:translateY(40px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}

/* ==========================================================
   LOADER
========================================================== */

.page-loader{

position:fixed;
inset:0;

background:var(--white);

display:flex;
align-items:center;
justify-content:center;

z-index:99999;

}

.loader-circle{

width:70px;
height:70px;

border:5px solid rgba(201,164,92,.20);

border-top-color:var(--secondary);

border-radius:50%;

animation:spin .8s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

/* ==========================================================
   SCROLL TO TOP
========================================================== */

.scroll-top{

position:fixed;

right:25px;
bottom:25px;

width:55px;
height:55px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:var(--secondary);

color:var(--white);

font-size:1.2rem;

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

opacity:0;
visibility:hidden;

transition:var(--transition);

z-index:999;

}

.scroll-top.active{

opacity:1;
visibility:visible;

}

.scroll-top:hover{

transform:translateY(-5px);

}

/* ==========================================================
   RESPONSIVE LARGE
========================================================== */

@media (max-width:1200px){

.grid-4,
.stats-grid,
.kpi-grid,
.process-steps{

grid-template-columns:repeat(2,1fr);

}

.client-logos{

grid-template-columns:repeat(3,1fr);

}

}

/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media (max-width:992px){

.split-layout,
.sidebar-layout,
.grid-3,
.footer-grid{

grid-template-columns:1fr;

}

.grid-2{

grid-template-columns:1fr;

}

.timeline::before{

left:35px;

}

.timeline-item,
.timeline-item:nth-child(even){

flex-direction:row;

padding-left:90px;

}

.timeline-content{

width:100%;

}

.timeline-year{

left:35px;

}

.newsletter-form{

flex-direction:column;

}

.form-grid{

grid-template-columns:1fr;

}

.form-group.full{

grid-column:auto;

}

}

 /* ==========================================================
    CONTINÚA EN BLOQUE 10/10
========================================================== */
/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media (max-width:768px){

section{

padding:80px 0;

}

.navbar{

height:80px;

}

.menu-toggle{

display:block;

}

.nav-links{

position:absolute;

top:100%;
left:0;

width:100%;

background:var(--white);

padding:25px;

display:none;
flex-direction:column;
align-items:flex-start;

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

}

.nav-links.active{

display:flex;

}

.nav-links a{

width:100%;

padding:12px 0;

}

.hero-page h1{

font-size:2.5rem;

}

.hero-finance h2{

font-size:2.2rem;

}

.grid-4,
.grid-3,
.grid-2,
.stats-grid,
.kpi-grid,
.process-steps{

grid-template-columns:1fr;

}

.metric-number,
.stat-number{

font-size:2.4rem;

}

.client-logos{

grid-template-columns:repeat(2,1fr);

}

.form-container{

padding:35px 25px;

}

.card,
.service-card,
.value-card,
.pricing-card{

padding:30px;

}

.newsletter{

padding:40px 25px;

}

.article-content{

padding:35px 25px;

}

.author-box{

flex-direction:column;
text-align:center;

}

.footer-bottom{

flex-direction:column;
text-align:center;

}

.top-bar-content{

justify-content:center;
text-align:center;

}

}

/* ==========================================================
   RESPONSIVE SMALL MOBILE
========================================================== */

@media (max-width:576px){

.container{

width:94%;

}

.hero-page h1{

font-size:2.1rem;

}

.hero-finance h2{

font-size:2rem;

}

.section-title{

margin-bottom:50px;

}

.section-title h2{

font-size:1.9rem;

}

.hero-badge{

font-size:.8rem;
padding:8px 16px;

}

.btn{

width:100%;

padding:16px 22px;

}

.nav-btn{

width:100%;
text-align:center;

}

.card{

padding:25px;

}

.timeline-item{

padding-left:70px;

}

.timeline-year{

width:55px;
height:55px;

font-size:.9rem;

left:28px;

}

.timeline::before{

left:28px;

}

.client-logos{

grid-template-columns:1fr;

}

.contact-card,
.metric-box,
.stat-card{

padding:25px;

}

}

/* ==========================================================
   PRINT STYLES
========================================================== */

@media print{

.top-bar,
.header,
.footer,
.btn,
.nav-btn,
.scroll-top,
.menu-toggle{

display:none !important;

}

body{

background:#fff;

}

section{

padding:25px 0;

}

.card,
.metric-box,
.stat-card{

box-shadow:none;
border:1px solid #ddd;

}

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

:focus-visible{

outline:3px solid var(--secondary);
outline-offset:3px;

}

::selection{

background:var(--secondary);
color:var(--white);

}

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

.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-right{ text-align:right; }

.w-100{ width:100%; }

.mt-1{ margin-top:10px; }
.mt-2{ margin-top:20px; }
.mt-3{ margin-top:30px; }
.mt-4{ margin-top:40px; }
.mt-5{ margin-top:50px; }

.mb-1{ margin-bottom:10px; }
.mb-2{ margin-bottom:20px; }
.mb-3{ margin-bottom:30px; }
.mb-4{ margin-bottom:40px; }
.mb-5{ margin-bottom:50px; }

.pt-1{ padding-top:10px; }
.pt-2{ padding-top:20px; }
.pt-3{ padding-top:30px; }
.pt-4{ padding-top:40px; }
.pt-5{ padding-top:50px; }

.pb-1{ padding-bottom:10px; }
.pb-2{ padding-bottom:20px; }
.pb-3{ padding-bottom:30px; }
.pb-4{ padding-bottom:40px; }
.pb-5{ padding-bottom:50px; }

.d-flex{
display:flex;
}

.align-center{
align-items:center;
}

.justify-center{
justify-content:center;
}

.justify-between{
justify-content:space-between;
}

.gap-10{
gap:10px;
}

.gap-20{
gap:20px;
}

.gap-30{
gap:30px;
}

.rounded-full{
border-radius:999px;
}

.shadow{
box-shadow:var(--shadow-md);
}

.bg-light{
background:var(--off-white);
}

.bg-primary{
background:var(--primary);
color:var(--white);
}

.bg-secondary{
background:var(--secondary);
color:var(--white);
}

/* ==========================================================
   END OF FILE
   BANCANET EMPRESAS FINANCIAL GROUP
   PREMIUM CORPORATE FINANCIAL CSS
========================================================== */