/* =======================================================================
   style.css  •  FINCO — Inversiones Financieras en Colombia
   Modern Tetradic, Neuromorphism + Neo-Brutalism, GSAP / Anime ready
   ======================================================================= */

/* ---------- 1. ROOT VARIABLES & GLOBAL RESETS ------------------------ */
:root{
  /* Tetradic Palette */
  --color-primary: #0057FF;
  --color-secondary: #FF006E;
  --color-tertiary: #00C49A;
  --color-quaternary: #FFC300;

  /* Neumorphic Shadows */
  --shadow-light: 4px 4px 8px rgba(0,0,0,0.15);
  --shadow-dark: -4px -4px 8px rgba(255,255,255,0.7);

  /* Brutalist Accent */
  --border-thick: 3px solid var(--color-secondary);

  /* Typography */
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'Lato', sans-serif;

  /* Gradients */
  --gradient-dark: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(0,0,0,0.25));
  --gradient-primary: linear-gradient(135deg,var(--color-primary),var(--color-tertiary));

  /* Transitions */
  --transition-fast: .25s ease;
}

/* CSS Reset additions */
*,*::before,*::after{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  color:#333;
  background:#f3f4f7;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  color:#222;
  text-shadow:1px 1px 3px rgba(0,0,0,0.15);
}

/* ---------- 2. COMMON UTILITIES -------------------------------------- */
.text-white-important{color:#fff !important;}
.parallax{background-attachment:fixed;background-size:cover;background-repeat:no-repeat;}
.center-flex{display:flex;justify-content:center;align-items:center;}
.w-100vh{min-height:100vh;}

.section-padding{padding:4rem 0;}
.section-heading{text-align:center;margin-bottom:2.5rem;}
.glass-bg{backdrop-filter:blur(10px);background:rgba(255,255,255,0.15);border-radius:12px;}

/* ---------- 3. GLOBAL BUTTONS & LINKS -------------------------------- */
.btn,
button,
input[type='submit']{
  position:relative;
  font-family:var(--font-heading);
  border-radius:12px;
  border:none;
  padding:.75rem 2rem;
  background:var(--gradient-primary);
  color:#fff;
  overflow:hidden;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast);
  box-shadow:var(--shadow-light),var(--shadow-dark);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(0,0,0,0.2);
}
.btn:active{transform:translateY(1px);}

/* “Leer más” link */
.read-more{
  font-weight:600;
  text-decoration:none;
  position:relative;
  color:var(--color-secondary);
  transition:color var(--transition-fast);
}
.read-more::after{
  content:'→';
  margin-left:.4rem;
  transition:transform var(--transition-fast);
}
.read-more:hover{color:var(--color-primary);}
.read-more:hover::after{transform:translateX(4px);}

/* ---------- 4. HEADER / NAVBAR --------------------------------------- */
header{box-shadow:0 2px 6px rgba(0,0,0,0.05);}
.nav-link{
  font-weight:500;
  position:relative;
  color:#111 !important;
  padding:.5rem 1rem;
}
.nav-link::before{
  content:'';
  position:absolute;
  bottom:0;left:0;
  width:0;height:3px;
  background:var(--color-secondary);
  transition:width var(--transition-fast);
}
.nav-link:hover::before{width:100%;}

/* ---------- 5. HERO -------------------------------------------------- */
#hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}
#hero h1{color:#fff;}
#hero .btn{border:var(--border-thick);}

/* ---------- 6. FEATURES / CARDS -------------------------------------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-radius:20px;
  border:var(--border-thick);
  background:#f7f8fc;
  box-shadow:var(--shadow-light),var(--shadow-dark);
  transition:transform var(--transition-fast);
}
.card:hover{transform:translateY(-4px);}
.card-image{
  width:100%;
  height:220px;
  overflow:hidden;
  border-bottom:var(--border-thick);
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}
.card-content{padding:1.5rem;}

/* ---------- 7. GALLERY ----------------------------------------------- */
.carousel-item img{object-fit:cover;height:500px;}
.carousel-control-prev,
.carousel-control-next{
  width:5%;
  color:#fff;
  font-size:2rem;
  text-shadow:0 2px 4px rgba(0,0,0,0.5);
}

/* ---------- 8. MEDIA ARTICLES ---------------------------------------- */
article.card{
  border-left:var(--border-thick);
  background:#fff;
}
article.card:hover{box-shadow:0 6px 12px rgba(0,0,0,0.15);}

/* ---------- 9. CAREERS SECTION --------------------------------------- */
#careers{
  color:#fff;
  background-size:cover;
  background-repeat:no-repeat;
}
#careers .btn{
  background:transparent;
  border:var(--border-thick);
}

/* ----------10. CONTACT FORM ------------------------------------------ */
form{
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow-light),var(--shadow-dark);
}
form .form-control{
  border-radius:12px;
  border:1px solid #ddd;
}
form .form-control:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 .25rem rgba(0,87,255,.25);
}

/* ----------11. FOOTER ------------------------------------------------- */
footer{
  background:#111;
  color:#eee;
  font-size:.9rem;
}
footer a{
  color:var(--color-quaternary);
  text-decoration:none;
  transition:color var(--transition-fast);
}
footer a:hover{color:var(--color-secondary);}
footer .social-link{
  font-weight:700;
  margin:0 .5rem;
}

/* ----------12. SUCCESS PAGE FIX -------------------------------------- */
body.success-page{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--gradient-primary);
  color:#fff;
  text-align:center;
}

/* ----------13. PRIVACY / TERMS PADDING ------------------------------- */
body.legal-page{padding-top:100px;}

/* ----------14. MORPHING ANIMATIONS ----------------------------------- */
/* Generic blob morph */
@keyframes blobMorph{
  0%{border-radius:42% 58% 60% 40% / 42% 36% 64% 58%;}
  50%{border-radius:73% 27% 37% 63% / 31% 69% 31% 69%;}
  100%{border-radius:42% 58% 60% 40% / 42% 36% 64% 58%;}
}

.morph{
  animation:blobMorph 8s ease-in-out infinite;
}

/* ----------15. PARALLAX LAYERS --------------------------------------- */
.parallax-layer{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
}
.parallax-layer::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-dark);
}

/* ----------16. ACCESSIBILITY / MISC ---------------------------------- */
a:focus,
button:focus{
  outline:3px dashed var(--color-tertiary);
  outline-offset:2px;
}

/* ----------17. RESPONSIVE TWEAKS ------------------------------------- */
@media (max-width:992px){
  .section-padding{padding:3rem 1rem;}
  .card-image{height:180px;}
}
img{
width: 100%;
  object-fit: cover;
}