/* Cabecera pública única: Landing, Precios, Blog y Acceso. */
.login-page {
  --section-bg: var(--login-bg);
  --ink: var(--login-ink);
  --line: var(--login-line);
  --accent: var(--login-accent);
  --accent-strong: #e75615;
}

.public-shell-page .header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 92px;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.public-shell-page .header-shell {
  position: relative;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: min(calc(100% - 32px), 1320px);
  min-height: 64px;
  margin-inline: auto;
  padding: 7px 9px 7px 16px;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 24px;
  background: color-mix(in srgb, var(--section-bg, var(--pricing-surface, #fbfdfb)) 76%, transparent);
  box-shadow: 0 16px 38px rgba(14, 22, 41, .14), inset 0 1px 0 rgba(255, 255, 255, .56);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  pointer-events: auto;
  transition: min-height 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.public-shell-page .header.scrolled {
  height: 84px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-shell-page .header.scrolled .header-shell {
  min-height: 58px;
  box-shadow: 0 12px 30px rgba(14, 22, 41, .17), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.public-shell-page .header .logo-link,
.public-shell-page .header .logo-img {
  display: block;
  width: 126px;
  min-width: 126px;
  height: auto;
}
.public-shell-page .header .logo-dark-version,
.public-shell-page .mobile-nav-head .logo-dark-version { display: none; }
[data-theme="dark"] .public-shell-page :is(.header,.mobile-nav-head) .logo-light-version { display: none; }
[data-theme="dark"] .public-shell-page :is(.header,.mobile-nav-head) .logo-dark-version { display: block; }

/* Visible al teclado, nunca como texto suelto sobre la composición editorial. */
.public-shell-page .skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 250;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0e1629;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translate(-50%, -160%);
  transition: transform 160ms ease;
}
.public-shell-page .skip-link:focus { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .public-shell-page .skip-link { transition: none; }
}

.public-shell-page .site-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  justify-self: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 5px;
  overflow: visible;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--line, var(--pricing-line, #d3dad6)) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-bg, var(--pricing-surface, #fbfdfb)) 68%, rgba(255, 255, 255, .72));
  box-shadow: 0 8px 20px rgba(14, 22, 41, .1), inset 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.public-shell-page .site-nav a,
.public-shell-page .site-nav[data-liquid-nav] a {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--line, var(--pricing-line, #d3dad6)) 58%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  color: var(--ink, var(--pricing-ink, #0e1629));
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.public-shell-page .site-nav a:is(:hover, :focus-visible, [aria-current="location"], [aria-current="page"]) {
  border-color: transparent;
  background: transparent;
  color: #0e1629;
}

.public-shell-page .site-nav.is-liquid-previewing a[aria-current]:not(:hover):not(:focus-visible) {
  color: var(--ink, var(--pricing-ink, #0e1629));
}

[data-theme="dark"] .public-shell-page .site-nav {
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(135deg, rgba(14, 22, 41, .96), rgba(14, 22, 41, .84));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .11);
}
[data-theme="dark"] .public-shell-page .site-nav a,
[data-theme="dark"] .public-shell-page .site-nav[data-liquid-nav] a {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035);
  color: #e8edf5;
}
[data-theme="dark"] .public-shell-page .site-nav a:is(:hover, :focus-visible, [aria-current="location"], [aria-current="page"]) { color: #0e1629; }
[data-theme="dark"] .public-shell-page .site-nav.is-liquid-previewing a[aria-current]:not(:hover):not(:focus-visible) { color: #e8edf5; }

.public-shell-page .site-nav .liquid-nav-indicator {
  --liquid-surface: rgba(255, 110, 39, .94);
  --liquid-line: rgba(255, 255, 255, .24);
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .24);
  background: linear-gradient(135deg, rgba(255, 126, 60, .98), rgba(255, 110, 39, .9));
  box-shadow: 0 7px 16px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .34);
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
}

.public-shell-page .nav-utility-links {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--line, var(--pricing-line, #d3dad6)) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-bg, var(--pricing-surface, #fbfdfb)) 68%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.public-shell-page .nav-utility-links a {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink, var(--pricing-ink, #0e1629));
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.public-shell-page .nav-utility-links a:is(:hover, :focus-visible, [aria-current="page"]) {
  background: transparent;
  color: #0e1629;
}
.public-shell-page .nav-utility-links.is-liquid-previewing a[aria-current="page"]:not(:hover):not(:focus-visible) {
  color: var(--ink, var(--pricing-ink, #0e1629));
}
.public-shell-page .nav-utility-links .liquid-nav-indicator {
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .28);
  background: linear-gradient(135deg, rgba(255, 126, 60, .98), rgba(255, 110, 39, .9));
  box-shadow: 0 6px 14px rgba(14, 22, 41, .16), inset 0 1px 0 rgba(255, 255, 255, .36);
}
[data-theme="dark"] .public-shell-page .nav-utility-links.is-liquid-previewing a[aria-current="page"]:not(:hover):not(:focus-visible) { color: var(--ink); }

.public-shell-page .header-actions {
  grid-column: 4;
  display: flex;
  align-items: center;
  gap: 7px;
}

.public-shell-page .theme-toggle,
.public-shell-page .mobile-menu-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line, var(--pricing-line, #d3dad6)) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--section-bg, var(--pricing-surface, #fbfdfb)) 70%, transparent);
  color: var(--ink, var(--pricing-ink, #0e1629));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.public-shell-page .theme-toggle svg,
.public-shell-page .mobile-menu-button svg { width: 18px; height: 18px; }
.public-shell-page .nav-auth-btn,
.public-shell-page .mobile-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 126, 60, .98), rgba(255, 110, 39, .9));
  color: #0e1629;
  box-shadow: 0 8px 18px rgba(14, 22, 41, .14), inset 0 1px 0 rgba(255, 255, 255, .34);
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
}

.public-shell-page .mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  justify-content: flex-end;
  background: rgba(9, 17, 31, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.public-shell-page .mobile-nav-overlay.active { opacity: 1; pointer-events: auto; }
.public-shell-page .mobile-nav-panel {
  width: min(88vw, 390px);
  height: 100%;
  padding: 22px;
  border-left: 1px solid rgba(255, 255, 255, .38);
  border-radius: 28px 0 0 28px;
  background: color-mix(in srgb, var(--section-bg, var(--pricing-surface, #fbfdfb)) 78%, transparent);
  box-shadow: -20px 0 52px rgba(14, 22, 41, .2);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  transform: translateX(102%);
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.public-shell-page .mobile-nav-overlay.active .mobile-nav-panel { transform: translateX(0); }
.public-shell-page .mobile-nav-head,
.public-shell-page .mobile-nav-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.public-shell-page .mobile-nav-logo { width: 118px; height: auto; }
.public-shell-page .mobile-nav-links { display: grid; gap: 5px; margin: 30px 0; }
.public-shell-page .mobile-nav-link {
  padding: 11px 13px;
  border-radius: 14px;
  color: var(--ink, var(--pricing-ink, #0e1629));
  font-weight: 700;
  text-decoration: none;
}
.public-shell-page .mobile-nav-link:is(:hover, :focus-visible, [aria-current="page"], [aria-current="location"]) {
  background: color-mix(in srgb, var(--accent, var(--pricing-accent, #ff6e27)) 14%, transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .public-shell-page .header-shell,
  .public-shell-page .nav-utility-links,
  .public-shell-page .theme-toggle,
  .public-shell-page .mobile-menu-button,
  .public-shell-page .site-nav { background: var(--section-bg, var(--pricing-surface, #fbfdfb)); }
  [data-theme="dark"] .public-shell-page .site-nav { background: #0e1629; }
}

@media (max-width: 1160px) {
  .public-shell-page .site-nav,
  .public-shell-page .nav-utility-links { display: none; }
  .public-shell-page .header-shell { grid-template-columns: 126px 1fr auto; }
  .public-shell-page .header-actions { grid-column: 3; }
  .public-shell-page .header-actions > .mobile-menu-button { display: inline-grid; }
}

@media (min-width: 1161px) {
  .public-shell-page .header-actions > .mobile-menu-button { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .public-shell-page .mobile-nav-overlay,
  .public-shell-page .mobile-nav-panel { transition: none !important; }
}

@media (max-width: 760px) {
  .public-shell-page .header { height: 78px; }
  .public-shell-page .header.scrolled { height: 72px; }
  .public-shell-page .header-shell {
    grid-template-columns: 108px 1fr auto;
    width: min(calc(100% - 20px), 1320px);
    min-height: 58px;
    padding: 6px 7px 6px 12px;
    border-radius: 20px;
  }
  .public-shell-page .header .logo-link,
  .public-shell-page .header .logo-img { width: 108px; min-width: 108px; }
  .public-shell-page .nav-utility-links { display: none; }
  .public-shell-page .header-actions { grid-column: 3; }
  .public-shell-page .theme-toggle { display: none; }
  .public-shell-page .nav-auth-btn { min-height: 38px; padding-inline: 12px; }
}