/* ======================================================
   Global Variables – Eco-Minimal Split-Complementary Palette
====================================================== */
:root{
  --clr-primary:#2E7D32;            /* Verde selva */
  --clr-primary-light:#4CAF50;
  --clr-primary-dark:#1B5E20;

  --clr-split:#FF6F00;              /* Naranja cálido (split complementario) */
  --clr-split-light:#FFA040;
  --clr-split-dark:#C43E00;

  --clr-accent:#38B2AC;             /* Cian suave para detalles */
  --clr-bg:#F4F7F5;                 /* Fondo neutro eco-minimalista */
  --clr-surface:rgba(255,255,255,0.25); /* Vidrio */
  --clr-surface-border:rgba(255,255,255,0.4);
  --clr-text-dark:#222222;
  --clr-text-light:#FFFFFF;

  --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,0.12);
  --blur:20px;

  --transition:all .35s ease;
}

/* ======================================================
   Base Typography & Layout
====================================================== */
html{scroll-behavior:smooth;}
body{
  font-family:'Source Sans Pro',Arial,Helvetica,sans-serif;
  color:var(--clr-text-dark);
  background:var(--clr-bg);
}
h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display',serif;
  color:var(--clr-text-dark);
  line-height:1.25;
}
.title{text-shadow:1px 1px 3px rgba(0,0,0,.15);}
.section{padding-top:4rem;padding-bottom:4rem;}

/* ======================================================
   Navigation – Fixed & Transparent
====================================================== */
.navbar{
  backdrop-filter:blur(var(--blur));
  background:var(--clr-surface);
  border-bottom:1px solid var(--clr-surface-border);
  transition:var(--transition);
}
.navbar.is-scrolled{box-shadow:var(--shadow);}

/* ======================================================
   Buttons – Global
====================================================== */
.button,
.btn,
input[type="submit"]{
  position:relative;
  font-weight:600;
  border:none;
  border-radius:var(--radius);
  transition:var(--transition);
  background:var(--clr-primary);
  color:var(--clr-text-light);
}
.button.is-link{background:var(--clr-split);}
.button.is-success{background:var(--clr-accent);}
.button:hover,
.btn:hover,
input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  filter:brightness(1.05);
}

/* ======================================================
   Glassmorphism Helpers
====================================================== */
.glass{
  background:var(--clr-surface);
  backdrop-filter:blur(var(--blur)) saturate(180%);
  border:1px solid var(--clr-surface-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ======================================================
   Hero
====================================================== */
#hero{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--clr-text-light);
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
}
#hero .subtitle{color:var(--clr-text-light);}
#hero .button{margin-top:1.5rem;}

/* ======================================================
   Cards – Universal Flex Centering
====================================================== */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-surface);
  backdrop-filter:blur(calc(var(--blur)/1.5));
  border:1px solid var(--clr-surface-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.card:hover,
.item:hover,
.team-member:hover{transform:translateY(-4px);}

.card-image,
.image-container{
  width:100%;
  height:220px;
  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;
  object-position:center;
  display:block;
  margin:0 auto;
}

/* ======================================================
   Parallax Utility
====================================================== */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* ======================================================
   Read-More Links
====================================================== */
.read-more{
  color:var(--clr-split-dark);
  font-weight:600;
  position:relative;
  padding-right:.5rem;
  transition:var(--transition);
}
.read-more::after{
  content:'→';
  position:absolute;
  right:-.5rem;
  transition:var(--transition);
}
.read-more:hover{color:var(--clr-split);}
.read-more:hover::after{right:-.25rem;}

/* ======================================================
   Success Page
====================================================== */
body.success-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
body.success-page .message-box{
  max-width:32rem;
  padding:3rem 2rem;
}

/* ======================================================
   Privacy & Terms Padding
====================================================== */
body.privacy-page,
body.terms-page{padding-top:100px;}

/* ======================================================
   Footer
====================================================== */
footer{
  padding:3rem 1rem;
}
footer p,
footer a{
  color:var(--clr-text-light);
}
footer a:hover{color:var(--clr-accent);}
.social-link{
  margin:0 .25rem;
  font-weight:600;
}

/* ======================================================
   Animations & AOS-like Fade-in
====================================================== */
.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease,transform .8s ease;
}
.fade-in.is-visible{opacity:1;transform:none;}

/* ======================================================
   Responsive Tweaks
====================================================== */
@media (max-width:768px){
  .navbar-menu{backdrop-filter:none;background:var(--clr-bg);}
  .section{padding-top:3rem;padding-bottom:3rem;}
  .card-image,.image-container{height:180px;}
}
.navbar-burger{
  display: none;
}