/* ============================================================================
   Barra superior canónica de Screezy
   ============================================================================
   Antes cada página traía su propia barra: cinco dialectos distintos de clases
   para el mismo componente. `clean-browser.html` enlazaba main.css pero usaba
   .logo-wrap / .nav-desktop / .btn-primary, que NO existen en main.css — por eso
   se veía cruda. Y las páginas con estilos en línea (afiliados, comparativas,
   legales) no cargaban main.css en absoluto, así que el selector de idioma se
   quedaba sin una sola regla y salía como tres botones pelados.

   Este archivo es la barra entera, autónoma y sin dependencias. Cada variable
   lleva su valor de reserva dentro del propio `var(--x, valor)`, así que funciona
   igual en páginas con la paleta de main.css y en páginas sin ella, y NO redefine
   `:root` para no pisarle los colores a nadie.

   Se genera a partir de las reglas del header de main.css: la referencia sigue
   siendo esa, esto es la misma barra hecha portátil.
   ============================================================================ */

.announcement-bar {
      animation: barSlideDown 0.65s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)) 0.05s both;
    }
.site-header {
      animation: headerReveal 0.75s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)) 0.12s both;
    }
.site-header .brand-logo-wrap {
      animation: brandLogoPop 0.8s var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) 0.25s both;
    }
/* Primary Apple Emerald Glass Capsule Button */
    .btn-hero-primary,
    .btn-header-neon,
    .btn-plan-neon,
    .cta-btn-center,
    .btn-submit-purchase {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 30px;
      border-radius: 9999px;
      font-family: var(--font-body);
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      text-decoration: none;
      color: #020904 !important;
      background: linear-gradient(180deg, #5fe42e 0%, #44bf1f 40%, #2ea013 100%);
      border: 1px solid rgba(145, 255, 95, 0.55);
      box-shadow: 
        0 0 0 1px rgba(110, 245, 60, 0.25),
        0 4px 18px -2px rgba(75, 215, 40, 0.4),
        0 12px 32px -4px rgba(0, 0, 0, 0.55),
        inset 0 1.2px 1px rgba(255, 255, 255, 0.8),
        inset 0 -1.5px 3px rgba(10, 50, 10, 0.35);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      cursor: pointer;
      overflow: hidden;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
      -webkit-user-select: none;
    }
/* Top Glass Specular Meniscus */
    .btn-hero-primary::before,
    .btn-header-neon::before,
    .btn-plan-neon::before,
    .cta-btn-center::before,
    .btn-submit-purchase::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 48%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.04) 80%, transparent 100%);
      border-radius: 9999px 9999px 0 0;
      pointer-events: none;
      z-index: 1;
    }
/* Soft Lux Glass Shimmer Sweep */
    .btn-hero-primary::after,
    .btn-header-neon::after,
    .btn-plan-neon::after,
    .cta-btn-center::after,
    .btn-submit-purchase::after {
      content: "";
      position: absolute;
      top: -60%;
      left: -60%;
      width: 75px;
      height: 220%;
      background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(210, 255, 215, 0.2) 65%,
        transparent 100%
      );
      filter: blur(1px);
      animation: glassSpecularSweep 4.2s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
      pointer-events: none;
      z-index: 2;
    }
.btn-hero-primary:hover,
    .btn-header-neon:hover,
    .btn-plan-neon:hover,
    .cta-btn-center:hover,
    .btn-submit-purchase:hover {
      background: linear-gradient(180deg, #71f43a 0%, #52d227 40%, #36b318 100%);
      transform: translateY(-2px);
      box-shadow: 
        0 0 0 1px rgba(160, 255, 110, 0.65),
        0 6px 26px -2px rgba(85, 245, 50, 0.65),
        0 18px 42px -4px rgba(0, 0, 0, 0.6),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
        inset 0 -1.5px 4px rgba(10, 50, 10, 0.35);
      border-color: rgba(180, 255, 130, 0.85);
      color: #020904 !important;
    }
.btn-hero-primary:active,
    .btn-header-neon:active,
    .btn-plan-neon:active,
    .cta-btn-center:active,
    .btn-submit-purchase:active {
      transform: translateY(0px) scale(0.98);
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 3px rgba(0, 0, 0, 0.2),
        inset 0 -1px 2px rgba(255, 255, 255, 0.2);
    }
/* Secondary Apple Frosted Obsidian Glass Button */
    .btn-hero-pro,
    .btn-plan-ghost,
    .btn-header-ghost,
    .btn-blog-ghost {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 24px;
      border-radius: 9999px;
      font-family: var(--font-body);
      font-size: 15.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
      text-decoration: none;
      color: var(--text-primary, #f2fef5) !important;
      background: rgba(8, 20, 12, 0.65);
      border: 1px solid rgba(85, 220, 45, 0.28);
      backdrop-filter: blur(20px) saturate(190%);
      -webkit-backdrop-filter: blur(20px) saturate(190%);
      box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 12px rgba(75, 169, 40, 0.08);
      cursor: pointer;
      overflow: hidden;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
.btn-hero-pro::before,
    .btn-plan-ghost::before,
    .btn-header-ghost::before,
    .btn-blog-ghost::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 48%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
      border-radius: 9999px 9999px 0 0;
      pointer-events: none;
    }
.btn-hero-pro:hover,
    .btn-plan-ghost:hover,
    .btn-header-ghost:hover,
    .btn-blog-ghost:hover {
      color: #ffffff !important;
      background: rgba(14, 34, 20, 0.85);
      border-color: rgba(110, 245, 60, 0.55);
      transform: translateY(-2px);
      box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(75, 210, 40, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 0 16px rgba(75, 210, 40, 0.15);
    }
.btn-hero-pro:active,
    .btn-plan-ghost:active,
    .btn-header-ghost:active,
    .btn-blog-ghost:active {
      transform: translateY(0px) scale(0.98);
    }
/* Sticky Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(4, 7, 5, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
      transition: padding 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    }
.site-header.scrolled {
      background: rgba(3, 5, 4, 0.96);
      border-bottom-color: rgba(75, 169, 40, 0.18);
    }
.header-inner {
      display: flex;
      align-items: center;
      gap: 32px;
      /* Longhand a propósito: en casi todas las páginas este div es a la vez
         `.container`, y `.site-header > .container` (más específico) traía el
         atajo `padding: 0 32px`, que reponía a cero el alto de la barra. Cada
         regla toca ahora sólo su eje. */
      padding-top: 16px;
      padding-bottom: 16px;
      transition: padding 0.25s ease;
    }
.site-header.scrolled .header-inner {
      padding-top: 10px;
      padding-bottom: 10px;
    }
.brand-link {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-right: auto;
    }
.brand-logo-wrap {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(75, 169, 40, 0.15);
      border: 1px solid var(--border-glass, rgba(75, 169, 40, 0.22));
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    }
.brand-link:hover .brand-logo-wrap {
      transform: rotate(-8deg) scale(1.08);
      box-shadow: 0 0 20px rgba(75, 169, 40, 0.45);
    }
.brand-logo {
      height: 22px;
      width: auto;
    }
.brand-name {
      font-family: var(--font-display, "Outfit", sans-serif);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 6px;
    }
.brand-name .brand-badge {
      color: var(--neon-green, #4ba928);
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 6px;
      background: rgba(75, 169, 40, 0.12);
      border: 1px solid rgba(75, 169, 40, 0.28);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
    }
.nav-links {
      display: flex;
      gap: 28px;
      align-items: center;
      font-size: 14.5px;
    }
.nav-links a {
      color: var(--text-secondary, #9cbca7);
      font-weight: 500;
      position: relative;
      padding: 4px 0;
      transition: color 0.15s ease;
    }
.nav-links a::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0%;
      height: 2px;
      background: var(--neon-green, #4ba928);
      border-radius: 2px;
      transition: width 0.2s ease;
    }
.nav-links a:hover,
    .nav-links a.active {
      color: #fff;
    }
.nav-links a.active::after,
    .nav-links a:hover::after {
      width: 100%;
    }
/* Animated Language Switcher Capsule & Text Pop Animations */
    .lang-switcher-wrap {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-glass, rgba(75, 169, 40, 0.22));
      border-radius: 12px;
      padding: 3px;
      gap: 2px;
      position: relative;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    }
.lang-switcher-btn {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-secondary, #9cbca7);
      font-size: 11.5px;
      font-weight: 700;
      padding: 5px 9px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      letter-spacing: 0.03em;
    }
.lang-switcher-btn:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.06);
    }
.lang-switcher-btn.active {
      background: rgba(75, 169, 40, 0.22) !important;
      color: var(--neon-bright, #5dc333) !important;
      border-color: rgba(93, 195, 51, 0.45) !important;
      box-shadow: 0 0 14px rgba(75, 169, 40, 0.35) !important;
      transform: scale(1.05);
    }
.header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
.btn-header-ghost {
      padding: 9px 18px;
      font-size: 14px;
    }
.btn-header-neon {
      padding: 9px 20px;
      font-size: 14px;
    }
/* Dismissible Top Announcement Bar */
    .announcement-bar {
      background: linear-gradient(90deg, #071509 0%, #0d2612 50%, #071509 100%);
      border-bottom: 1px solid rgba(75, 169, 40, 0.25);
      padding: 9px 0;
      font-size: 13.5px;
      color: #fff;
      position: relative;
      z-index: 101;
      transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    }
.announcement-bar.hidden {
      display: none;
    }
.announcement-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: center;
      position: relative;
      padding: 0 36px;
    }
.announcement-chip {
      background: rgba(75, 169, 40, 0.2);
      border: 1px solid rgba(75, 169, 40, 0.4);
      color: var(--neon-bright, #5dc333);
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-right: 6px;
    }
.announcement-link {
      color: var(--neon-lime, #f5fe5a);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.15s ease;
      white-space: nowrap;
    }
.announcement-link:hover {
      color: #fff;
    }
.announcement-close-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      color: var(--text-muted, #627e6c);
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: color 0.15s ease;
    }
.announcement-close-btn:hover {
      color: #fff;
    }
@media (max-width: 1024px) {
  .nav-links {
    display: none !important;
  }
  .header-inner {
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .header-actions {
    margin-left: auto;
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
/* Dismissible Announcement Bar Hidden on Mobile */
      .announcement-bar {
        display: none !important;
      }
/* Header Adjustments & Proper Breathing Room */
      .nav-links {
        display: none !important;
      }
.site-header {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
.site-header .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
.header-inner {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
      }
.brand-link {
        gap: 8px !important;
        margin-right: auto !important;
      }
.brand-logo-wrap {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
      }
.brand-name {
        font-size: 18px !important;
      }
.header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
      }
.lang-switcher-wrap {
        padding: 2px !important;
        border-radius: 7px !important;
        gap: 1px !important;
      }
.lang-switcher-btn {
        padding: 4px 6px !important;
        font-size: 10.5px !important;
        border-radius: 5px !important;
      }
.btn-header-neon.mobile-only {
        padding: 8px 13px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
      }
.sticky-actions-mobile .btn-header-ghost {
        padding: 6px 9px !important;
        font-size: 11.5px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
      }
.sticky-actions-mobile .btn-header-neon {
        padding: 7px 12px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        background: var(--neon-green, #4ba928) !important;
        color: #020703 !important;
      }
}
/* Language Switcher Styles */
    .lang-switcher-wrap {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
      border-radius: 8px;
      padding: 3px;
    }
.lang-switcher-btn {
      background: transparent;
      border: none;
      color: var(--text-secondary, #9cbca7);
      font-family: var(--font-mono, "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace);
      font-size: 11.5px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
.lang-switcher-btn:hover {
      color: #fff;
    }
.lang-switcher-btn.active {
      background: rgba(75, 169, 40, 0.25);
      color: var(--neon-bright, #5dc333);
    }


/* Keyframes que usan las reglas de arriba, copiados para que la barra sea autónoma. */
@keyframes barSlideDown {
      0% {
        opacity: 0;
        transform: translateY(-100%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
@keyframes brandLogoPop {
      0% {
        opacity: 0;
        transform: scale(0.82) rotate(-10deg);
      }
      60% {
        transform: scale(1.06) rotate(2deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }
@keyframes glassSpecularSweep {
      0% {
        transform: translateX(-160%) skewX(-20deg);
        opacity: 0;
      }
      20% {
        opacity: 0.85;
      }
      50% {
        transform: translateX(250%) skewX(-20deg);
        opacity: 0;
      }
      100% {
        transform: translateX(250%) skewX(-20deg);
        opacity: 0;
      }
    }
@keyframes headerReveal {
      0% {
        opacity: 0;
        transform: translateY(-20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

/* Ancho y centrado del contenido de la barra. Va con el selector calificado a
   propósito: las páginas con estilos propios definen su propio `.container` con
   otro padding, y la barra tiene que medir igual en todas aunque el resto de la
   página no. Sólo afecta a lo que hay dentro del header. */
.site-header > .container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  position: relative;
  z-index: 2;
}

/* El contenedor de acciones (idioma + CTA). Estaba puesto con `style=` en línea en
   cada página; aquí una vez y para todas. */
.site-header .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Aviso de precio de lanzamiento —"sube a $49 el 15 de octubre · quedan 12 días"—.
   Lo rellena js/pricing.js desde la promoción del catálogo y sólo se ve mientras la
   promoción está viva: sin promoción el elemento queda `hidden` y no ocupa nada.
   La regla está repetida en css/main.css y css/topbar.css a propósito: el sitio tiene
   dos familias de páginas y cada una carga sólo una de las dos hojas. */
.launch-note {
  display: block;
  margin: 10px auto 0;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--neon-bright, #71e641);
  text-align: center;
}
/* `display:block` de arriba le gana al `[hidden] { display:none }` del navegador,
   que es una regla del estilo por defecto y pierde por especificidad. Sin esta
   línea, el aviso se vería (vacío, ocupando sitio) justo cuando NO hay promoción. */
.launch-note[hidden] { display: none; }
.launch-note:empty { display: none; }