/* =========================================================
  IMPULSO360 – CREATIVE / BIOMORPHIC DESIGN SYSTEM
  Author: 2024
  Fonts:  Heading – Roboto,  Body – Lato
  Palette:  Tetradic (primary, secondary, accent-A, accent-B)
========================================================= */

/* ---------- Root & Theme Tokens ---------- */
:root{
  /* Font Families */
  --ff-heading: 'Roboto', system-ui, sans-serif;
  --ff-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tetradic Colors */
  --clr-primary: #00A86B;      /* vivid green  */
  --clr-primary-dark: #008154;
  --clr-secondary: #FF6F61;    /* coral red    */
  --clr-secondary-dark: #E05548;
  --clr-accentA: #1E90FF;      /* bright blue  */
  --clr-accentA-dark: #186FCA;
  --clr-accentB: #FFD700;      /* golden       */
  --clr-accentB-dark: #D6B300;

  /* Neutrals */
  --clr-white: #FFFFFF;
  --clr-light: #F7F9FA;
  --clr-dark:  #1A1C1E;
  --clr-muted:#6B7280;

  /* Gradients & Overlays */
  --grad-hero: linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
  --grad-glass: linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.05));

  /* Radii & Shadows */
  --radii-soft: 14px;
  --shadow-lg: 0 10px 20px rgba(0,0,0,.15);
  --shadow-md: 0 6px 12px rgba(0,0,0,.1);
  --shadow-sm: 0 3px 6px rgba(0,0,0,.08);

  /* Animations */
  --timing: .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- Global Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--clr-dark);
  background:var(--clr-light);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-heading);
  line-height:1.25;
  font-weight:700;
  color:var(--clr-dark);
  margin-bottom: .5em;
}
img{max-width:100%;display:block;height:auto}

/* ---------- Utility Classes ---------- */
.container{
  width:min(92%,1200px);
  margin-inline:auto;
}
.section{padding:4rem 0}
.alt-bg{background:var(--clr-white)}
.text-center{text-align:center}
.glass{
  background:var(--grad-glass);
  backdrop-filter:blur(12px);
  border-radius:var(--radii-soft);
}
.flex-center{display:flex;justify-content:center;align-items:center}
.read-more{
  color:var(--clr-accentA);
  font-weight:600;
  position:relative;
  padding-right:1.25em;
  transition:color var(--timing);
}
.read-more::after{
  content:'›';
  font-size:1.25em;
  position:absolute;right:.15em;top:0;
  transition:transform var(--timing);
}
.read-more:hover{color:var(--clr-accentA-dark)}
.read-more:hover::after{transform:translateX(4px)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--grad-glass);
  box-shadow:var(--shadow-sm);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;
}
.logo{font-family:var(--ff-heading);font-size:1.5rem;color:var(--clr-primary);text-decoration:none}
.main-nav ul{list-style:none;display:flex;gap:1.5rem}
.main-nav a{
  text-decoration:none;
  font-weight:600;
  color:var(--clr-dark);
  transition:color var(--timing);
}
.main-nav a:hover{color:var(--clr-primary)}

/* Responsive Nav */
.burger{
  display:none;
  flex-direction:column;
  gap:4px;
  background:transparent;border:none;cursor:pointer
}
.burger span{width:24px;height:3px;background:var(--clr-dark);transition:transform var(--timing)}
@media(max-width:992px){
  .burger{display:flex}
  .main-nav{position:fixed;inset:0;top:68px;background:var(--clr-white);transform:translateX(100%);transition:transform var(--timing)}
  .main-nav.open{transform:translateX(0)}
  .main-nav ul{flex-direction:column;align-items:center;gap:2rem;margin-top:2rem}
}

/* ---------- Hero ---------- */
.hero-section{
  position:relative;
  background:var(--grad-hero),url('../image/hero-consultoria-negocios.jpg') center/cover no-repeat fixed;
  color:var(--clr-white);
  display:flex;align-items:center;
  min-height:80vh;
  text-align:center;
}
.hero-overlay{position:absolute;inset:0;background:var(--grad-hero)}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
}
.hero-content h1{font-size:clamp(2.2rem,4vw+1rem,3.5rem);text-shadow:0 3px 6px rgba(0,0,0,.45)}
.hero-content p{font-size:1.15rem;margin:.75rem auto 2rem;max-width:38ch;color:var(--clr-light)}

/* ---------- Buttons (Global) ---------- */
.btn,
button,
input[type='submit']{
  --_bg:var(--clr-primary);
  --_bg-dark:var(--clr-primary-dark);
  font-family:var(--ff-heading);
  padding:.75rem 2.25rem;
  font-weight:700;
  color:var(--clr-white);
  background:var(--_bg);
  border:none;
  border-radius:50px;
  cursor:pointer;
  transition:background var(--timing),transform var(--timing),box-shadow var(--timing);
  box-shadow:var(--shadow-md);
  text-decoration:none;
  display:inline-block;
}
.btn-secondary{--_bg:var(--clr-secondary);--_bg-dark:var(--clr-secondary-dark)}
.btn-accentA{--_bg:var(--clr-accentA);--_bg-dark:var(--clr-accentA-dark)}
.btn-accentB{--_bg:var(--clr-accentB);--_bg-dark:var(--clr-accentB-dark)}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--_bg-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-md)}

/* ---------- Micro-Animations ---------- */
@keyframes subtle-pop{0%{transform:scale(.95)}100%{transform:scale(1)}}
[data-motion]{animation:subtle-pop .6s var(--timing) backwards}

/* ---------- Cards & Grids ---------- */
.card-grid{
  display:grid;
  gap:2rem;
}
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--clr-white);
  padding:1.5rem;
  border-radius:var(--radii-soft);
  box-shadow:var(--shadow-sm);
  transition:transform var(--timing),box-shadow var(--timing);
  text-align:center;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.image-container{
  width:100%;
  height:220px;
  border-radius:var(--radii-soft);
  overflow:hidden;
  margin-bottom:1rem;
  display:flex;
  justify-content:center;
  align-items:center;
}
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  margin:0 auto;
}
.card-content h3{margin-bottom:.5rem}
@media(min-width:768px){
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .card-grid.two-cols{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
}

/* ---------- About, Services, Features, Workshops, Projects ---------- */
.stats-wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1.5rem;
  margin-top:2rem;
}
.stat-widget{
  text-align:center;
  background:var(--clr-white);
  padding:1.25rem;
  border-radius:var(--radii-soft);
  box-shadow:var(--shadow-sm);
}
.stat-number{
  font-family:var(--ff-heading);
  font-size:2rem;
  color:var(--clr-primary);
  display:block;margin-bottom:.25rem;
}

/* ---------- Progress ---------- */
progress{
  width:100%;
  height:.75rem;
  border-radius:50px;
  appearance:none;
}
progress::-webkit-progress-bar{background:var(--clr-muted)}
progress::-webkit-progress-value{background:var(--clr-accentA);border-radius:50px}

/* ---------- Customer Stories / Testimonials ---------- */
.testimonial{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
}
.testimonial p{max-width:44ch;font-style:italic;color:var(--clr-dark)}
.testimonial strong{display:block;margin-top:.5rem;color:var(--clr-primary)}

/* ---------- FAQ ---------- */
details{background:var(--clr-white);border-radius:var(--radii-soft);box-shadow:var(--shadow-sm);padding:1rem;margin-bottom:1rem;cursor:pointer}
details summary{font-weight:700;list-style:none}
details[open] summary{color:var(--clr-primary)}
details p{margin-top:.75rem}

/* ---------- Gallery ---------- */
#gallery .card{padding:0;background:transparent;box-shadow:none}
#gallery .image-container{border-radius:var(--radii-soft);height:260px}

/* ---------- Contact Form ---------- */
.contact-form{
  max-width:640px;
  margin:0 auto;
  display:grid;
  gap:1.25rem;
}
.contact-form .form-group{display:flex;flex-direction:column;gap:.5rem}
.contact-form label{font-weight:600;color:var(--clr-dark)}
.contact-form input,
.contact-form textarea{
  padding:.75rem 1rem;
  border:2px solid var(--clr-muted);
  border-radius:var(--radii-soft);
  font:inherit;
  transition:border-color var(--timing),box-shadow var(--timing);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--clr-primary);
  box-shadow:0 0 0 3px rgba(0,168,107,.2);
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--clr-dark);
  color:var(--clr-light);
  padding:2.5rem 0;
  text-align:center;
}
.site-footer nav{margin:1rem 0}
.site-footer a{
  color:var(--clr-accentB);
  text-decoration:none;
  margin:0 .5rem;
  transition:color var(--timing);
}
.site-footer a:hover{color:var(--clr-accentB-dark)}
.social-links a{
  font-weight:700;
  color:var(--clr-secondary);
  margin:0 .75rem;
  transition:color var(--timing),transform var(--timing);
}
.social-links a:hover{color:var(--clr-secondary-dark);transform:translateY(-2px)}

/* ---------- Success Page ---------- */
.page-success{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:var(--grad-hero),url('../image/success-bg.jpg') center/cover no-repeat;
  color:var(--clr-white);
  padding:2rem;
}

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

/* ---------- Helpers for Background Images ---------- */
.bg-cover{background-size:cover;background-repeat:no-repeat;background-position:center}

/* ---------- Parallax Hero (Optional) ---------- */
@media(min-width:1024px){
  .hero-section{background-attachment:fixed}
}

/* ---------- Columns Utility (Bulma-like Widths) ---------- */
.is-two-thirds{width:66.666%}

/* ---------- Accessibility Tweaks ---------- */
:focus-visible{outline:3px dashed var(--clr-accentA);outline-offset:2px}