/* ════════════════════════════════════════════════
   MAIN.CSS — Vendredi entre Amis
   Base : colores, tipografía, layout, topbar.
   Hereda la paleta esmeralda/oro de migueltillero.com
════════════════════════════════════════════════ */
:root{
  --void:    #cfe6d9;
  --deep:    #e9f1e7;
  --panel:   rgba(255,255,255,0.92);
  --gold:    #a5824a;
  --gold2:   #86673a;
  --goldx:   rgba(201,169,110,0.16);
  --cyan:    #0d7f57;
  --cyanx:   rgba(15,138,95,0.10);
  --white:   #12291c;
  --text:    rgba(18,41,28,0.92);
  --muted:   rgba(18,41,28,0.62);
  --border:  rgba(165,130,74,0.38);
  --borderx: rgba(15,138,95,0.18);
  --em1:     #0d3b2e;
  --em2:     #1a5c45;
  --bg-grad: radial-gradient(ellipse 80% 80% at 50% 20%, #dcefe3 0%, #cfe6d9 55%, #bfdccb 100%);
  --radius:  14px;
  --step:    1.125rem;      /* base ergonomique (18px) : public majoritairement senior */
  --line:    1.7;
  --touch:   3rem;          /* taille tactile minimale confortable (48px) */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background: var(--void);
  color: var(--text);
  font-family:'Syne', sans-serif;
  font-size: var(--step);
  line-height: var(--line);
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold); color:#fff; }

.container{ max-width:1080px; margin:0 auto; padding:0 1.5rem; }
h1,h2,h3{ font-family:'Cormorant Garamond', serif; font-weight:600; color:var(--em1); }
h1{ font-size:clamp(2.1rem, 4vw, 3.1rem); line-height:1.15; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); margin-bottom:.75rem; }
h3{ font-size:1.25rem; margin-bottom:.4rem; }
.eyebrow{ font-family:'Space Mono', monospace; font-size:.85rem; letter-spacing:.04em; color:var(--gold2); }
.muted{ color:var(--muted); }

/* ═══ TOPBAR ═══ */
#topbar{
  position:sticky; top:0; z-index:50;
  background:var(--panel); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1080px; margin:0 auto; padding:.85rem 1.5rem;
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
}
.brand{ font-family:'Cormorant Garamond', serif; font-size:1.35rem; font-weight:600; color:var(--em1); white-space:nowrap; }
.brand span{ color:var(--gold); }
#tabs{ display:flex; gap:.5rem; flex-wrap:wrap; flex:1; }
#tabs a{
  display:inline-flex; align-items:center; min-height:var(--touch); border:1px solid transparent; border-radius:999px;
  padding:.6rem 1.15rem; font-size:1rem; font-weight:600; color:var(--text);
}
#tabs a:hover{ border-color:var(--border); }
#tabs a.active{ background:var(--em1); color:#fff; }

main{ padding:2.5rem 0 5rem; }

footer#club-footer{
  text-align:center; padding:2.5rem 1rem; color:var(--muted); font-size:.85rem; border-top:1px solid var(--border); margin-top:2rem;
}
.footer-decouverte{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.2rem; margin-bottom:1rem;
  font-family:'Space Mono', monospace; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
}
.footer-decouverte a{ color:var(--gold2); }
.footer-decouverte a:hover{ color:var(--em1); text-decoration:underline; }
.footer-copy a{ text-decoration:underline; }

@media(max-width:720px){
  .mot-miguel{ flex-direction:column; }

  .topbar-inner{ flex-wrap:wrap; padding:.85rem 1rem; gap:.6rem; }
  .brand{ font-size:1.2rem; }
  /* Navigation entièrement visible, sans défilement caché : une
     grille de boutons que l'on peut tous voir et toucher d'emblée
     — plus sûr pour un public peu habitué aux gestes de balayage. */
  #tabs{
    order:3; flex:1 1 100%; flex-wrap:wrap; display:grid;
    grid-template-columns:repeat(2, 1fr); gap:.55rem;
  }
  #tabs a{ justify-content:center; text-align:center; padding:.7rem .5rem; font-size:.95rem; }
}

@media(max-width:380px){
  #tabs{ grid-template-columns:1fr; }
}

/* ── Barra del sitio de Miguel y fondo 3D (se montan desde assets/js/nav.js) ── */
#vanta-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.8; }
.sitio-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.4rem; flex-wrap: wrap;
  padding: 0.7rem clamp(1rem, 4.5vw, 6rem); background: rgba(207,230,217,0.92); border-bottom: 1px solid rgba(165,130,74,0.3);
}
.sitio-marca { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.4rem; color: #12291c; text-decoration: none; white-space: nowrap; }
.sitio-marca em { font-style: normal; color: #a5824a; }
.sitio-barra nav { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.sitio-barra nav a {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 0.5rem 0.85rem; border-radius: 999px; color: #1a2e24; background: rgba(255,255,255,0.72); border: 1px solid rgba(165,130,74,0.34);
  box-shadow: 0 1px 3px rgba(20,45,32,0.08); transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.sitio-barra nav a:hover { color: #86673a; background: #fff; border-color: #a5824a; transform: translateY(-1px); }
.sitio-barra nav a.club-actual { color: #fff; background: linear-gradient(90deg, #2b4535, #0d7f57); border-color: transparent; }
@media (max-width: 720px) { .sitio-barra { justify-content: center; } .sitio-barra nav a { font-size: 0.74rem; padding: 0.42rem 0.7rem; } }