/* =========================================================
   style.css  |  FinArg – Inversiones Financieras en Argentina
   Diseño: “Creativo” + “Tipografía Adaptativa”
   ========================================================= */

/* ---------- VARIABLES (Bright Theme) ---------- */
:root{
  /* Brand Palette */
  --clr-primary:#ff3860;      /* vibrante rojo/rosa */
  --clr-secondary:#3273dc;    /* azul brillante */
  --clr-accent:#23d160;       /* verde éxito */
  --clr-dark:#222222;
  --clr-light:#ffffff;
  --clr-muted:#f5f5f5;
  --clr-gradient:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary));

  /* Glassmorphism */
  --glass-bg:rgba(255,255,255,0.15);
  --glass-blur:20px;

  /* Typography */
  --font-heading:'Space Grotesk',sans-serif;
  --font-body:'DM Sans',sans-serif;

  /* Transitions */
  --tr-fast:0.25s ease;
  --tr-medium:0.4s cubic-bezier(.4,0,.2,1);
}

/* ---------- GLOBAL RESETS & BASE TYPOGRAPHY ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--clr-dark);
  background-color:var(--clr-light);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--clr-dark);
  text-wrap:balance;
}
.section:not(.hero){padding-top:4rem;padding-bottom:4rem;} /* compensa fixed header */

/* ---------- NAVBAR ---------- */
.navbar{
  background:var(--clr-gradient);
  transition:background var(--tr-medium);
}
.navbar.is-fixed-top{
  backdrop-filter:blur(10px);
}
.navbar-item,
.navbar-link{
  color:var(--clr-light)!important;
  font-weight:500;
}
.navbar-item:hover,
.navbar-link:hover{color:#ffd9e5!important;}

/* ---------- HERO SECTION ---------- */
#hero .hero-body{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#hero h1,#hero p{color:var(--clr-light);}
#hero .button{box-shadow:0 4px 15px rgba(0,0,0,0.3);}

/* ---------- BUTTONS ---------- */
.btn,
button,
input[type='submit']{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:600;
  border:none;
  padding:0.75rem 1.75rem;
  border-radius:6px;
  background:var(--clr-primary);
  color:var(--clr-light);
  cursor:pointer;
  transition:transform var(--tr-fast),box-shadow var(--tr-fast),background var(--tr-fast);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.2);
  background:var(--clr-secondary);
}
.btn:active,
button:active,
input[type='submit']:active{transform:translateY(0);}

/* ---------- CARDS & FLEX CENTERING ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  background:var(--clr-light);
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  transition:transform var(--tr-fast),box-shadow var(--tr-fast);
}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 18px rgba(0,0,0,0.12);}

/* --- Card Image Handling --- */
.card-image,
.image-container{
  width:100%;
  height:220px;
  overflow:hidden;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  margin:0 auto;
}

/* ---------- ACCORDION ---------- */
.accordion .message-header{
  cursor:pointer;
  background:var(--clr-secondary);
  color:var(--clr-light);
  user-select:none;
}
.accordion .message-header .icon{margin-left:auto;}
.accordion .message-body{display:none; animation:fadeSlideDown var(--tr-medium);}
.accordion .is-active .message-body{display:block;}
@keyframes fadeSlideDown{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- CAROUSEL (Webinars) ---------- */
.carousel{display:grid;grid-auto-flow:column;grid-gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:0.5rem;}
.carousel>.card{scroll-snap-align:center;min-width:290px;width:320px;}

/* ---------- STATISTICS COUNTERS ---------- */
#stats .title{font-size:3rem;}

/* ---------- PARALLAX BACKGROUND HELPER ---------- */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* ---------- GLASSMORPHISM BOX (optional utility) ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid rgba(255,255,255,0.25);
}

/* ---------- LINKS ---------- */
a{color:var(--clr-secondary);transition:color var(--tr-fast);}
a:hover{color:var(--clr-primary);}
.read-more{
  font-weight:600;
  position:relative;
  padding-right:1.2rem;
}
.read-more::after{
  content:'→';
  position:absolute;
  right:0;
  top:0;
  transition:transform var(--tr-fast);
}
.read-more:hover::after{transform:translateX(4px);}

/* ---------- SOCIAL TEXT LINKS IN FOOTER ---------- */
footer a{color:#d1d1d1;}
footer a:hover{color:var(--clr-light);text-decoration:underline;}

/* ---------- SUCCESS PAGE ---------- */
.success-wrapper,
.hero.is-fullheight{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;}

/* ---------- PRIVACY & TERMS PADDING ---------- */
body[data-page="legal"] .section:first-of-type{padding-top:100px;}

/* ---------- COOKIE POPUP BUTTON ---------- */
#acceptCookie{font-size:0.85rem;}

/* ---------- IMAGE BACKGROUND UTILITY ---------- */
.bg-cover{background-size:cover!important;background-repeat:no-repeat!important;background-position:center;}

/* ---------- ADAPTIVE TYPOGRAPHY ---------- */
@media (max-width:768px){
  h1{font-size:2rem;}
  h2{font-size:1.5rem;}
  .navbar-item{font-size:0.9rem;}
}

/* ---------- DRAWN ANIMATION STYLE ---------- */
@keyframes scribble{
  0%{stroke-dashoffset:1000;opacity:0;}
  60%{opacity:1;}
  100%{stroke-dashoffset:0;opacity:1;}
}
.path-animate{
  stroke-dasharray:1000;
  animation:scribble 3s ease forwards;
}

/* ---------- UTILITY CLASSES ---------- */
.mt-2{margin-top:0.5rem;}
.mt-3{margin-top:1rem;}
.mt-4{margin-top:1.5rem;}
.mt-5{margin-top:2rem;}
.text-center{text-align:center;}
.w-100{width:100%;}
.navbar-burger{
  display: none;
}