/* ==========================================================
   MENÚ SUPERIOR — Clínica Dental Guayero
   Cabecera fija (position:fixed) de altura constante.
   Al hacer scroll no cambia de tamaño ni de posición: solo
   aparece una sombra suave (opacidad de un pseudo-elemento),
   para que el desplazamiento sea siempre fluido.
   ========================================================== */

:root{
  --gh-h:76px;
  --gh-ivory:#faf7f2;
  --gh-ink:#1f1a16;
  --gh-text:#3b332d;
  --gh-muted:#6d645b;
  --gh-line:#e6ddd0;
  --gh-gold:#b8975a;
  --gh-gold-soft:#d7ba68;
  --gh-espresso:#221a15;
  --gh-teal:#0a6f71;
  --gh-font:"Manrope","Helvetica Neue",Arial,sans-serif;
}

html{scroll-padding-top:calc(var(--gh-h) + 12px)}
body{padding-top:var(--gh-h)}

.gh-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:var(--gh-h);
  background:var(--gh-ivory);
  border-bottom:1px solid var(--gh-line);
  font-family:var(--gh-font);
}
/* Sombra al hacer scroll: solo cambia la opacidad, sin recalcular la página. */
.gh-header::after{
  content:"";
  position:absolute;left:0;right:0;top:100%;
  height:18px;
  background:linear-gradient(rgba(34,26,21,.08),rgba(34,26,21,0));
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.gh-header.is-scrolled::after{opacity:1}

.gh-bar{
  width:min(1320px,calc(100% - 48px));
  height:100%;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:28px;
}

/* Logo (el PNG tiene fondo blanco: multiply lo funde con el marfil) */
.gh-brand{flex:0 0 auto;display:block;line-height:0}
.gh-brand img{width:205px;height:auto;mix-blend-mode:multiply}
.gh-brand:focus-visible{outline:2px solid var(--gh-gold);outline-offset:6px}

/* Navegación */
.gh-nav{flex:1 1 auto;height:100%;display:flex;justify-content:center}
.gh-menu{list-style:none;margin:0;padding:0;height:100%;display:flex;align-items:stretch;gap:30px}
.gh-menu > li{position:relative;display:flex;align-items:center}

.gh-link{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  height:100%;
  padding:0;
  border:0;background:none;cursor:pointer;
  font:500 14px/1 var(--gh-font);
  letter-spacing:.01em;
  color:var(--gh-text);
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s ease;
}
.gh-link::after{
  content:"";
  position:absolute;left:0;right:0;bottom:22px;
  height:1px;
  background:var(--gh-gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.7,.2,1);
}
.gh-link:hover,.gh-link.active{color:var(--gh-ink)}
.gh-link:hover::after,.gh-link.active::after{transform:scaleX(1)}
.gh-link:focus-visible{outline:2px solid var(--gh-gold);outline-offset:4px}
.gh-link i{font-size:9px;color:var(--gh-gold);transition:transform .3s ease}

/* Submenú de tratamientos */
.gh-sub{
  position:absolute;
  top:100%;left:50%;
  width:540px;
  padding:26px 28px 22px;
  background:var(--gh-ivory);
  border:1px solid var(--gh-line);
  border-top:1px solid var(--gh-gold);
  box-shadow:0 30px 60px -20px rgba(34,26,21,.28);
  opacity:0;visibility:hidden;
  transform:translate(-50%,8px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.22,.7,.2,1),visibility 0s linear .3s;
}
.gh-sub__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
.gh-sub__grid a{
  display:block;
  padding:10px 0;
  border-bottom:1px solid rgba(230,221,208,.7);
  font:500 14px/1.35 var(--gh-font);
  color:var(--gh-text);
  text-decoration:none;
  transition:color .2s ease,padding .3s ease;
}
.gh-sub__grid a:hover,.gh-sub__grid a:focus-visible,.gh-sub__grid a.active{color:var(--gh-teal);padding-left:6px;outline:none}
.gh-sub__all{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:18px;
  font:600 12px/1 var(--gh-font);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gh-gold);text-decoration:none;
}
.gh-sub__all:hover{color:var(--gh-teal)}

.gh-has-sub.is-open .gh-sub{
  opacity:1;visibility:visible;
  transform:translate(-50%,0);
  transition:opacity .25s ease,transform .3s cubic-bezier(.22,.7,.2,1),visibility 0s;
}
.gh-has-sub.is-open .gh-sub-toggle i{transform:rotate(180deg)}

@media (hover:hover) and (min-width:1181px){
  .gh-has-sub:hover .gh-sub,
  .gh-has-sub:focus-within .gh-sub{
    opacity:1;visibility:visible;
    transform:translate(-50%,0);
    transition:opacity .25s ease,transform .3s cubic-bezier(.22,.7,.2,1),visibility 0s;
  }
  .gh-has-sub:hover .gh-sub-toggle i{transform:rotate(180deg)}
}

.gh-nav__extra{display:none}

/* Acciones de la derecha */
.gh-actions{flex:0 0 auto;display:flex;align-items:center;gap:18px}

.gh-phone{
  display:inline-flex;align-items:center;gap:8px;
  font:600 14px/1 var(--gh-font);
  color:var(--gh-teal);
  text-decoration:none;
  white-space:nowrap;
}
.gh-phone i{font-size:12px;color:var(--gh-gold)}
.gh-phone:hover span{text-decoration:underline;text-underline-offset:4px}

.gh-lang{position:relative;display:flex;align-items:center}
.gh-lang__flag{
  position:absolute;left:12px;top:50%;
  width:20px;height:14px;
  object-fit:cover;border-radius:2px;
  transform:translateY(-50%);
  pointer-events:none;z-index:1;
}
.gh-lang__select{
  height:38px;
  padding:0 30px 0 40px;
  border:1px solid var(--gh-line);
  border-radius:999px;
  background:transparent;
  font:500 13px var(--gh-font);
  color:var(--gh-ink);
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
  transition:border-color .25s ease;
}
.gh-lang__select option{color:#222;background:#fff}
.gh-lang__select:hover,.gh-lang__select:focus-visible{border-color:var(--gh-gold);outline:none}
.gh-lang__chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:9px;color:var(--gh-gold);pointer-events:none}

.gh-cta,.gh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 24px;
  border-radius:999px;
  font:600 13.5px/1 var(--gh-font);
  letter-spacing:.03em;
  text-decoration:none;white-space:nowrap;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.gh-cta,.gh-btn--solid{background:var(--gh-espresso);color:#fff}
.gh-cta:hover,.gh-btn--solid:hover{background:var(--gh-teal)}
.gh-btn--line{border:1px solid var(--gh-line);color:var(--gh-ink)}
.gh-btn--line i{color:var(--gh-gold)}
.gh-cta:focus-visible,.gh-btn:focus-visible{outline:2px solid var(--gh-gold);outline-offset:3px}

/* Botón de menú (móvil) */
.gh-burger{
  display:none;
  position:relative;
  width:44px;height:44px;
  padding:0;border:0;border-radius:50%;
  background:transparent;cursor:pointer;
}
.gh-burger span{
  position:absolute;left:12px;right:12px;height:1.5px;
  background:var(--gh-ink);border-radius:2px;
  transition:transform .35s cubic-bezier(.22,.7,.2,1);
}
.gh-burger span:first-child{transform:translateY(-4px)}
.gh-burger span:last-child{transform:translateY(4px)}
.gh-burger:focus-visible{outline:2px solid var(--gh-gold);outline-offset:2px}
.gh-open .gh-burger span:first-child{transform:rotate(45deg)}
.gh-open .gh-burger span:last-child{transform:rotate(-45deg)}

/* Barra de Google Traductor: justo debajo del menú fijo */
.classic-google-translate-bar{top:var(--gh-h)!important}

/* ---------- Pantallas medianas ---------- */
@media (max-width:1320px){
  .gh-menu{gap:24px}
  .gh-phone span{display:none}
  .gh-phone{width:38px;height:38px;justify-content:center;border:1px solid var(--gh-line);border-radius:50%}
}

/* ---------- Tablet y móvil: menú desplegable a pantalla completa ---------- */
@media (max-width:1180px){
  :root{--gh-h:68px}
  .gh-bar{width:calc(100% - 32px);gap:12px}
  .gh-brand{margin-right:auto}
  .gh-brand img{width:180px}
  .gh-burger{display:block}

  .gh-nav{
    position:fixed;
    top:var(--gh-h);left:0;right:0;bottom:0;
    height:auto;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:12px 24px calc(28px + env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--gh-ivory);
    opacity:0;visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .3s ease,transform .35s cubic-bezier(.22,.7,.2,1),visibility 0s linear .35s;
  }
  .gh-open .gh-nav{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .3s ease,transform .35s cubic-bezier(.22,.7,.2,1),visibility 0s;
  }
  .gh-open,.gh-open body{overflow:hidden}

  .gh-menu{flex-direction:column;height:auto;gap:0}
  .gh-menu > li{display:block;border-bottom:1px solid var(--gh-line)}
  .gh-link{
    width:100%;height:auto;
    justify-content:space-between;
    padding:18px 0;
    font:500 22px/1.2 "Cormorant Garamond",Georgia,serif;
    color:var(--gh-ink);
  }
  .gh-link::after{display:none}
  .gh-link.active{color:var(--gh-teal)}
  .gh-link i{font-size:11px}

  .gh-sub{
    position:static;
    width:auto;
    padding:0 0 16px;
    border:0;box-shadow:none;background:none;
    opacity:1;visibility:visible;transform:none;
    display:none;
  }
  .gh-has-sub.is-open .gh-sub{display:block;transform:none}
  .gh-sub__grid{grid-template-columns:1fr 1fr;gap:0 18px}
  .gh-sub__grid a{font-size:14px;padding:9px 0}

  .gh-nav__extra{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  .gh-nav__extra .gh-btn{flex:1 1 180px;height:52px}
}

@media (max-width:600px){
  .gh-cta{display:none}
  .gh-brand img{width:160px}
  .gh-actions{gap:8px}
  .gh-phone{display:none}
  .gh-lang__select{width:62px;padding:0 0 0 36px;color:transparent}
  .gh-lang__chev{display:none}
  .gh-sub__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .gh-header *,.gh-header::after{transition:none!important}
}

/* Evita que el estilo general de los select mueva el selector de idioma */
.gh-lang__select,.gh-lang__select:focus{transform:none}