/* Small set of component styles used on top of Tailwind Play CDN utilities.
   Colors mirror tailwind.config.js brand tokens. */

:root {
  --brand-yellow: #fbbd0b;
  --brand-yellow-hover: #ffd23d;
  --bg-base: #0d0d0d;
  --bg-section: #171717;
  --bg-border: #212121;
  --bg-footer: #1c1c1c;
  --i-img-responsive: 80%;
}

html,
body {
  background: var(--bg-base);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

.font-display {
  font-family: 'Zalando Sans Expanded', 'DM Sans', system-ui, sans-serif;
  font-stretch: expanded;
}

.font-mono {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
}

/* Reusable pill buttons */
.pill-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--brand-yellow);
  color: #000;
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.pill-yellow:hover {
  background: var(--brand-yellow-hover);
  transform: translateY(-1px);
}

.pill-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.pill-white:hover {
  background: #f5f5f5;
  transform: translateY(-1px);
}

.pill-outline-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--brand-yellow);
  color: var(--brand-yellow);
  font-weight: 600;
  padding: 0.55rem 1.5rem;
  transition: background 0.2s ease;
}
.pill-outline-yellow:hover {
  background: rgba(251, 189, 11, 0.1);
}

/* Section card with faint yellow glow */
.section-card {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid var(--bg-border);
  background: var(--bg-section);
}

/* Hero ambient light using the iluminacion-fondo asset */
.hero-glow {
  position: relative;
  isolation: isolate;
}
.hero-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/iluminacion-fondo.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

/* Radial yellow glow utility */
.bg-yellow-glow {
  background: radial-gradient(
    ellipse at center,
    rgba(251, 189, 11, 0.22),
    rgba(251, 189, 11, 0) 65%
  );
}

/* FAQ accordion animation using grid-rows trick */
[data-faq-group] [data-faq-body] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
[data-faq-group][data-open='true'] [data-faq-body] {
  grid-template-rows: 1fr;
}
[data-faq-group] [data-faq-body] > div {
  overflow: hidden;
}
[data-faq-group][data-open='false'] [data-faq-body] > div {
  padding: 0 !important;
}
[data-faq-group] [data-faq-chevron] {
  transition: transform 0.3s ease;
}
[data-faq-group][data-open='true'] [data-faq-chevron] {
  transform: rotate(90deg);
}

/* Explicit responsive visibility fallbacks (used for shared header/footer
   because Tailwind CDN sometimes races with DOM injection for responsive variants). */
.md-only {
  display: none !important;
}
.mobile-only {
  display: flex;
}
@media (min-width: 768px) {
  .md-only {
    display: flex !important;
  }
  .mobile-only {
    display: none !important;
  }
  .mobile-menu {
    display: none !important;
  }
}

/* Hide scrollbar for carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Yellow bullet for account-type lists */
.y-bullet {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.y-bullet::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: .25rem;
  background-image: url('../img/isotipo-footer.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.gradient-circle {
  background-image: url('../img/iluminacion-fondo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.text-outline {
  text-shadow: -1px -1px 0 var(--brand-yellow), 1px -1px 0 var(--brand-yellow), -1px 1px 0 var(--brand-yellow), 1px 1px 0 var(--brand-yellow);

}

/* Home signup carousel — mobile pagination dots */
.home-signup-carousel-dots {
  min-height: 0.5rem;
}

.home-signup-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.home-signup-carousel-dot:hover,
.home-signup-carousel-dot:focus-visible {
  background: rgba(251, 189, 11, 0.65);
  outline: none;
}

.home-signup-carousel-dot.is-active {
  width: 1.25rem;
  background: var(--brand-yellow);
}