/* LOGO */
.site-logo img{
  display:block;
  height:42px;
}

/* TOP MENU BOX */
.header-top-box{
  display:inline-flex;
  align-items:center;
  padding:6px 18px;
  border-radius:24px;
  border:1px solid #e5e5e5;
}

/* Menú superior */
.top-menu{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
}
.top-menu .menu-item a{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:#333;
}
.top-menu .menu-item a:hover{
  color: var(--verde-100);
}

/* Iconos topbar */
.icon-top{
  width:16px;
  height:16px;
  display:block;
  color:inherit;
}

/* Selector idioma */
.lang-box{
  display:flex;
  align-items:center;
  gap:12px;
  border:2px solid #d9d9d9;
  border-radius:30px;
  padding:4px 4px;
}
.lang-box .lang{
  font-size:10px;
      padding: 4px;
  color:#777;
  font-weight:600;
  line-height:1;
  transition: .2s ease;
}
.lang-box .lang.active{
  background-color: var(--azul-100);
  color:#fff;
      padding: 10px;
    border-radius: 50px;
}

/* NAV PRINCIPAL */
.main-navigation .main-menu{
  list-style:none;
  display:flex;
  gap:28px;
  margin:0;
  padding:0;
}
.main-navigation .menu-item a{
  font-size:15px;
  color:#222;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  font-weight:500;
}
.main-navigation .menu-item.current-menu-item a,
.main-navigation .menu-item a:hover{
  color: var(--verde-100);
  border-bottom-color: var(--verde-100);
}

/* Tipografía del menú principal = Body 2 Bold */
.main-navigation .main-menu > li > a{
  font-family: var(--font-poppins);
  font-size: 14px;      /* Body 2 */
  line-height: 20px;    /* Body 2 */
  font-weight: 700;     /* Bold */
  letter-spacing: 0;
}


/* Botón SÚMATE */
.btn-sumate{
   
  background-color: var(--verde-100);
  color:#fff;
   padding:12px 40px;
  border-radius:50px; 
}
.btn-sumate:hover{ opacity:.9; }

/* HEADER TRANSPARENTE HOME */
/* .site-header--transparent{
  position:absolute; top:0; left:0; width:100%;
  background:transparent !important; z-index:100;
}
.site-header--transparent .header-top,
.site-header--transparent .header-main{
  background:transparent; border-bottom:none; position:relative;
}
.site-header--transparent .icon-top{
  filter: brightness(0) invert(1);
}
.site-header--transparent .top-menu .menu-item a,
.site-header--transparent .main-navigation .menu-item a{
  color:#fff;
}
.site-header--transparent .main-navigation .menu-item.current-menu-item a,
.site-header--transparent .main-navigation .menu-item a:hover{
  color:#fff; border-bottom-color:#fff;
}
.site-header--transparent .header-top-box{
  border-radius:0 0 8px 8px;
  padding:6px 18px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  border:1px solid #fff !important;
}
.site-header--transparent .lang-box{
  border-color:#fff;
}
.site-header--transparent .lang-box .lang{ color:#fff; }
.site-header--transparent .lang-box .lang.active{
  background:#fff; color:#333;
} */

/* HEADER TRANSPARENTE HOME: SOLO ANTES DEL SCROLL */
.site-header.site-header--transparent:not(.is-scrolled){
  position:absolute;
  top:0;
  left:0;
  width:100%;
  background:transparent;
  z-index:100;
}

.site-header.site-header--transparent:not(.is-scrolled) .header-top,
.site-header.site-header--transparent:not(.is-scrolled) .header-main{
  background:transparent;
  border-bottom:none;
  position:relative;
}

.site-header.site-header--transparent:not(.is-scrolled) .icon-top{
  filter: brightness(0) invert(1);
}

.site-header.site-header--transparent:not(.is-scrolled) .top-menu .menu-item a,
.site-header.site-header--transparent:not(.is-scrolled) .main-navigation .menu-item a{
  color:#fff;
}

.site-header.site-header--transparent:not(.is-scrolled) .main-navigation .menu-item.current-menu-item a,
.site-header.site-header--transparent:not(.is-scrolled) .main-navigation .menu-item a:hover{
  color:#fff;
  border-bottom-color:#fff;
}

.site-header.site-header--transparent:not(.is-scrolled) .header-top-box{
  border-radius:0 0 8px 8px;
  padding:6px 18px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  border:1px solid #fff !important;
}

.site-header.site-header--transparent:not(.is-scrolled) .lang-box{
  border-color:#fff;
}
.site-header.site-header--transparent:not(.is-scrolled) .lang-box .lang{
  color:#fff;
}
.site-header.site-header--transparent:not(.is-scrolled) .lang-box .lang.active{
  background:#fff;
  color:#333;
}


/* ===========================
   TOP BAR / SEARCH
=========================== */
/* ===========================
   BUSCADOR TOPBAR (Figma underline)
=========================== */

.top-search-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:14px; /* separa de la caja de 3 items */
}

/* Botón lupa */
.search-trigger{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  width:26px;
  height:26px;
}

/* Form e input */
.top-search{
  display:none; /* cerrado por defecto */
}

.top-search.is-open{
  display:block;
}

.top-search-input{
  width:220px;
  background:transparent;
  border:0;
  outline:0;

  /* ✅ estilo Figma: solo línea abajo */
  border-bottom:1.5px solid rgba(0,0,0,0.6);
  padding:4px 2px;

  font-family:var(--font-poppins);
  font-size:14px; /* Body 2 */
  line-height:20px;
  font-weight:400;
  color:#222;
}

.top-search-input::placeholder{
  color:rgba(0,0,0,0.65);
}

/* focus */
.top-search-input:focus{
  border-bottom-color: var(--azul-100);
}


/* ===========================
   HOME TRANSPARENTE (blanco)
=========================== */
.site-header--transparent .top-search-input{
  color:#fff;
  border-bottom-color: rgba(255,255,255,0.95);
}

.site-header--transparent .top-search-input::placeholder{
  color:rgba(255,255,255,0.85);
}

.site-header--transparent .search-trigger .icon-top{
  filter: brightness(0) invert(1);
}


/* ===========================
   RESPONSIVE
=========================== */
@media (max-width:960px){
  .top-search-input{ width:160px; }
}
@media (max-width:768px){
  .top-search-input{ width:120px; font-size:13px; }
}


/* HEADER BASE – ocupa toda la parte superior */
.site-header{
  position: absolute;          /* sobre el hero al inicio */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background:#fff;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* “Tarjeta” que contiene top + main */
.header-bar{
  max-width: 1440px;
  margin: 0 auto 0;
  border-radius: 0 0 24px 24px;

  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  background: transparent;
 
  overflow: hidden;
  pointer-events: auto;
}

/* ESTADO STICKY: cuando se agrega .is-scrolled al header */
.site-header.is-scrolled{
  position: fixed;      /* se fija arriba de la ventana */
  top: 0;
  left: 0;
  background: transparent; /* el fondo lo da la tarjeta */
}

.site-header.is-scrolled .header-bar{
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}

/* Para que el contenido no quede escondido detrás del header
   cuando se fija: */
body.has-sticky-header{
  padding-top: 120px;   /* ajusta a la altura real del header */
}

/* Ajuste fino en móviles, si el header es más bajito */
@media (max-width: 768px){
  body.has-sticky-header{
    padding-top: 90px;
  }
}




/* Logo base */
.site-logo img{
  display:block;
  height:42px;
}

.logo-white{ display:none; }
.logo-color{ display:block; }

/* En home, mientras sea transparente y NO haya scroll → logo blanco */
.site-header.site-header--transparent:not(.is-scrolled) .logo-white{
  display:block;
}
.site-header.site-header--transparent:not(.is-scrolled) .logo-color{
  display:none;
}

/* Una vez que hay scroll, o en internas → logo a color (ya es el default) */
.site-header.is-scrolled .logo-color{
  display:block;
}
.site-header.is-scrolled .logo-white{
  display:none;
}
img.logo-white {
    display: none;
}

.site-header.is-scrolled .header-top-box {
  border: none !important;
  box-shadow: none !important; /* opcional, para eliminar sombra si existe */
}

/* ❌ Quitar borde cuando el header es sticky (home scrolleado + internas) */
.site-header.is-scrolled .header-top-box {
    border: none !important;
    box-shadow: none !important;
}

/* ❌ Quitar borde en internas (porque NO tienen transparente) */
.site-header:not(.site-header--transparent) .header-top-box {
    border: none !important;
    box-shadow: none !important;
}