/* Cristal óptico: cara transparente y cantos independientes del contenido. */
.header {
  --rim: 40px;
  border-radius: var(--rim);
  background: linear-gradient(110deg, #fffaf080, #ffffff52 34%, #ffffff38 68%, #fff9ed80);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  border: 1px solid #ffffffc9;
  box-shadow: 0 18px 30px -16px #081c3573, 0 4px 7px -4px #081c3566,
    inset 0 2px 2px #ffffffe6, inset 0 -3px 4px -2px #18365080,
    inset 3px 0 4px -2px #fff9, inset -3px 0 4px -2px #fff9;
}
.header::before {
  inset: 5px;
  border-radius: calc(var(--rim) - 5px);
  border: 1px solid #ffffff73;
  background: radial-gradient(ellipse 220px 55px at var(--shine-x) 0%, #ffffff40, transparent 75%),
    linear-gradient(180deg, #ffffff24, transparent 19%, transparent 76%, #17365518 88%, #ffffff47);
  box-shadow: 0 -2px 2px -1px #b8a17a80, 0 2px 2px -1px #fff,
    inset 0 1px 1px #fff9, inset 0 -1px 1px #fff8;
}
.header::after {
  inset: 2px;
  border-radius: calc(var(--rim) - 2px);
  border: 0;
  opacity: 1;
  background: radial-gradient(ellipse 44px 36px at 1% 20%, #fff4d6bf, transparent 80%),
    radial-gradient(ellipse 120px 6px at 58% 100%, #ffe4b5cc, transparent 80%),
    linear-gradient(104deg, #ffffff3b, transparent 14%, transparent 84%, #ffffff47);
  box-shadow: inset 0 2px 2px #fff, inset 0 -2px 2px #ffffffe6;
}
.header.scrolled {
  border-radius: var(--rim);
  background: linear-gradient(110deg, #ffffffbd, #ffffffa3 45%, #fff8e8b8);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
}
.header.scrolled::before { border-radius: calc(var(--rim) - 5px); }
.header.scrolled::after { border-radius: calc(var(--rim) - 2px); }
/* Reflejos blancos/champagne confinados al grosor del canto. */
.glass-edge-light {
  inset: 0; width: auto; height: auto; border: 5px solid transparent;
  border-radius: inherit; box-shadow: none; filter: none;
  background: conic-gradient(from 125deg at 50% 50%, #ffffff1a, #fff 12%, #bca67b80 18%,
    #fff 24%, #ffffff26 35%, #fff 47%, #f7d99dbf 52%, #fff 57%, #ffffff1a 67%, #fff 78%, #bca67b80 84%, #fff 90%, #ffffff1a) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .48;
}
@supports not (mask-composite: exclude) {
  .glass-edge-light { display: none; }
}
.header .logo { transform: translateY(-6px); }
.header .logo img { filter: drop-shadow(0 1px 1px #ffffff59); }
.header .menu-links > a { color: #10264d; text-shadow: 0 1px 1px #ffffff73; }
.header a:focus-visible, .header button:focus-visible {
  outline: 2px solid #10264d; outline-offset: 4px;
}
/* Conservar enlaces y acciones en los anchos intermedios. */
@media (min-width: 861px) and (max-width: 1250px) {
  .header .nav { grid-template-columns: 180px minmax(0, 1fr); padding: 0 20px; gap: 12px; }
  .header .logo, .header .logo img { width: 180px; }
  .header .logo img { flex-basis: 180px; }
  .header .menu-links { gap: 12px; }
  .header .menu-links > a { font-size: 12px; }
  .header .navlinks { gap: 10px; }
  .header .nav-contact { padding: 9px 10px 9px 30px; }
  .header .nav-contact::before { left: 10px; }
  .header .nav-contact-meta { display: none; }
  .header .navlinks .button.primary { padding: 0 18px; font-size: 13px; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .header .nav { grid-template-columns: 150px minmax(0, 1fr); }
  .header .logo, .header .logo img { width: 150px; }
  .header .logo img { flex-basis: 150px; }
  .header .menu-links { gap: 8px; }
  .header .menu-links > a { font-size: 11px; }
  .header .navlinks .button.primary { padding: 0 14px; font-size: 12px; }
}
@media (max-width: 860px) {
  .header { --rim: 30px; }
  .header .navlinks { max-height: calc(100dvh - 130px); overflow-y: auto; background: #fffffff2; }
  .header .navlinks .button.primary { min-height: 48px; flex-shrink: 0; }
  .header .nav-contact { flex-shrink: 0; }
}
@media (max-width: 680px) {
  .header { --rim: 26px; top: 22px; }
  .header .logo { transform: translateY(-3px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .header.scrolled { background: #faf8f2; }
  .header .navlinks { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .header, .header *, .header::before, .header::after { transition: none !important; animation: none !important; }
}

/* Destellos localizados, separados del cuerpo transparente. */
.header::after {
  background:
    radial-gradient(ellipse 24px 21px at 1.5% 12%, #fff4d6e6, transparent 78%),
    radial-gradient(ellipse 55px 4px at 59% 99%, #fff0bfe6, transparent 80%),
    radial-gradient(ellipse 85px 3px at 86% 1%, #ffffffd9, transparent 80%),
    linear-gradient(112deg, transparent 16%, #ffffff12 17%, transparent 21%, transparent 78%, #ffffff12 80%, transparent 84%);
  box-shadow: inset 0 1px 1px #fff, inset 0 -2px 1px -1px #fff;
}
/* Piezas convexas: cuerpo, lente superior, bisel interior y sombra de apoyo. */
.header .nav-contact,
.header .navlinks .button.primary,
.header .mobile-toggle {
  isolation: isolate;
  border-radius: 999px;
  border: 1px solid #ffffffa6;
  transform: translateY(-2px);
}
.header .nav-contact {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 28% 0%, #ffffff80, transparent 60%),
    linear-gradient(160deg, #ffffff73, #ffffff40 48%, #bcc9d14d 78%, #ffffff99);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 5px 8px -5px #081c3580,
    inset 0 2px 2px #fff, inset 0 -3px 4px -1px #58708366,
    inset 3px 0 4px -2px #fff, inset -3px 0 4px -2px #fff;
}
.header .nav-contact::after,
.header .navlinks .button.primary::after,
.header .mobile-toggle::after {
  content: "";
  position: absolute; inset: 3px;
  border: 1px solid #ffffff40; border-radius: inherit;
  box-shadow: 0 1px 1px #10264d26, inset 0 1px 1px #ffffff59;
  pointer-events: none;
}
.header .nav-contact > span { position: relative; z-index: 2; }
.header .nav-contact-phone { color: #10264d; text-shadow: 0 1px 2px #fff; }
.header .nav-contact-meta { color: #344860; }
.header .navlinks .button.primary {
  background:
    radial-gradient(ellipse 70% 55% at 50% -12%, #d8f4ffcc, transparent 85%),
    linear-gradient(180deg, #477fa6 0%, #18446b 12%, #103254 38%, #0a2345 70%, #183e62 94%, #5687a6 100%);
  border-color: #8cb5d0;
  box-shadow: 0 8px 12px -7px #071b39b3, 0 1px 1px #f0faff80,
    inset 0 2px 2px #e2f6ffb3, inset 0 -4px 5px #020e2780,
    inset 3px 0 4px -2px #b9e5ffb3, inset -3px 0 4px -2px #b9e5ffb3;
  text-shadow: 0 1px 2px #06142d;
}
.header .navlinks .button.primary::before {
  inset: 3px 10px auto; height: 32%;
  border-radius: 999px 999px 50% 50%;
  background: linear-gradient(175deg, #ffffff59, #ffffff0d 65%, transparent);
  box-shadow: inset 0 1px 1px #ffffffe6;
}
.header .mobile-toggle {
  position: relative;
  background: linear-gradient(145deg, #ffffffa6, #ffffff26 55%, #ffffff80);
  box-shadow: 0 6px 10px -6px #10264d99, inset 0 3px 3px #fff, inset 0 -3px 4px #58708366;
}
@media (hover: hover) {
  .header .nav-contact:hover,
  .header .navlinks .button.primary:hover,
  .header .mobile-toggle:hover { filter: brightness(1.08); transform: translateY(-3px); }
}
.header .nav-contact:active,
.header .mobile-toggle:active { transform: translateY(1px); }

.header .navlinks .button.primary {
  transition: transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 120ms ease, filter 120ms ease, background 160ms ease;
}
.header .navlinks .button.primary:active {
  transform: translateY(2px) scale(.97);
  filter: brightness(.91) saturate(.94);
  box-shadow: 0 1px 2px -1px #071b3970,
    inset 0 6px 8px -3px #020e27cc,
    inset 0 1px 1px #e2f6ff80,
    inset 2px 0 3px -2px #b9e5ff70,
    inset -2px 0 3px -2px #b9e5ff70;
}
.header .navlinks .button.primary:active::before { opacity: .38; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header .nav-contact, .header .mobile-toggle { background: #f1f4f5; }
}
@media (prefers-reduced-motion: reduce) {
  .header .nav-contact, .header .navlinks .button.primary, .header .mobile-toggle,
  .header .nav-contact:hover, .header .navlinks .button.primary:hover, .header .mobile-toggle:hover,
  .header .nav-contact:active, .header .navlinks .button.primary:active, .header .mobile-toggle:active {
    transform: none;
  }
}

/* Cápsulas de cristal claro para mantener legibles los cuatro enlaces
   sobre imágenes claras u oscuras, sin convertirlos en botones pesados. */
@media (min-width: 861px) {
  .header .menu-links > a {
    isolation: isolate;
    z-index: 0;
    color: #10264d;
    text-shadow: 0 1px 1px rgba(255,255,255,.95);
  }
  .header .menu-links > a::before {
    content: "";
    position: absolute;
    inset: 4px -8px;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    box-shadow: 0 2px 7px rgba(16,38,77,.10),
      inset 0 1px 1px rgba(255,255,255,.98),
      inset 0 -1px 1px rgba(16,38,77,.05);
    transition: background-color .22s ease, box-shadow .22s ease;
  }
  .header .menu-links > a:hover,
  .header .menu-links > a:focus-visible {
    color: #80683f;
  }
  .header .menu-links > a:hover::before,
  .header .menu-links > a:focus-visible::before {
    background: rgba(255,255,255,.96);
    box-shadow: 0 3px 9px rgba(16,38,77,.14),
      inset 0 1px 1px #fff,
      inset 0 -1px 1px rgba(16,38,77,.06);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 861px) {
    .header .menu-links > a::before { background: rgba(255,255,255,.96); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .header .menu-links > a::before { transition: none; }
}