/* =========================
   NAV.CSS (independiente)
   ========================= */

/* Reset / base */
:root{
  --color-primary:#2E7D32;
  --color-primary-dark:#1B5E20;
  --color-bg:#FCFDF5;
  --color-bg-light:#E8F5E9;
  --color-text:#37474F;
  --color-text-light:#607D8B;
  --color-white:#FFFFFF;

  --spacing-xs:0.5rem;
  --spacing-sm:1rem;
  --spacing-md:2rem;

  --radius-card:12px;
  --radius-btn:6px;
  --radius-header:50px;

  --shadow-header:0 8px 24px rgba(0,0,0,0.08);

  --header-height:90px;

  /* Tipografía base (independiente) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html, body{ margin:0; padding:0; }

body{
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
}

a{ text-decoration:none; color: inherit; transition: color .3s; }
a:focus{ outline: 2px solid rgba(46,125,50,.35); outline-offset: 3px; border-radius: 6px; }

ul{ list-style:none; margin:0; padding:0; }

img{
  max-width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* Botones (porque el CTA usa .btn .btn-primary) */
.btn{
  display:inline-block;
  padding:0.75rem 1.5rem;
  border-radius:var(--radius-btn);
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition: all .2s ease;
  border:none;
  user-select:none;
}
.btn-primary{
  background-color:var(--color-primary);
  color:var(--color-white);
}
.btn-primary:hover{
  background-color:var(--color-primary-dark);
  transform: translateY(-1px);
}

/* =========================
   Header cápsula (NAV)
   ========================= */

.site-header{
  position: sticky;
  top: 15px;
  z-index: 1000;
  padding: 0 var(--spacing-sm);
  pointer-events: none;
}

.header-container{
  position: relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1400px;
  margin:0 auto;

  background: var(--color-white);
  border-radius: var(--radius-header);
  box-shadow: var(--shadow-header);
  padding: 0.75rem 1.5rem;
  pointer-events:auto;
  transition: all .3s ease;
}

/* Logo */
.logo-link{ display: inline-flex; align-items:center; }
.logo-img{
  height:55px;
  width:auto;
  transition: height .3s ease;
}

/* =========================
   NAV móvil
   ========================= */

.main-nav{ display:none; }

.nav-toggle{
  background:none;
  border:none;
  cursor:pointer;
  padding:0.5rem;
  line-height:0;
}

.hamburger{
  display:block;
  width:25px;
  height:3px;
  background: var(--color-text);
  position: relative;
}

.hamburger::before,
.hamburger::after{
  content:'';
  position:absolute;
  width:25px;
  height:3px;
  background: var(--color-text);
  left:0;
  transition:.3s;
}

.hamburger::before{ top:-8px; }
.hamburger::after{ top:8px; }

/* Menú móvil abierto */
.main-nav.active{
  display:flex;
  flex-direction:column;
  position:absolute;
  top: calc(100% + 10px);
  left: var(--spacing-sm);
  right: var(--spacing-sm);
  background: var(--color-white);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-header);
  border-radius: var(--radius-card);
  z-index: 1001;
}

.nav-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:1rem;
  text-align:center;
  font-weight:500;
}

.nav-list a:hover{ color: var(--color-primary); }

.nav-cta{ width:100%; }

/* =========================
   NAV desktop
   ========================= */

@media (min-width:1024px){
  .site-header{ padding: 0 var(--spacing-md); top: 25px; }
  .header-container{ padding: 0.75rem 2.5rem; }
  .logo-img{ height:75px; }

  .nav-toggle{ display:none; }

  .main-nav{
    display:flex;
    margin-left:auto;
    align-items:center;
  }

  /* Si quedase .active por JS, forzamos layout normal */
  .main-nav.active{
    display:flex;
    position:static;
    flex-direction:row;
    width:auto;
    background:none;
    box-shadow:none;
    padding:0;
    border:none;
  }

  .nav-list{
    flex-direction:row;
    gap:2rem;
    margin:0 2rem 0 0;
    text-align:left;
  }

  .nav-cta{ width:auto; }
}