/* ==========================================================================
   Castillo & Prieto Abogados
   Reglas portadas verbatim — origen: design/css/styles.css
   ========================================================================== */

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 150;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--borde);
  transition: background .3s ease;
}
.cabecera__inner {
  max-width: var(--ancho); margin: 0 auto; padding: 0 32px; height: 78px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: flex; align-items: center; cursor: pointer; }
.logo img { height: 46px; width: auto; display: block; }
/* Variante sobre el hero oscuro (Inicio) */
body.es-inicio .cabecera { background: var(--oscuro); border-bottom-color: rgba(255,255,255,0.10); }
body.es-inicio .logo img { filter: brightness(0) invert(1); }
body.es-inicio .hamburguesa span { background: #fff; }
.hamburguesa {
  cursor: pointer; background: transparent; border: none; padding: 8px;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-end;
}
.hamburguesa span { display: block; width: 26px; height: 2px; background: var(--tinta); }
.hamburguesa span:nth-child(2) { width: 20px; }
body.es-inicio .hamburguesa { display: none; }
/* ---------- Overlay de menú ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 300; background: #232e34;
  display: none; flex-direction: column; padding: 40px 32px;
}
.overlay.abierto { display: flex; }
.overlay__top {
  max-width: var(--ancho); margin: 0 auto; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
}
.overlay__top img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.overlay__cerrar {
  cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: #fff; width: 44px; height: 44px; border-radius: 999px; font-size: 20px; line-height: 1;
}
.overlay__nav {
  max-width: var(--ancho); margin: 0 auto; width: 100%; flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.overlay__nav a {
  cursor: pointer; display: flex; align-items: baseline; gap: 20px;
  padding: 12px 0; color: rgba(255,255,255,0.92); text-decoration: none;
}
.overlay__nav a:hover, .overlay__nav a.activo { color: var(--celeste); }
.overlay__nav .num {
  font-size: 13px; color: var(--celeste); font-weight: 600;
  letter-spacing: 0.1em; width: 34px;
}
.overlay__nav .etiqueta {
  font-family: var(--heading-font); font-size: clamp(30px, 5vw, 58px);
  line-height: 1.1; font-weight: 700;
}
@media (max-width: 760px) {
  .cabecera__inner { padding-left: 22px; padding-right: 22px; }
}