/* ===== Header layout ===== */
.site-header .header-grid{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
  }
  
  /* Empuja menú + CTA hacia la derecha */
  .primary-nav{ margin-left: auto; }
  
  /* Menú horizontal en desktop */
  .primary-nav .menu{
    display: flex;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0; padding: 0;
  }
  
  /* CTA estilo base (ajusta a tu sistema de botones) */
  .header-cta{ margin-left: .5rem; }
  
  /* ===== Hamburguesa (oculta en desktop) ===== */
  .header-toggle{
    display: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: .5rem;
    cursor: pointer;
    line-height: 0;
  }
  .header-toggle .bar{
    display: block;
    width: 22px; height: 2px;
    margin: 5px 0;
    background: currentColor;
    transition: transform .25s ease, opacity .25s ease;
  }
  
  /* ===== Responsive ===== */
  @media (max-width: 992px){
    /* Mostrar hamburguesa y ocultar menú por defecto */
    .header-toggle{ display: inline-block; margin-left: auto; }
    .primary-nav{ 
      display: none;           /* oculto por defecto en móvil */
      position: absolute;
      top: 100%; right: 1rem;  /* desplegable desde el header */
      left: 1rem;
      background: #fff;        /* ajusta a tu palette */
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
      padding: .75rem;
      z-index: 1000;
    }
    .primary-nav .menu{
      flex-direction: column;
      align-items: stretch;
      gap: .25rem;
    }
    .primary-nav .menu > li > a{
      display: block;
      padding: .625rem .75rem;
    }
  
    /* CTA baja debajo o puedes mantenerla dentro del menú si prefieres */
    .header-cta{ display: none; } /* opción: ocúltala y crea un item de menú "Reserva tu cita" */
  
    /* Header contenedor relativo para posicionar el dropdown */
    .site-header .header-grid{ position: relative; }
  }
  
  /* Estado abierto (clase que añade JS) */
  .site-header.is-open .primary-nav{ display: block; }
  
  /* Animación hamburguesa a "X" cuando abierto */
  .site-header.is-open .header-toggle .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .header-toggle .bar:nth-child(2){ opacity: 0; }
  .site-header.is-open .header-toggle .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  

  /* ===== Header layout base ===== */
.site-header .header-grid{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
  }
  .primary-nav{ margin-left: auto; }
  .primary-nav .menu{
    display: flex;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0; padding: 0;
  }
  .header-cta{ margin-left: .5rem; }
  
  /* Hamburguesa base (oculta en desktop) */
  .header-toggle{
    display: none;
    appearance: none; border: 0; background: transparent;
    padding: .5rem; cursor: pointer; line-height: 0;
  }
  .header-toggle .bar{
    display: block; width: 22px; height: 2px; margin: 5px 0;
    background: currentColor; transition: transform .25s, opacity .25s;
  }
  
  /* ===== Responsive ===== */
  @media (max-width: 992px){
    /* Mostrar hamburguesa y ocultar CTA de cabecera en móvil */
    .header-toggle{ display: inline-block; margin-left: auto; }
    .header-cta{ display: none; }
  
    /* Dropdown del menú móvil */
    .site-header .header-grid{ position: relative; }
    .primary-nav{
      display: none;                  /* escondido por defecto */
      position: absolute;
      top: 100%; left: 1rem; right: 1rem;
      background: var(--color-bg-strong);  /* 👈 tu variable */
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
      padding: .75rem;
      z-index: 1000;
    }
    .primary-nav .menu{
      flex-direction: column;
      align-items: stretch;
      gap: .25rem;
    }
    .primary-nav .menu > li > a{
      display: block;
      padding: .625rem .75rem;
    }
  
    /* CTA dentro del menú móvil */
    .primary-nav .menu-cta{
      display: block;
      margin-top: .5rem;
      text-align: center;
      width: 100%;
    }
  }
  
  /* Estado abierto */
  .site-header.is-open .primary-nav{ display: block; }
  
  /* Animación hamburguesa a "X" cuando abierto */
  .site-header.is-open .header-toggle .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .header-toggle .bar:nth-child(2){ opacity: 0; }
  .site-header.is-open .header-toggle .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  

  /* Desktop: muestra SOLO la CTA de la cabecera */
.menu-cta{ display: none; }         /* oculta la CTA interna del menú en desktop */
.header-cta{ display: inline-flex; }

/* Móvil: oculta la de cabecera y muestra la del menú desplegable */
@media (max-width: 992px){
  .header-cta{ display: none; }
  .menu-cta{ display: block; width: 100%; text-align: center; margin-top: .5rem; }
}

/* Desktop: menú + CTA en la misma línea */
@media (min-width: 992px){
    /* El nav y su UL en línea */
    .site-header .primary-nav{
      display: inline-flex !important;
      align-items: center;
      gap: 1rem;                 /* espacio entre UL y el CTA */
    }
    .site-header .primary-nav .menu{
      display: inline-flex;
      align-items: center;
      gap: .5rem;                /* espacio entre items */
      margin: 0; padding: 0; list-style: none;
    }
  
    /* CTA del menú, en línea a la derecha */
    .site-header .primary-nav .menu-cta{
      display: inline-flex !important;
      margin-left: 1rem;
    }
  
    /* Ocultamos el CTA de la derecha para evitar el duplicado */
    .site-header .header-cta{ display: none !important; }
  }
  
  /* Móvil: se mantiene tu panel hamburguesa tal cual */
  @media (max-width: 991.98px){
    .site-header .primary-nav .menu-cta{
      display: inline-flex;      /* ya lo usas dentro del panel */
      width: 100%;
      justify-content: center;
    }
  }
  

 
  /* El <li> padre necesita contexto para posicionar el submenú */
  .primary-nav .menu > li { position: relative; }

  /* Submenú oculto por defecto */
  .primary-nav .menu .sub-menu{
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: .5rem;
    min-width: 240px;
    z-index: var(--z-dropdown);
  }

  /* Mostrar en hover (desktop con puntero) */
  @media (hover:hover){
    .primary-nav .menu > li.menu-item-has-children:hover > .sub-menu{
      display:block;
    }
  }

  /* Mostrar cuando el padre tiene la clase que añade el JS (móvil/teclado) */
  .primary-nav .menu li.is-open > .sub-menu{
    display:block;
  }

  /* Estética de los items del submenú */
  .primary-nav .menu .sub-menu > li > a{
    display:block;
    padding:.625rem .75rem;
    text-decoration:none;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  .primary-nav .menu .sub-menu > li > a:hover{
    background: rgba(0,0,0,.05);
  }
  

/* Submenús cerrados por defecto en móvil */
@media (max-width: 992px){
  .primary-nav .menu > li.menu-item-has-children > a{
    position: relative;
  }
  .primary-nav .menu > li.menu-item-has-children > a::after{
    content: '▾'; /* caret */
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    font-size: 0.9em;
  }

  .primary-nav .menu li .sub-menu{
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-med, 220ms) var(--ease-standard, ease);
    will-change: max-height;
  }

  /* estado abierto */
  .primary-nav .menu li.is-open > .sub-menu{
    max-height: 70vh; /* suficiente para cualquier lista */
  }

  /* quita efectos hover en móvil */
  .primary-nav .menu > li:hover > .sub-menu{ max-height: 0; }
}


/* === Mobile dropdown fixes === */
@media (max-width: 992px){
  /* Els <li> pares ocupen tota l'amplada */
  .primary-nav .menu > li { position: static; }

  /* Submenú: que deixi de ser absolut i de display:none al mòbil */
  .primary-nav .menu .sub-menu{
    display: block;          /* override del display:none d’escriptori */
    position: static;        /* que flueixi sota l’element pare */
    background: transparent; /* usem el fons del panell */
    border-radius: 0;
    box-shadow: none;
    padding: 0;              /* el padding el posem als <a> */
    max-height: 0;           /* tancat per defecte */
    overflow: hidden;
    transition: max-height var(--dur-med,220ms) var(--ease-standard,ease);
  }

  /* Obert: màxim alçada suficient (transició suau) */
  .primary-nav .menu li.is-open > .sub-menu{
    max-height: 70vh;
  }

  /* Indicador caret al nivell 1 amb fills */
  .primary-nav .menu > li.menu-item-has-children > a{
    position: relative;
    padding-right: 2rem;
  }
  .primary-nav .menu > li.menu-item-has-children > a::after{
    content: '▾';
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    font-size: .95em;
  }
}

/* === MOBILE: tot alineat a l'esquerra + submenú en blanc === */
@media (max-width: 992px){
  /* Panell i links en blanc per contrast amb bg fosc */
  .primary-nav{
    text-align: left;
    color: #fff;
  }
  .primary-nav a{ 
    color: #fff; 
  }

  /* Nivell 1: ocupa tota l’amplada i left-aligned */
  .primary-nav .menu{
    align-items: stretch;   /* cada <li> fa 100% */
  }
  .primary-nav .menu > li > a{
    display: block;
    padding: .75rem .75rem;
    text-align: left;
  }

  /* Caret del pare: que sigui blanc també */
  .primary-nav .menu > li.menu-item-has-children > a::after{
    color: currentColor; /* hereta el blanc */
    content: '▾';
  }

  /* Submenú: text blanc i sense cap fons extra */
  .primary-nav .menu .sub-menu{
    background: transparent;
    padding-left: .25rem;
  }
  .primary-nav .menu .sub-menu > li > a{
    color: #fff;
    padding: .625rem .75rem;
  }

  /* Hover/Focus: lleu highlight en clar sobre fons fosc */
  .primary-nav .menu > li > a:hover,
  .primary-nav .menu > li > a:focus,
  .primary-nav .menu .sub-menu > li > a:hover,
  .primary-nav .menu .sub-menu > li > a:focus{
    background: rgba(255,255,255,.12);
    outline: 2px solid transparent; /* evita outline lila del navegador */
  }

  /* Opcional: una línia suau entre grups del nivell 1 */
  .primary-nav .menu > li + li{
    border-top: 1px solid rgba(255,255,255,.12);
  }
}
/* === MOBILE: enganxat del tot a l'esquerra i text en blanc === */
@media (max-width: 992px){
  /* treu el coixí del contenidor del header */
  .site-header .header-grid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* panell a tot l’ample del header */
  .site-header .primary-nav{
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    color: #fff;
  }
  .site-header .primary-nav a{ color:#fff; }

  /* reset total del <ul class="menu"> i dels <li> */
  .site-header .primary-nav .menu{
    margin: 0 !important;
    padding: 0 !important;   /* anul·la padding-left del navegador */
    gap: 0 !important;
    align-items: stretch;
    list-style: none;
  }
  .site-header .primary-nav .menu > li{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* enllaços nivell 1: ple ample, alineats a l'esquerra */
  .site-header .primary-nav .menu > li > a{
    display:block;
    padding: 14px 16px;
    text-align: left;
  }

  /* submenú sense sagnat ni fons extra, també en blanc */
  .site-header .primary-nav .menu .sub-menu{
    position: static;
    padding: 0 !important;
    background: transparent !important;
  }
  .site-header .primary-nav .menu .sub-menu > li > a{
    padding: 12px 16px;
    color:#fff;
  }

  /* caret en blanc, sense moure el text */
  .site-header .primary-nav .menu > li.menu-item-has-children > a{
    position: relative; padding-right: 36px;
  }
  .site-header .primary-nav .menu > li.menu-item-has-children > a::after{
    content: '▾'; color: currentColor;
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  }

  /* separador a tot l’ample (opcional) */
  .site-header .primary-nav .menu > li + li{
    border-top: 1px solid rgba(255,255,255,.12);
  }
}
/* === MOBILE: indent submenú + marge del botó === */
@media (max-width: 992px){
  /* Nivell 1 (ja el tens amb 14px 16px) */
  .site-header .primary-nav .menu > li > a{
    padding: 14px 16px;
  }

  /* Submenú: +10px d’indent respecte al nivell 1 */
  .site-header .primary-nav .menu .sub-menu > li > a{
    /* nivell1 16px + 10px extra */
    padding: 12px 26px;
  }

  /* Botó del panell mòbil: que no toqui els marges */
  .site-header .primary-nav .menu-cta{
    display: block;
    width: auto;                 /* evita 100% a sang */
    margin: 12px 16px 16px;      /* separació lateral i inferior */
    padding: 14px 18px;
    border-radius: 999px;        /* manté la pastilla */
  }
}

/* === MOBILE: el panell ocupa la pantalla i és desplaçable === */
@media (max-width: 992px){
  .site-header .primary-nav{
    position: fixed;                 /* separat del flux del body */
    top: var(--header-h, 64px);      /* altura del header (JS la calcula) */
    left: 0; right: 0;
    height: calc(100dvh - var(--header-h, 64px));
    overflow: auto;                  /* 👈 scroll intern del panell */
    -webkit-overflow-scrolling: touch;
    padding: 0;                      /* ja el posem als <a> i al botó */
    z-index: 1000;
  }

  /* Quan el menú està obert, bloqueja el scroll del body */
  body.menu-open{
    overflow: hidden;
  }
}


@media (max-width: 992px){
  /* amagat per defecte */
  .site-header .primary-nav{ display: none; }

  /* quan el header té .is-open → mostra el panell sí o sí */
  .site-header.is-open .primary-nav{
    display: block !important;
    z-index: 1000;              /* per sobre del slider/fons */
  }
}

@media (max-width: 992px){
  .site-header .primary-nav{ pointer-events: none; }           /* tancat → no intercepta clics */
  .site-header.is-open .primary-nav{ pointer-events: auto; }   /* obert → interactuable */
}


/* === MOBILE: header fix quan el menú és obert === */
@media (max-width: 992px){
  /* bloqueja scroll de fons (ja ho tenies, el deixo aquí) */
  body.menu-open{ overflow: hidden; }

  /* fixa el header a dalt mentre el panell està obert */
  body.menu-open .site-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1100;
    background: var(--color-bg-strong); /* assegura fons opac */
    /* opcional: una mica d’ombra */
    /* box-shadow: 0 6px 18px rgba(0,0,0,.12); */
  }

  /* el panell del menú, sota el header fix, amb scroll propi */
  .site-header .primary-nav{
    position: fixed;
    top: var(--header-h, 64px);
    left: 0; right: 0;
    height: calc(100dvh - var(--header-h, 64px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* tancat → amagat; obert → visible i clicable */
  .site-header .primary-nav{ display: none; pointer-events: none; }
  .site-header.is-open .primary-nav{ display: block !important; pointer-events: auto; }
}


/* === Toggle menú móvil (hamburger / close) en BLANCO === */
.nav-toggle,
.nav-toggle:link,
.nav-toggle:visited,
.nav-toggle:hover,
.nav-toggle:active,
.nav-toggle:focus {
  color: #fff !important;               /* para icon fonts o SVG con currentColor */
  outline: none;
  -webkit-tap-highlight-color: transparent; /* iOS: quita flash azul */
}

/* Si usas <button> o <a> con <svg> dentro */
.nav-toggle svg {
  display: block;
  width: 28px;
  height: 28px;
}

/* Asegura que el SVG use el color blanco del botón */
.nav-toggle svg [stroke] { stroke: currentColor !important; }
.nav-toggle svg [fill]:not([fill="none"]) { fill: currentColor !important; }

/* Opcional: al abrir (si cambias a “X” con la misma pieza) */
.nav-toggle.is-open,
.nav-toggle[aria-expanded="true"] {
  color: #fff !important; /* sigue en blanco con el estado abierto */
}

/* (Por si tu CSS base pinta enlaces del header en azul en móvil) */
@media (max-width: 768px) {
  .site-header a,
  .site-header button {
    color: inherit;
  }
}