:root {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  overflow-x: clip;
}

main, section, header, footer {
  max-width: 100%;
}

.home-page-main,
.home-page-main .hero,
.home-page-main .hero-copy,
.home-page-main .vip-layout {
  overflow-x: clip;
}

.comparison {
  contain: inline-size;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.skip-link {
  position: fixed;
  inset: .75rem auto auto .75rem;
  z-index: 10000;
  padding: .8rem 1rem;
  border-radius: .35rem;
  background: #fff;
  color: #111;
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform .15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid #ffd166 !important;
  outline-offset: 3px !important;
}

.mobile-menu > summary,
.risk-direction button {
  min-height: 44px;
}

.mobile-menu > summary {
  display: inline-flex;
  align-items: center;
}

.field-error {
  display: block;
  margin-top: .4rem;
  color: #ffb4ab;
  font-size: .875rem;
}

[aria-invalid="true"] {
  border-color: #ffb4ab !important;
}

.not-found-main {
  gap: 1.25rem;
  padding: 1.5rem;
}

.not-found-home {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .7rem 1rem;
  border: 1px solid currentColor;
  border-radius: .4rem;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.header-vip-access {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0 .8rem;
  color: #f6d88f;
  border: 1px solid rgba(224, 183, 89, .28);
  border-radius: .45rem;
  background: rgba(224, 183, 89, .075);
  text-decoration: none;
  white-space: nowrap;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.header-vip-access:hover {
  color: #ffe5a5;
  border-color: rgba(224, 183, 89, .48);
  background: rgba(224, 183, 89, .12);
}

.header-vip-access > span {
  font-size: .55rem;
}

.chart-tutorial-hint {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: 0 .72rem;
  border: 1px solid rgba(73, 169, 255, .3);
  border-radius: .55rem;
  color: #baddff;
  background: rgba(73, 169, 255, .08);
  text-decoration: none;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 800;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.chart-tutorial-hint:hover,
.chart-tutorial-hint:focus-visible {
  color: #eff8ff;
  border-color: rgba(73, 169, 255, .58);
  background: rgba(73, 169, 255, .15);
}

.chart-tutorial-hint > span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #49a9ff;
  color: #06111f;
  font-size: .72rem;
}

.chart-tutorial-hint.is-seen {
  padding-inline: .55rem;
  color: #91a8be;
  border-color: rgba(145, 168, 190, .2);
  background: rgba(145, 168, 190, .04);
}

@media (max-width: 420px) {
  .site-header { gap: .5rem; padding-inline: .75rem; }
  .header-vip-access { min-height: 34px; padding-inline: .62rem; }
  .header-vip-access b { font-size: 0; }
  .header-vip-access b::after { content: "VIP"; font-size: .62rem; }
}

@media (max-width: 640px) {
  .chart-toolbar,
  .drawing-toolbar,
  .indicator-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .chart-market-control,
  .chart-market-control select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .chart-timeframes,
  .drawing-toolbar,
  .indicator-toolbar {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }

  .chart-timeframes button,
  .drawing-toolbar button {
    min-height: 44px;
  }

  .drawing-tools,
  .drawing-actions {
    flex: 0 0 auto !important;
  }

  .chart-tutorial-hint {
    min-height: 44px;
  }
}

/* En pantallas tactiles el fondo animado y los desenfoques fijos consumen
   demasiada GPU. El gradiente base mantiene la estetica sin bloquear el sitio. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .market-world {
    display: block !important;
    transition: none !important;
  }

  .market-scanline {
    filter: none !important;
    opacity: .38;
    animation-duration: 14s !important;
  }

  main > .site-header,
  .founder-card,
  .method-card,
  .founder-photo > span,
  .experience-chip,
  .mobile-menu nav,
  .market-symbols span {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .market-symbols span {
    transition: none !important;
    background: rgba(5, 13, 25, .72) !important;
  }

  main > .site-header {
    background: rgba(8, 17, 31, .97) !important;
  }
}

/* Los navegadores compatibles pueden omitir el pintado de las secciones que
   todavia estan fuera de pantalla y prepararlas justo antes de que aparezcan. */
@supports (content-visibility: auto) {
  @media (max-width: 900px) {
    .entry-paths,
    .method-section,
    .curriculum,
    .resources-section,
    .vip-section,
    .founder-section,
    .principles,
    .faq-section,
    .contact-section,
    main > footer {
      content-visibility: auto;
      contain-intrinsic-size: auto 900px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .market-world { display: none !important; }
}

@media print {
  .market-world, .site-header { display: none !important; }
}