/* ═══════════════════════════════════════════════
   ANTIGUA PICKLEBALL — Tema Editorial (páginas interiores)
   Cargar DESPUÉS de style.css. Solo re-tematiza: no toca lógica.
════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,600&family=Space+Mono:wght@400;700&display=swap');

:root {
  --ink:        #14201A;
  --ink-soft:   #3E4F46;
  --paper:      #FAF7F0;
  --paper-deep: #F2EDE2;
  --line:       #DED7C6;
  --forest:     #1B4332;
  --leaf:       #2D6A4F;
  --gold:       #C99417;
  --gold-soft:  #F4D35E;
}

body { background: var(--paper); color: var(--ink); }

/* ── Tipografía editorial ── */
h1, h2, .page-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900; letter-spacing: -.02em;
}
.card h3, .qc-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; }

/* ── Nav y menú móvil sobre papel ── */
nav { background: rgba(250,247,240,.92); border-bottom: 1px solid var(--line); }
.nav-links a:hover { background: var(--paper-deep); color: var(--ink); }
.nav-links a.active { background: var(--forest); color: #fff; }
.mobile-menu { background: rgba(250,247,240,.98); border-top: 1px solid var(--line); }
.mobile-menu a { border-bottom: 1px solid var(--paper-deep); }

/* ── Hero de páginas interiores ── */
.page-hero {
  background: var(--forest);
  position: relative; overflow: hidden;
  padding: 150px 24px 76px;
}
.page-hero::before {
  content: ''; position: absolute; right: -130px; top: -130px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(250,247,240,.14);
}
.page-hero::after {
  content: ''; position: absolute; right: -70px; top: -70px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(250,247,240,.08);
}
.page-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02;
  animation: edRise .9s .12s cubic-bezier(.2,.7,.2,1) both;
}
.page-hero p {
  color: rgba(250,247,240,.78);
  animation: edRise .9s .28s cubic-bezier(.2,.7,.2,1) both;
}
.page-hero .section-tag,
.page-hero > div > .section-tag {
  background: transparent; border: none; padding: 0;
  font-family: 'Space Mono', monospace; font-size: .72rem;
  letter-spacing: .22em; color: var(--gold-soft);
  animation: edRise .9s 0s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes edRise { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }

/* ── Etiquetas de sección como kickers mono ── */
.section-tag {
  background: transparent; border: 1px solid var(--line); color: var(--gold);
  font-family: 'Space Mono', monospace; letter-spacing: .18em;
}
.section-alt { background: var(--paper-deep); }
.section-sub { color: var(--ink-soft); }

/* ── Cards: papel, línea, vida ── */
.card, .quick-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 4px 14px rgba(20,32,26,.05);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.card:hover, .quick-card:hover {
  transform: translateY(-6px) rotate(-.3deg);
  box-shadow: 0 20px 44px rgba(20,32,26,.12);
  border-color: var(--forest);
}
.card p, .qc-desc { color: var(--ink-soft); }

/* entrada animada en cascada para grillas */
.cards-grid .card, .quick-grid .quick-card {
  animation: edRise .8s cubic-bezier(.2,.7,.2,1) both;
}
.cards-grid .card:nth-child(1), .quick-grid .quick-card:nth-child(1) { animation-delay: .05s; }
.cards-grid .card:nth-child(2), .quick-grid .quick-card:nth-child(2) { animation-delay: .14s; }
.cards-grid .card:nth-child(3), .quick-grid .quick-card:nth-child(3) { animation-delay: .23s; }
.cards-grid .card:nth-child(4), .quick-grid .quick-card:nth-child(4) { animation-delay: .32s; }
.cards-grid .card:nth-child(5), .quick-grid .quick-card:nth-child(5) { animation-delay: .41s; }
.cards-grid .card:nth-child(6), .quick-grid .quick-card:nth-child(6) { animation-delay: .50s; }
.cards-grid .card:nth-child(n+7), .quick-grid .quick-card:nth-child(n+7) { animation-delay: .58s; }

/* ── Botones ── */
.btn-primary, .btn-sm {
  background: var(--ink);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.btn-primary:hover, .btn-sm:hover { background: var(--forest); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20,32,26,.2); opacity: 1; }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-secondary { background: var(--paper-deep); }
.btn-secondary:hover { background: var(--line); }

/* ── Tags ── */
.tag { border-color: var(--line); color: var(--ink-soft); }
.tag.green  { background: #E5F2E9; color: var(--forest); border-color: #BFDCC9; }
.tag.yellow { background: #FBF3D9; color: #8A6A0E; border-color: #EBD9A0; }

/* ── Stats ── */
.stats-bar { border-color: var(--line); }
.stat { border-color: var(--line); }
.stat-num {
  font-family: 'Fraunces', Georgia, serif; color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }

/* ── Footer ── */
footer { background: var(--ink); }

/* ── Secciones oscuras ── */
.section-dark { background: var(--forest); }