/**
 * DR. EVERT HAIR INSTITUTE — Componentes
 * ============================================================================
 * Cabecera, pie y botón de WhatsApp. Todo consume variables de tokens.css.
 * ============================================================================
 */

/* ==========================================================================
   1. LOGO
   ========================================================================== */

.dr-logo-titulo {
  margin: 0;
  font-size: 0; /* Elimina el hueco fantasma que deja el SVG en línea. */
  line-height: 0;

  /*
   * flex-shrink: 0 es imprescindible.
   *
   * La cabecera es un contenedor flex y, por defecto, sus hijos se encogen para
   * que quepa todo. Con el menú de escritorio desplegado el navegador estrujaba
   * el logo hasta dejarlo diminuto, ignorando su altura. Aquí se le dice: el
   * logo no se toca, que se ajuste el menú.
   */
  flex: 0 0 auto;
}

/*
 * El color del logo se decide AQUÍ, en una sola línea, porque el SVG va
 * incrustado y usa currentColor.
 *
 * En la cabecera va en oro: es la referencia premium del §2 (Tom Ford, Aesop).
 * Contraste del oro sobre negro: 6,1:1, de sobra para una marca.
 * Para volver al blanco, cambiar --dr-acento por --dr-texto-fuerte.
 */
.dr-logo-enlace {
  display: inline-flex;
  align-items: center;
  color: var(--dr-acento);
  text-decoration: none;
  transition: color var(--dr-transicion);
}

.dr-logo-enlace:hover {
  color: var(--dr-texto-fuerte);
}

/* En el pie el logo va discreto: allí manda el contenido, no la marca. */
.dr-pie .dr-logo-enlace {
  color: var(--dr-texto);
}

.dr-pie .dr-logo-enlace:hover {
  color: var(--dr-acento);
}

.dr-logo {
  display: block;
}

.dr-logo svg {
  display: block;
  width: auto;
  height: 100%;
}

/*
 * Alturas por contexto. El horizontal mide 255,73 × 66,65 (proporción 3,84:1),
 * así que a 64 px de alto ocupa unos 246 px de ancho.
 *
 * En escritorio la cabecera es ancha y un logo pequeño se pierde: la marca es
 * el ancla visual de la página. En móvil se reduce porque compite por el sitio
 * con el botón del menú.
 */
.dr-cabecera .dr-logo--horizontal { height: 40px; }
.dr-pie .dr-logo--horizontal      { height: 44px; }

/* Sin menú a la vista (hamburguesa): el logo puede crecer, no compite con nada. */
@media (min-width: 600px) {
  .dr-cabecera .dr-logo--horizontal { height: 52px; }
}

/* Aparece el menú de escritorio y hay que repartir: el logo cede un poco. */
@media (min-width: 1100px) {
  .dr-cabecera .dr-logo--horizontal { height: 52px; }
}

/* Pantallas amplias: el logo recupera su tamaño de marca. */
@media (min-width: 1400px) {
  .dr-cabecera .dr-logo--horizontal { height: 64px; }
}

/* Respaldo si algún día falta el archivo SVG: se ve el nombre, no un hueco. */
.dr-logo--texto {
  font-family: var(--dr-fuente-display);
  font-size: 1.25rem;
  letter-spacing: var(--dr-tracking-display);
  text-transform: uppercase;
  line-height: 1.2;
}

/* ==========================================================================
   2. CABECERA
   ========================================================================== */

/*
 * El selector combina identificador y clase (#masthead.dr-cabecera) a propósito.
 *
 * Conservamos id="masthead" porque es la convención de WordPress y varios
 * plugins y enlaces de accesibilidad lo dan por hecho. Pero Kadence imprime
 * `#masthead{background:#ffffff}` en su CSS interno, y una regla con
 * identificador gana a una con clase pase lo que pase, incluso si la nuestra se
 * carga después. Al añadir la clase igualamos y superamos su peso.
 *
 * Si algún día se ve fondo blanco en la cabecera, el culpable es esa regla.
 */
#masthead.dr-cabecera {
  position: sticky;
  top: 0;
  z-index: var(--dr-z-sticky);
  background-color: var(--dr-negro);
  border-bottom: 1px solid var(--dr-borde);
  transition: box-shadow var(--dr-transicion), border-color var(--dr-transicion);
}

/* Al separarse del borde superior gana sombra: separa la cabecera del contenido
   que pasa por debajo sin necesidad de una línea dura. */
#masthead.dr-cabecera.is-desplazada {
  box-shadow: var(--dr-sombra-md);
  border-bottom-color: transparent;
}

/*
 * Con el menú móvil abierto, la cabecera sube por encima de él. Así el logo y
 * el botón de cerrar (la X) siguen visibles y pulsables: sin esto el menú se
 * tapa a sí mismo y no hay manera de volver a la página.
 */
.dr-menu-abierto #masthead.dr-cabecera {
  z-index: var(--dr-z-cabecera-abierta);
  box-shadow: none;
  border-bottom-color: var(--dr-borde);
}

.dr-cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dr-esp-sm);
  min-height: 72px;

  /*
   * La cabecera usa el ancho amplio (1440 px) y no el de contenido (1200 px):
   * tiene que alojar logo + 6 ítems de menú + CTA en una sola línea. El texto de
   * las páginas sigue con la medida estrecha, que es lo cómodo de leer.
   */
  max-width: var(--dr-ancho-ancho);
}

@media (min-width: 1100px) {
  .dr-cabecera__interior { min-height: 88px; }
}

@media (min-width: 1400px) {
  .dr-cabecera__interior {
    min-height: 100px; /* Deja aire alrededor del logo de 64 px. */
    gap: var(--dr-esp-md);
  }
}

.dr-cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--dr-esp-sm);
  margin-left: auto;
  flex: 0 0 auto; /* El CTA tampoco se encoge. */
}

/* El centinela que vigila el scroll no debe ocupar espacio ni verse. */
.dr-centinela {
  position: absolute;
  top: 0;
  height: 1px;
  width: 1px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2.1 Navegación de escritorio
   -------------------------------------------------------------------------- */

.dr-nav { display: none; }

@media (min-width: 1100px) {
  .dr-nav { display: block; }
}

.dr-nav__lista {
  display: flex;
  align-items: center;
  gap: var(--dr-esp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1400px) {
  .dr-nav__lista { gap: var(--dr-esp-md); }
}

.dr-nav__lista li { position: relative; }

.dr-nav__lista a {
  display: block;
  padding: var(--dr-esp-2xs) 0;
  font-size: var(--dr-texto-xs);
  font-weight: var(--dr-peso-medio);
  text-transform: uppercase;
  color: var(--dr-texto);
  text-decoration: none;
  white-space: nowrap;

  /*
   * Espaciado menor que el --dr-tracking-eyebrow de marca (0,22em). Con seis
   * ítems y uno tan largo como "PACIENTES INTERNACIONALES", el espaciado ancho
   * empujaba al logo hasta encogerlo. Recupera el aire de marca en pantallas
   * grandes, donde sí cabe.
   */
  letter-spacing: 0.1em;
}

@media (min-width: 1400px) {
  .dr-nav__lista a { letter-spacing: 0.16em; }
}

.dr-nav__lista a:hover,
.dr-nav__lista .current-menu-item > a {
  color: var(--dr-acento);
}

/* Subrayado en oro que crece de izquierda a derecha. Un solo gesto, discreto. */
.dr-nav__lista > li > a::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  margin-top: 3px;
  background-color: var(--dr-acento);
  transition: width var(--dr-transicion);
}

.dr-nav__lista > li > a:hover::after,
.dr-nav__lista > li.current-menu-item > a::after {
  width: 100%;
}

/* Submenú (Procedimientos) */
.dr-nav__lista .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  margin: 0;
  padding: var(--dr-esp-2xs) 0;
  list-style: none;
  background-color: var(--dr-negro-800);
  border: 1px solid var(--dr-borde);
  box-shadow: var(--dr-sombra-md);

  /* Oculto por defecto, pero accesible al teclado: visibility (y no display)
     permite animarlo y que los lectores de pantalla lo anuncien al enfocarlo. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dr-transicion), transform var(--dr-transicion), visibility var(--dr-transicion);
}

.dr-nav__lista li:hover > .sub-menu,
.dr-nav__lista li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dr-nav__lista .sub-menu a {
  padding: var(--dr-esp-2xs) var(--dr-esp-sm);
  letter-spacing: var(--dr-tracking-boton);
  text-transform: none;
  font-size: var(--dr-texto-sm);
  white-space: normal;
}

.dr-nav__lista .sub-menu a::after { display: none; }

.dr-nav__lista .sub-menu a:hover {
  background-color: var(--dr-negro-700);
}

/* --------------------------------------------------------------------------
   2.2 Selector de idioma
   -------------------------------------------------------------------------- */

.dr-idiomas {
  display: none;
  align-items: center;
  gap: var(--dr-esp-3xs);
  font-size: var(--dr-texto-xs);
  letter-spacing: var(--dr-tracking-boton);
}

@media (min-width: 700px) {
  .dr-idiomas { display: flex; }
}

.dr-idiomas__opcion {
  padding: var(--dr-esp-3xs) var(--dr-esp-2xs);
  color: var(--dr-texto-tenue);
  text-decoration: none;
  transition: color var(--dr-transicion);
}

.dr-idiomas__opcion:hover { color: var(--dr-texto); }

.dr-idiomas__opcion.is-actual {
  color: var(--dr-acento);
  font-weight: var(--dr-peso-semi);
}

/* Separador entre ES y EN, sin meter un elemento extra en el HTML. */
.dr-idiomas__opcion + .dr-idiomas__opcion { border-left: 1px solid var(--dr-borde); }

/* --------------------------------------------------------------------------
   2.3 CTA de la cabecera
   -------------------------------------------------------------------------- */

.dr-cabecera__cta {
  display: none;
  min-height: 44px;
  padding-inline: var(--dr-esp-sm);
}

@media (min-width: 700px) {
  .dr-cabecera__cta { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   2.4 Botón de menú (hamburguesa)
   -------------------------------------------------------------------------- */

.dr-menu-boton {
  display: grid;
  place-items: center;
  width: 44px;   /* 44x44 es el objetivo táctil mínimo cómodo en móvil. */
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--dr-borde);
  border-radius: var(--dr-radio-md);
  color: var(--dr-texto);
  cursor: pointer;
}

@media (min-width: 1100px) {
  .dr-menu-boton { display: none; }
}

/* Las tres barras se dibujan con una sola caja: la del medio es el elemento y
   las otras dos son sus pseudo-elementos. */
.dr-menu-boton__barras,
.dr-menu-boton__barras::before,
.dr-menu-boton__barras::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: currentColor;
  transition: transform var(--dr-transicion), opacity var(--dr-transicion);
}

.dr-menu-boton__barras { position: relative; }

.dr-menu-boton__barras::before,
.dr-menu-boton__barras::after {
  content: "";
  position: absolute;
  left: 0;
}

.dr-menu-boton__barras::before { top: -6px; }
.dr-menu-boton__barras::after  { top: 6px; }

/* Abierto: la barra central desaparece y las otras dos forman una X. */
.dr-menu-abierto .dr-menu-boton__barras { background-color: transparent; }
.dr-menu-abierto .dr-menu-boton__barras::before { transform: translateY(6px) rotate(45deg); }
.dr-menu-abierto .dr-menu-boton__barras::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   3. MENÚ MÓVIL
   ========================================================================== */

.dr-menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--dr-z-overlay);
  background-color: var(--dr-negro);
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--dr-transicion);
}

.dr-menu-abierto .dr-menu-movil { opacity: 1; }

/* Bloquea el scroll del fondo mientras el menú está abierto. */
.dr-menu-abierto { overflow: hidden; }

.dr-menu-movil__interior {
  display: flex;
  flex-direction: column;
  gap: var(--dr-esp-md);
  padding: calc(72px + var(--dr-esp-lg)) var(--dr-margen-lateral) var(--dr-esp-2xl);
}

.dr-menu-movil__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dr-menu-movil__lista a {
  display: block;
  padding: var(--dr-esp-xs) 0;
  font-family: var(--dr-fuente-display);
  font-size: var(--dr-texto-lg);
  color: var(--dr-texto);
  text-decoration: none;
  border-bottom: 1px solid var(--dr-borde);
}

.dr-menu-movil__lista a:hover { color: var(--dr-acento); }

/* Los ítems del submenú, indentados y más pequeños. */
.dr-menu-movil__lista .sub-menu {
  margin: 0 0 0 var(--dr-esp-sm);
  padding: 0;
  list-style: none;
}

.dr-menu-movil__lista .sub-menu a {
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-base);
  color: var(--dr-texto-tenue);
}

/* ==========================================================================
   4. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.dr-whatsapp {
  position: fixed;
  right: var(--dr-esp-sm);
  bottom: var(--dr-esp-sm);
  z-index: var(--dr-z-whatsapp);

  display: inline-flex;
  align-items: center;
  gap: var(--dr-esp-2xs);
  padding: var(--dr-esp-xs);
  min-height: 56px;
  min-width: 56px;
  justify-content: center;

  background-color: var(--dr-oro);
  color: var(--dr-negro);
  border-radius: var(--dr-radio-full);
  box-shadow: var(--dr-sombra-lg);
  text-decoration: none;
  transition: background-color var(--dr-transicion), transform var(--dr-transicion);
}

/*
 * Se usa el oro de la marca y no el verde corporativo de WhatsApp: el sitio es
 * sobrio y premium (CLAUDE.md §2), y un botón verde chillón rompería el tono.
 * El icono ya identifica el canal sin necesidad del color.
 */
.dr-whatsapp:hover {
  background-color: var(--dr-arena);
  color: var(--dr-negro);
  transform: translateY(-2px);
}

.dr-whatsapp__icono {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* En móvil solo el icono: el texto ocuparía media pantalla. */
.dr-whatsapp__texto {
  display: none;
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-boton);
  text-transform: uppercase;
  padding-right: var(--dr-esp-2xs);
}

@media (min-width: 700px) {
  .dr-whatsapp {
    right: var(--dr-esp-md);
    bottom: var(--dr-esp-md);
    padding-inline: var(--dr-esp-sm);
  }
  .dr-whatsapp__texto { display: inline; }
}

/* Mientras el menú móvil está abierto el botón estorba. */
.dr-menu-abierto .dr-whatsapp { display: none; }

/* ==========================================================================
   5. PIE DE PÁGINA
   ========================================================================== */

.dr-pie {
  background-color: var(--dr-negro);
  border-top: 1px solid var(--dr-borde);
  padding-block: var(--dr-esp-2xl) var(--dr-esp-lg);
  margin-top: var(--dr-esp-3xl);
}

.dr-pie__columnas {
  display: grid;
  gap: var(--dr-esp-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .dr-pie__columnas { grid-template-columns: 1.4fr 1fr 1fr; }
}

.dr-pie__lema {
  margin-top: var(--dr-esp-sm);
  max-width: 34ch;
  color: var(--dr-texto-tenue);
  font-size: var(--dr-texto-sm);
}

.dr-pie__titulo {
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-xs);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dr-acento);
  margin: 0 0 var(--dr-esp-sm);
}

.dr-pie__lista,
.dr-pie__enlaces {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--dr-esp-2xs);
}

.dr-pie__lista a,
.dr-pie__enlaces a {
  color: var(--dr-texto);
  text-decoration: none;
  font-size: var(--dr-texto-sm);
}

.dr-pie__lista a:hover,
.dr-pie__enlaces a:hover { color: var(--dr-acento); }

.dr-pie__direccion {
  font-style: normal;
  color: var(--dr-texto-tenue);
  font-size: var(--dr-texto-sm);
  margin-bottom: var(--dr-esp-sm);
}

.dr-pie__nota {
  color: var(--dr-texto-tenue);
  font-size: var(--dr-texto-xs);
}

.dr-pie__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dr-esp-sm);
  margin-top: var(--dr-esp-2xl);
  padding-top: var(--dr-esp-md);
  border-top: 1px solid var(--dr-borde);
}

.dr-pie__copy {
  margin: 0;
  font-size: var(--dr-texto-xs);
  color: var(--dr-texto-tenue);
}

.dr-pie__legal-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dr-esp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dr-pie__legal-lista a {
  font-size: var(--dr-texto-xs);
  color: var(--dr-texto-tenue);
  text-decoration: none;
}

.dr-pie__legal-lista a:hover { color: var(--dr-acento); }