/* ============================
   VARIABLES, RESET Y TIPOGRAFÍA GLOBAL
   ============================ */
:root {
  --primary: #8CC63F;
  --text: #222;
  --muted: #555;
  --bg: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.85);
  --shadow: 0 2px 10px rgba(0,0,0,0.08);
  --max-width: 100%;

  /* Tipografía */
  --font-logo: 'Galano Grotesque', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Oswald', sans-serif;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: #f9fafb;
  font-size: 1rem;
  line-height: 1.6;
  max-width: var(--max-width);
}

/* ============================
   TÍTULOS GLOBALES
   ============================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 0 0.5em;
  color: var(--text);
  text-align: center;
}

/* Ajustes específicos de títulos en secciones */
#quienes-somos h2,
#contacto h2 {
  font-weight: 800; /* ExtraBold */
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 28px;
}

/* Ejemplo para Productos (sub0) */
#productos h2 {
  font-weight: 800; /* ExtraBold */
  margin-bottom: 2rem;
}

/* Utilitarios */
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }

/* ============================
   NAVBAR RIBBON
   ============================ */
.site-header .navbar-ribbon {
  background: #f5f5f5;
  display: flex;
  width: 100%;
  height: 4px;
}
.ribbon-left { flex: 1; background: #FAD348; }
.ribbon-center {
  flex: 1;
  background: #2a61bb;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
}
.ribbon-center .square {
  width: 4px;
  height: 4px;
  background: #fff;
}
.ribbon-right { flex: 1; background: #c51104; }

/* ============================
   NAVBAR FIJA
   ============================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

.site-header .site-navbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:50px;
  padding:5px 50px;
  background-color:var(--nav-bg);
  border-bottom:1px solid rgba(0,0,0,0.06);
  transition: background-color .3s ease, box-shadow .3s ease;
}

.brand { display:flex; align-items:center; }
.brand img {
  height:30px;
  display:block;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

/* Texto de marca */
.site-header .brand-navbar-text {
  margin-left: 10px;
  margin-bottom: -1px;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.1em;
  color: #3f7258;
  white-space: nowrap;
  display: inline-block;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 420ms cubic-bezier(.2,.9,.2,1), transform 420ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.site-header .brand-navbar-text .venezuela {
  margin-bottom: -1px;
  font-family: var(--font-logo);
  color: #a0a0a0;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.1em;
  margin-left: 6px;
  vertical-align: 1px;
  display: inline-block;
}

/* Estado scrolled */
.site-header.scrolled {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.site-header.scrolled .brand-navbar-text,
.brand-navbar-text.fade-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.site-header.scrolled .brand img {
  transform: translateY(-2px) scale(0.98);
}

/* ============================
   ENLACES DE NAVEGACIÓN
   ============================ */
.site-header .nav-links {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .nav-links a {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-header .nav-links a:hover {
  background: #006937;
  color: #FFFCFC;
}

/* Estado activo (scrollspy) */
.site-header .nav-links a.active {
  color: #03b10c;
  font-weight: 700;
  border-bottom: 2px solid #00713C;
  background: none; /* evita que se quede con el fondo del hover */
}

/* Estado focus/click */
.site-header .nav-links a:focus,
.site-header .nav-links a:active {
  outline: none;       /* quita borde azul */
  background: none;    /* evita que se quede pegado el hover */
  color: inherit;      /* mantiene color normal */
}

/* Toggle móvil */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav-toggle .bar {
  display: block;
  width: 22px; height: 2px;
  margin: 5px 0;
  background: var(--text);
  transition: 0.3s;
}

/* ============================
   FOOTER GLOBAL
   ============================ */
.site-footer {
  background:#212020;
  color:#222;
  margin:0;
  padding-top: 4em;
  padding-bottom: 3em;
}
.footer-grid {
  display:grid;
  grid-template-columns: 1fr 1fr 30%;
  gap:4em;
  align-items:start;
  padding:28px 20px;
  max-width:var(--max-width);
}
.footer-nav ul { list-style:none; padding:0; margin:0; }
.footer-nav ul li { margin-bottom:8px; }
.footer-nav ul li a { color:#333; text-decoration:none; font-weight:300; }
.footer-info p,
.footer-social p {
  margin:6px 0;
  color:#fefdfd;
  line-height:1.4;
  font-weight:300;
}
.social-list {
  list-style:none;
  padding:0;
  margin:6px 0;
  display:inline-flex;
  gap:10px;
}
.social-list li a {
  display:inline-block;
  padding:6px 8px;
  background:#fff;
  border-radius:6px;
  text-decoration:none;
  color:#333;
  box-shadow:0 1px 3px rgba(247, 245, 245, 0.04);
}
.footer-copy {
  text-align:center;
  padding:20px 20px;
  border-top:1px solid rgba(0,0,0,1);
  color:#8CC63F;
  font-size:0.9rem;
  margin-top: 20px;
}

/* ============================
   SECCIONES
   ============================ */
.section-divider {
  height: 10px;                  /* grosor del listón */
  background-color: #B8FFAA;     /* color solicitado */
  width: 100%;                   /* ocupa todo el ancho */
}

/* ============================
   UTILITARIOS
   ============================ */
.hidden { display:none !important; }
.placeholder { max-width: 100%; min-height: 120px; padding: 0; }