/* =========================================================
   PERSONALIZACIÓN HEADER / NAVBAR (Bootstrap)
   ========================================================= */
:root{
  --header-bg    : #ffffff;
  --brand-color  : #3c4d28;
  --shadow-hdr   : 3px 3px 5px rgba(0,0,0,.7);

  --ff-body      : 'Montserrat', sans-serif;

  /* Nav sizes */
  --fs-nav       : 2rem;  /* normal */
  --fs-nav-scroll: 2rem;  /* con scroll */

  /* Nav weights */
  --fw-nav       : 400;   /* normal */
  --fw-nav-scroll: 400;   /* con scroll */

  --ls-nav       : 0.05em;
  --fs-btn       : 2.5rem;
}

/* ───────── HEADER GENERAL ───────── */
header{ font-family: var(--ff-body); }
header.fixed-top{ transition: all .3s ease; }
header.fixed-top .navbar{ padding-block:1.5rem; transition: padding .3s ease; }
header.fixed-top.scrolled{ background-color: var(--header-bg); box-shadow: var(--shadow-hdr); }
header.fixed-top.scrolled .navbar{ padding-block:.5rem; }

/* ───────── LOGO ───────── */
.navbar-brand img{
  height:100px; width:auto; object-fit:contain;
  margin-top:-20px; transition:all .3s ease;
}
/* Logo blanco con header transparente */
header:not(.scrolled) .navbar-brand img{ content:url("/images/logo-blanco.png"); }
/* Logo verde + tamaño reducido al hacer scroll */
header.scrolled .navbar-brand img{ height:75px; margin-top:-30px; content:url("/images/logo.png"); }

/* ───────── NAV LINKS ───────── */
.navbar-nav .nav-link{
  font-family: var(--ff-body) !important;
  font-size: var(--fs-nav);
  font-weight: var(--fw-nav);
  color: var(--brand-color) !important;
  text-transform: uppercase;
  letter-spacing: var(--ls-nav);
  padding: .5rem 3rem !important;
  transition: opacity .25s ease;
}
.navbar-nav .nav-link:hover{ opacity:.8; }

/* Scroll: compacta ligeramente (tipos iguales por var) */
header.scrolled .navbar-nav .nav-link{
  font-size: var(--fs-nav-scroll);
  font-weight: var(--fw-nav-scroll);
  padding: .5rem 3rem !important;
}

/* Enlaces blancos con header transparente */
header:not(.scrolled) .navbar-nav .nav-link,
header:not(.scrolled) #langSwitcher,
header:not(.scrolled) .btn .sign_up{
  color:#fff !important; border-color:#fff;
}

/* Estado activo (SEO/accesibilidad visual) */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"]{
  position:relative;
}
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link[aria-current="page"]::after{
  content:""; position:absolute; left:1.5rem; right:1.5rem; bottom:-.2rem;
  height:2px; background: currentColor; opacity:.75;
}

/* ───────── SELECTOR DE IDIOMA ───────── */
#langSwitcher{
  font-family: var(--ff-body);
  font-size: var(--fs-nav);
  font-weight:600;
  background:transparent;
  border:2px solid var(--brand-color);
  border-radius:6px;
  padding:.4rem .6rem;
  color:var(--brand-color);
  cursor:pointer;
  margin-left:1rem;
}

/* ───────── BOTÓN CONTACTO (opcional) ───────── */
.btn .sign_up{
  font-family: var(--ff-body);
  font-size: var(--fs-btn);
  padding:.8rem 2rem;
  border-radius:20px;
  background:var(--brand-color);
  color:var(--header-bg);
  text-decoration:none;
}
.btn .sign_up:hover{ opacity:.8; }

/* ───────── BURGER / TOGGLER ───────── */
.navbar-toggler{
  border:0; box-shadow:none !important; outline:none !important;
  padding:.25rem .5rem;
}
.navbar-toggler:focus-visible{ outline:2px solid rgba(0,0,0,.25); outline-offset:2px; }

/* Icono burger (SVG embebido) */
header:not(.scrolled) .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
header.scrolled .navbar-toggler-icon{
  background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="%233c4d28" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
}

/* =========================================================
   MEDIA QUERIES (Responsive)
   ========================================================= */

/* ── MOBILE / TABLET < LG (≤ 991.98px) ─────────────────── */
@media (max-width:991.98px){

  /* Navbar padding más contenido */
  header.fixed-top .navbar{ padding-block:.75rem; }

  /* Logo más contenido en móviles */
  .navbar-brand img{ height:68px; margin-top:-10px; }
  header.scrolled .navbar-brand img{ height:62px; margin-top:-16px; }

  /* Panel lateral usando .navbar-collapse */
  .navbar-collapse{
    position:fixed; top:0; right:0; bottom:0;
    width:min(84vw, 360px);
    background:rgba(255,255,255,.86);
    backdrop-filter: blur(12px);
    box-shadow:-10px 0 30px rgba(0,0,0,.18);
    padding: calc(env(safe-area-inset-top, 16px) + 8px) 18px 18px;
    overflow-y:auto;
    transform:translateX(100%);
    visibility:hidden;
    transition: transform .3s ease, visibility .3s step-end;
    z-index:1050;
  }
  .navbar-collapse.show{
    transform:translateX(0);
    visibility:visible;
    transition: transform .3s ease, visibility 0s;
  }

  /* Columna vertical de enlaces + espacios táctiles */
  .navbar-nav{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:.25rem;
    padding-block: .75rem;
  }
  .navbar-nav .nav-link{
    padding:.9rem 1.2rem !important;
    font-size:2.1rem;
    letter-spacing:.04em;
  }

  /* Color de enlaces dentro del panel (si header estaba transparente) */
  .navbar-collapse.show .nav-link,
  .navbar-collapse.show #langSwitcher,
  .navbar-collapse.show .btn .sign_up{
    color:var(--brand-color) !important;
    border-color:var(--brand-color);
  }

  /* Selector de idioma ocupa toda la fila y es tocable */
  #langSwitcher{
    width: auto;
    display:inline-block;
    margin: .75rem 1.2rem 0;
    padding:.55rem .8rem;
    font-size:1.8rem;
  }

  /* CTA dentro del panel (si lo usas) */
  .btn .sign_up{
    display:inline-block;
    margin: .75rem 1.2rem 0;
    font-size:2rem;
    border-radius:9999px;
  }

  /* Espaciado del botón burger por encima del panel */
  .navbar-toggler{ z-index:1060; }

  /* Mejor foco para enlaces en móvil */
  .navbar-nav .nav-link:focus-visible{
    outline:2px solid rgba(60,77,40,.4);
    outline-offset:3px;
    border-radius:6px;
  }
}

/* ── DESKTOP ≥ LG (≥ 992px) — resets del panel ─────────── */
@media (min-width:992px){
  .navbar-collapse{
    position:static; transform:none !important; visibility:visible !important;
    background:transparent; box-shadow:none; padding:0; width:auto; height:auto; overflow:visible;
    backdrop-filter:none;
  }
  .navbar-nav{ flex-direction:row !important; align-items:center !important; gap:0; }
  #langSwitcher{ margin-left:1rem; }
}

/* =========================================================
   MÓVIL / TABLET (≤ 991.98px): siempre logo y textos en verde
   ========================================================= */
@media (max-width: 991.98px){
  /* Fuerza fondo y sombra como si estuviera scrolleado */
  header.fixed-top{
    background-color: var(--header-bg) !important;
    box-shadow: var(--shadow-hdr) !important;
  }

  /* Logo SIEMPRE verde */
  header .navbar-brand img{
    content: url("/images/logo.png") !important;
    height: 62px;             /* ajusta si quieres */
    margin-top: -16px;        /* ajusta si quieres */
  }

  /* Enlaces, selector idioma y CTA SIEMPRE verdes */
  header .navbar-nav .nav-link,
  header #langSwitcher,
  header .btn .sign_up{
    color: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
  }

  /* Anula explícitamente las reglas de “header transparente” */
  header:not(.scrolled) .navbar-nav .nav-link,
  header:not(.scrolled) #langSwitcher,
  header:not(.scrolled) .btn .sign_up{
    color: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
  }

  /* Burger SIEMPRE verde */
  .navbar-toggler-icon{
    background-image:url('data:image/svg+xml,%3Csvg viewBox%3D%220 0 30 30%22 xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath stroke%3D%22%233c4d28%22 stroke-linecap%3D%22round%22 stroke-miterlimit%3D%2210%22 stroke-width%3D%222%22 d%3D%22M4 7h22M4 15h22M4 23h22%22/%3E%3C/svg%3E') !important;
  }
}
/* ─────────────────────────────────────────────
   LANG DROPDOWN — botón más grande + menú transparente sin scroll
   ───────────────────────────────────────────── */

/* Botón (estado cerrado) — tamaños mayores */
header:not(.scrolled) .lang-btn{
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 6px;
  font-family: var(--ff-body);
  font-size: calc(var(--fs-nav) + .3rem);     /* ↑ más grande que antes */
  font-weight: 700;                            /* un pelín más marcado */
  padding: .5rem 1rem;                         /* un poco más de área clic */
}
header.scrolled .lang-btn{
  background: transparent;
  color: var(--brand-color);
  border: 2px solid var(--brand-color);
  border-radius: 6px;
  font-family: var(--ff-body);
  font-size: calc(var(--fs-nav) + .2rem);      /* ↑ más grande también en scroll */
  font-weight: 700;
  padding: .5rem 1rem;
}

.lang-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}
header.scrolled .lang-btn:focus-visible{
  outline-color: rgba(60,77,40,.35);
}

/* Menú abierto — 100% transparente cuando NO hay scroll */
header:not(.scrolled) .lang-menu{
  background: transparent;                     /* totalmente transparente */
  border: 0;                                   /* sin borde */
  box-shadow: none;                            /* sin sombra */
  backdrop-filter: none;                       /* sin blur */
  min-width: 6rem;
  padding: .25rem 0;
}

/* Ítems del menú (no scroll): blancos, sin fondo; hover transparente con subrayado */
header:not(.scrolled) .lang-menu .dropdown-item{
  font-size: calc(var(--fs-nav) + .1rem);      /* ↑ un poco más grande */
  color:#fff;
  background: transparent !important;
}
header:not(.scrolled) .lang-menu .dropdown-item:hover,
header:not(.scrolled) .lang-menu .dropdown-item:focus{
  background: transparent !important;          /* seguimos transparente */
  color:#fff;
  text-decoration: underline;                   /* feedback al hover */
  text-underline-offset: .2em;
}

/* Con scroll: menú claro, también un poco más grande */
header.scrolled .lang-menu{
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 6rem;
  padding: .25rem 0;
}
header.scrolled .lang-menu .dropdown-item{
  font-size: calc(var(--fs-nav) + .05rem);     /* ↑ respecto a antes */
  color: var(--brand-color);
}
header.scrolled .lang-menu .dropdown-item:hover,
header.scrolled .lang-menu .dropdown-item:focus{
  background: rgba(60,77,40,.08);
  color: var(--brand-color);
  text-decoration: none;
}

/* Opcional: cursor y micro-espaciado */
.lang-switch .dropdown-item{ cursor: pointer; }

/* ==== ULTRA COMPACT NAV (desktop ≥ 992px) ======================= */
:root{
  /* si los tienes ya, estos valores pisan a los anteriores */
  --ls-nav: 0.02em;       /* menos tracking */
}

@media (min-width: 992px){
  /* menos padding vertical de la barra */
  header.fixed-top .navbar{ padding-block: .8rem; }      /* antes 1.5rem */
  header.fixed-top.scrolled .navbar{ padding-block: .35rem; }

  /* reduce el gap entre <li> (usamos column-gap en el UL) */
  .navbar-nav{
    column-gap: .6rem;   /* ultra compacto entre items */
  }

  /* recorta el padding de cada enlace */
  .navbar-nav .nav-link{
    padding: .5rem .9rem !important;   /* antes .5rem 3rem */
    letter-spacing: var(--ls-nav);
  }
  header.scrolled .navbar-nav .nav-link{
    padding: .3rem .75rem !important;   /* aún más compacto en scroll */
  }

  /* acerca un pelín el selector de idioma */
  .lang-switch{ margin-left: .25rem !important; }

  /* si quieres bajar un poco el tamaño de fuente en desktop: descomenta
  .navbar-nav .nav-link{ font-size: calc(var(--fs-nav) - .2rem); }
  header.scrolled .navbar-nav .nav-link{ font-size: calc(var(--fs-nav-scroll) - .2rem); }
  */
}

/* (Opcional) reduce un poco el logo para ganar aire horizontal */
@media (min-width: 992px){
  .navbar-brand img{
    height: 100px;   /* antes 100px */
    margin-top: -16px;
  }
  header.scrolled .navbar-brand img{
    height: 70px;   /* antes 75px */
    margin-top: -24px;
  }
}