/* -------------------------------------------------
  Global System: Modern + Adaptive Typography
  ------------------------------------------------- */
:root{
  /* Palette – Neutral base with vibrant accents */
  --clr-primary: #4f6df5;
  --clr-primary-dark: #3c55c2;
  --clr-accent: #ffb703;
  --clr-accent-dark: #d49302;
  --clr-bg: #ffffff;
  --clr-bg-alt: #f5f7fa;
  --clr-text: #333333;
  --clr-text-light: #ffffff;
  --clr-dark: #222222;

  /* Radius & Shadows */
  --radius: 8px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);

  /* Adaptive type scale */
  --fs-900: clamp(2.5rem, 2.1rem + 2vw, 4rem);
  --fs-800: clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --fs-700: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  --fs-600: 1.25rem;
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: .875rem;
  --fs-200: .75rem;
}

html{
  scroll-behavior: smooth;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: 'Lato', sans-serif;
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.2;
}

h1{font-size:var(--fs-900);}
h2{font-size:var(--fs-800);}
h3{font-size:var(--fs-700);}
h4{font-size:var(--fs-600);}

section{padding:4rem 1rem;}
@media (max-width:768px){section{padding:3rem 1rem;}}

/* -------------------------------------------------
  Utility Helpers
  ------------------------------------------------- */
.text-center{text-align:center;}
.mb-0{margin-bottom:0!important;}
.mt-0{margin-top:0!important;}

/* Buttons (global) */
.btn,
button,
input[type='submit'],
.button{
  background: var(--clr-primary);
  color: var(--clr-text-light);
  border:none;
  border-radius:var(--radius);
  padding:.75rem 1.5rem;
  font-weight:600;
  cursor:pointer;
  transition:background .3s ease, transform .2s ease;
}
.btn:hover,
button:hover,
input[type='submit']:hover,
.button:hover{
  background: var(--clr-primary-dark);
  transform:translateY(-2px);
}
.btn:active,
button:active,
input[type='submit']:active,
.button:active{
  transform:translateY(0);
}

/* -------------------------------------------------
  Hero
  ------------------------------------------------- */
#hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:100vh;
  color:var(--clr-text-light);
}
#hero .title,
#hero .subtitle{color:#ffffff;}
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
}
#hero > .hero-body,
#hero *{position:relative; z-index:1;}

/* -------------------------------------------------
  Navbar tweaks
  ------------------------------------------------- */
.navbar.is-light{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.navbar-item.is-active,
.navbar-item:hover{color:var(--clr-primary);}

/* -------------------------------------------------
  Cards & Image Containers
  ------------------------------------------------- */
.card,
.testimonial,
.product-card,
.team-member,
.item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow:var(--shadow-sm);
  border-radius:var(--radius);
  background:var(--clr-bg);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover,
.testimonial:hover,
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}

.card-image,
.image-container{
  width:100%;
  height:240px;
  overflow:hidden;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0 auto;
}

/* -------------------------------------------------
  Scroll-dependent Animations
  ------------------------------------------------- */
[data-animate]{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
[data-animate].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* -------------------------------------------------
  Parallax backgrounds (simple) 
  ------------------------------------------------- */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* -------------------------------------------------
  Testimonials specific
  ------------------------------------------------- */
.testimonial .card-content p:nth-child(1){
  font-weight:700;
  margin-bottom:.5rem;
  color:var(--clr-primary);
}
.testimonial .card-content p:nth-child(2){font-style:italic;}

/* -------------------------------------------------
  Methodology – custom slider base
  ------------------------------------------------- */
#metodoSlider .columns{scroll-snap-type:x mandatory;overflow-x:auto;}
#metodoSlider .column{scroll-snap-align:center;}

/* -------------------------------------------------
  Footer
  ------------------------------------------------- */
footer.footer{
  background:var(--clr-dark);
  color:var(--clr-text-light);
  padding:3rem 1rem;
}
footer a{
  color:var(--clr-accent);
  text-decoration:none;
  transition:color .3s ease;
}
footer a:hover{color:var(--clr-accent-dark);}
footer .social-link{
  margin:0 .25rem;
  font-weight:600;
}

/* -------------------------------------------------
  Read-more link
  ------------------------------------------------- */
.read-more{
  display:inline-block;
  color:var(--clr-primary);
  font-weight:600;
  position:relative;
  padding-right:1.2rem;
  transition:color .3s ease;
}
.read-more::after{
  content:'→';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  transition:transform .3s ease;
}
.read-more:hover{color:var(--clr-primary-dark);}
.read-more:hover::after{transform:translate(4px,-50%);}

/* -------------------------------------------------
  Success Page
  ------------------------------------------------- */
.success-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--clr-bg-alt);
}

/* -------------------------------------------------
  Privacy & Terms fix
  ------------------------------------------------- */
.legal-page{
  padding-top:100px;
}

/* -------------------------------------------------
  Background helpers
  ------------------------------------------------- */
.bg-cover{
  background-size:cover;
  background-repeat:no-repeat;
}
.bg-dark-overlay{
  position:relative;
}
.bg-dark-overlay::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));
}

/* -------------------------------------------------
  Glassmorphism util
  ------------------------------------------------- */
.glass{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(255,255,255,.3);
}

/* -------------------------------------------------
  Form styles
  ------------------------------------------------- */
input,textarea{
  border-radius:var(--radius);
}
.field .input:focus,
.field .textarea:focus{
  border-color:var(--clr-primary);
  box-shadow:0 0 0 2px rgba(79,109,245,.25);
}

/* -------------------------------------------------
  Media Queries for better readability
  ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{
    transition:none!important;
    animation:none!important;
  }
}