:root{
  --header-bg: #e9e3d8; /* beige del header */
  --text: #0d0d0d;

  /* Ajusta estos valores en pt según Illustrator */
  --fs-desktop-links: 22px;
  --fs-mobile-links: 40px;
  --fs-mobile-phones: 34px;
  --fs-mobile-footer: 20px;

  --pad-x: 50px;
  --desk-h: 80px;
  --mob-h: 80px;

  --ease: cubic-bezier(.18,.71,.11,1);
}

.site-header{
  position: relative;
  z-index: 3;
}

/* Reset básico */
.site-header ul{ list-style: none; margin:0; padding:0; }
.site-header a{ color: var(--text); text-decoration: none; }
.site-header img{ display:block; }

/* ---------------- Desktop ---------------- */
.menu--desktop{
  height: var(--desk-h);
  width: 100vw;
  background: var(--header-bg);
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}

.menu--desktop .menu__home{
  height: 50px;
  display:flex;
  align-items:center;
}

.menu--desktop .menu__logo{
  height: 40px;
  width: auto;
}

.menu--desktop .menu__nav{
  flex: 1;
  display: flex;
  justify-content: center;
}

.menu--desktop .menu__links{
  display:flex;
  gap: 50px;
  align-items:center;
  font-size: var(--fs-desktop-links);
  font-family: "Garbata Regular", serif;
  letter-spacing: 0.2px;
}

.menu--desktop .menu__social{
  display:flex;
  gap: 18px;
  align-items:center;
}

.menu--desktop .menu__social a{
  height: 50px;
  width: 50px;
  display:grid;
  place-items:center;
}

.menu--desktop .menu__social img{
  height: 40px;
  width: 40px;
}

/* ---------------- Mobile top bar ---------------- */
.menu--mobileTop{
  height: var(--mob-h);
  width: 100vw;
  background: var(--header-bg);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5; /* por encima del overlay */
}

.menu--mobileTop .menu__home{
  height: 60px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 1;
}

.menu--mobileTop .menu__logo{
  height: 60px;
  width: auto;
}

.menu--mobileTop .menu__social{
  display:flex;
  gap: 15px;
  align-items:center;
}

.menu--mobileTop .menu__social a{
  height: 40px;
  width: 40px;
  display:grid;
  place-items:center;
}

.menu--mobileTop .menu__social img{
  height: 40px;
  width: 40px;
}

/* Botón hamburguesa / X */
.menu__toggle{
  width: 40px;
  height: 50px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  cursor: pointer;
}

.menu__toggle span{
  width: 40px;
  height: 3px;
  background: var(--text);
  display:block;
  transform-origin: center;
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}

/* ---------------- Mobile overlay ---------------- */
.menuOverlay{
  position: fixed;
  inset: 0;
  background: var(--header-bg);
  transform: translateX(-100%);
  transition: transform .8s var(--ease);
  pointer-events: none;
  z-index: 4; /* debajo de .menu--mobileTop (5) */
}

.menuOverlay__inner{
  position: absolute;
  inset: var(--mob-h) 0 0 0; /* deja la barra de arriba visible */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 50px;
  box-sizing: border-box;
}

.menuOverlay__nav{
  padding: 0;
}

.menuOverlay__links{
  margin-left: 0;   /* evita dobles offsets */
  margin-top: 40px;
  font-family: "Garbata Regular", serif;
  font-size: var(--fs-mobile-links);
  line-height: 1.03;
}

.menuOverlay__links > li{
  margin-bottom: 10px;
}

.menuOverlay__links a{
  display: inline-block;
}

.menuOverlay__contactTitle{
  margin-top: 10px;
}

.menuOverlay__phones{
  margin-top: -10px;
}

.phones{
  margin-top: 30px;
  font-family: "Arimo", sans-serif;
  font-size: var(--fs-mobile-phones);
  line-height: 1.15;
}

.phones li{
  margin-bottom: 40px;
}

.menuOverlay__socialRow{
  margin-top: 10px;
}

.menuOverlay__social{
  display:flex;
  gap: 24px;
  align-items:center;
  margin-top: 10px;
}

.menuOverlay__social a{
  height: 80px;
  width: 80px;
  display:grid;
  place-items:center;
}

.menuOverlay__social img{
  height: 80px;
  width: 80px;
}

.menuOverlay__footer{
  padding: 40px 0 60px var(--pad-x);
  font-family: "Arimo", sans-serif;
  font-size: var(--fs-mobile-footer);
  line-height: 1.15;
}

/* Estado abierto */
body.is-menuOpen .menuOverlay{
  transform: translateX(0);
  pointer-events: auto;
}

body.is-menuOpen .menu--mobileTop{
  z-index: 5;
}

/* Cambia hamburguesa a X */
body.is-menuOpen .menu__toggle span:nth-child(1){
  transform: translateY(13px) rotate(45deg);
}
body.is-menuOpen .menu__toggle span:nth-child(2){
  opacity: 0;
}
body.is-menuOpen .menu__toggle span:nth-child(3){
  transform: translateY(-13px) rotate(-45deg);
}

/* Evita scroll del body cuando está abierto */
body.is-menuOpen{
  overflow: hidden;
}

/* ---------------- Responsive switch ---------------- */
@media (max-width: 980px){
  .menu--desktop{ display:none; }
  .menu--mobileTop{ display:flex; }
}

/* Opcional: hover sutil */
@media (hover:hover){
  .menu__links a:hover,
  .menuOverlay__links a:hover{
    opacity: .75;
  }
}