/* ═══════════════════════════════════════════════════════
   VCP Deportes — Static Pages (About, Contact, Legal, 404)
   ═══════════════════════════════════════════════════════ */

/* ── Page title ── */
.static-page__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: var(--weight-black);
  line-height: var(--line-tight);
}

.static-page__subtitle {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
  font-size: var(--text-subhead);
}

/* ── Body content wrapper ── */
.static-page__body {
  color: var(--color-text-secondary);
  line-height: var(--line-relaxed);
  font-size: var(--text-subhead);
}

/* ── Intro paragraph (destacado) ── */
.static-page__intro {
  font-size: var(--text-action);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.static-page__intro strong {
  font-weight: var(--weight-semibold);
}

/* ── Section headings within static content ── */
.static-page__heading {
  margin: var(--space-8) 0 var(--space-4);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  line-height: var(--line-title);
}

.static-page__heading:first-of-type {
  margin-top: 0;
}

/* ── Feature / sport list ── */
.static-page__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
}

.static-page__list-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.static-page__list-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1.4;
}

.static-page__list-text strong {
  color: var(--color-text-primary);
}

/* ── Contact cards ── */
.contact-card {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.contact-card__icon {
  flex-shrink: 0;
  font-size: 2rem;
  line-height: 1;
}

.contact-card__label {
  display: block;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.contact-card__value {
  color: var(--color-text-secondary);
}

/* ── Contact cards container ── */
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

/* ── 404 / Error page ── */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  padding: var(--space-4);
}

.error-page__inner {
  max-width: 28rem;
}

.error-page__icon {
  font-size: 4.5rem;
  margin-bottom: var(--space-4);
  opacity: 0.7;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 6rem);
  font-weight: var(--weight-black);
  line-height: 1;
  margin: 0 0 var(--space-3);
  background: var(--gradient-vcp-logo);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.error-page__message {
  color: var(--color-text-secondary);
  font-size: var(--text-subhead);
  max-width: 24rem;
  margin: 0 auto;
  line-height: var(--line-relaxed);
}

.error-page__actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Legal page specific ── */
.legal-page__last-updated {
  color: var(--color-text-secondary);
  font-size: var(--text-control);
  margin-bottom: var(--space-8);
}

/* ── Scroll to top button ── */
.scroll-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
  box-shadow: var(--shadow-md);
}

.scroll-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.scroll-to-top:active {
  transform: scale(0.92);
}

/* ── Page fade-in transition ── */
@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page--fade-in {
  animation: page-fade-in var(--duration-entrance) var(--ease-out-quart) both;
}

/* Wrapper for fade-in on static pages */
.page__content {
  min-height: calc(100vh - var(--nav-height) - 20rem);
}

/* ── Mobile spacing refinements ── */
@media (max-width: 639px) {
  .static-page__title {
    font-size: clamp(1.75rem, 6vw, var(--text-section));
  }

  .static-page__heading {
    font-size: var(--text-utility);
  }

  .error-page__icon {
    font-size: 3.5rem;
  }

  .contact-cards {
    gap: var(--space-4);
  }

  .contact-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .static-page__list-item {
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .error-page__actions {
    flex-direction: column;
    align-items: center;
  }

  .error-page__actions .button {
    width: 100%;
  }
}

/* ── Footer fix for sticky 404 ── */
.footer--sticky {
  margin-top: auto;
}