/* Melilla Titans — base.css · variables, reset, tipografía, botones, utilidades
   Generado en la modularización 2.0.0 a partir de main.css. */

/* ========================================================================
   MELILLA TITANS — main.css · POSTER EDITION (v20)
   Cinematic Social Studio
   ------------------------------------------------------------------------
   Complete consolidation of v1-v19 + theme-jersey into the jersey-poster
   design system: paper as dominant surface, strategic navy blocks framed
   in gold (stats, tienda, contacto, footer), champagne-gold accents and
   "dorsal" numerals (gold fill + navy stroke). All selectors used by the
   views are preserved. theme-jersey.css is now superseded (empty).
   ======================================================================== */

:root{
  /* Brand */
  --navy:#0A1A3E;
  --navy-deep:#060F2A;
  --gold:#D4B76A;
  --gold-bright:#E4CB7F;
  --gold-deep:#A0894C;
  --paper:#FDFCF9;
  --paper-warm:#F5F1E8;
  --paper-deep:#EFE9DA;
  --white:#ffffff;

  /* Ink (text on paper) */
  --ink:#0A1A3E;
  --ink-soft:rgba(10,26,62,.78);
  --ink-mute:rgba(10,26,62,.52);

  /* Hairlines */
  --hair:rgba(10,26,62,.12);              /* on paper (default surface) */
  --hair-strong:rgba(10,26,62,.25);
  --hair-on-navy:rgba(255,255,255,.12);
  --hair-on-navy-strong:rgba(255,255,255,.22);

  /* On-navy text */
  --on-navy:#C5D0E8;
  --on-navy-mute:#8595bd;
  --muted:#8595bd;                        /* legacy alias (was on-navy gray) */

  /* Legacy aliases so older inline styles keep resolving sensibly */
  --yellow:var(--gold);
  --cream:var(--paper-warm);
  --on-cream:var(--ink-soft);
  --on-cream-mute:var(--ink-mute);
  --hair-on-cream:var(--hair);
  --hair-on-cream-strong:var(--hair-strong);
  --hair-navy:var(--hair-strong);
  --muted-y:var(--ink-mute);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(180deg,#FFFFFF 0%,var(--paper-warm) 55%,var(--paper-deep) 100%);
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;
}
/* Jersey pinstripes over the whole paper canvas */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right,transparent 0,transparent 55px,rgba(10,26,62,.028) 55px,rgba(10,26,62,.028) 56px);
  background-size:56px 100%;
}
::selection{background:var(--gold);color:var(--navy)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
section,header.hero,footer{position:relative;z-index:1}

/* Gold frame lines (poster edges) */
.frame-line{position:fixed;left:0;right:0;height:3px;background:var(--gold);z-index:95}
.frame-line.top{top:0}
.frame-line.bottom{bottom:0}

/* ===== type system ===== */
.display{font-family:'Big Shoulders Display',sans-serif;text-transform:uppercase;line-height:.86;letter-spacing:-.012em}
.tech{font-family:'Inter';font-weight:600;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
text[font-family*="Big Shoulders"]{font-weight:700}

/* Dorsal numeral treatment (gold fill + navy outline) */
.gn,
.stat .v em,
.bm-head .side .nb,
.cont-head .l .nb,
.bm .row .idx,
.player .photo .num,
.team-header .num{
  color:var(--gold);
  -webkit-text-stroke:2px var(--navy);
  paint-order:stroke fill;
  font-style:normal;
}


/* ===== buttons ===== */
.btn{font-family:'Inter';font-weight:800;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 26px;cursor:pointer;border:none;transition:.2s;display:inline-flex;align-items:center;gap:9px}
.btn-y,.btn-primary-on-y,.btn-primary-on-n{background:var(--navy);color:#fff;border-bottom:3px solid var(--gold)}
.btn-y:hover,.btn-primary-on-y:hover,.btn-primary-on-n:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn-o{background:transparent;color:var(--navy);border:1px solid var(--hair-strong);border-bottom:2px solid var(--gold)}
.btn-o:hover{border-color:var(--navy);color:var(--navy)}
.btn-d{background:var(--navy);color:var(--gold);border:1px solid var(--navy)}
.btn-d:hover{background:var(--navy-deep);color:#fff}

/* Gold buttons for navy surfaces */
.cont .btn-primary-on-n,.feat.f-tienda .btn-primary-on-n{
  background:var(--gold);color:var(--navy);border-bottom:none}
.cont .btn-primary-on-n:hover,.feat.f-tienda .btn-primary-on-n:hover{background:var(--gold-bright)}


/* ===== bg-mark helmet watermarks (paper sections) ===== */
.hero,.origen,.feat.flip,.staff{position:relative;overflow:hidden}
.bg-mark{position:absolute;pointer-events:none;color:var(--navy);opacity:.04;z-index:0;
  width:1200px;height:1080px;transform-origin:center}
.bg-mark.pos-1{bottom:-560px;left:-380px;transform:rotate(-14deg)}
.bg-mark.pos-2{top:-480px;right:-360px;transform:rotate(22deg);width:1100px;height:1000px}
.bg-mark.pos-3{top:50%;right:-620px;transform:translateY(-50%) rotate(-28deg);width:1300px;height:1180px;opacity:.045}
.bg-mark.pos-4{bottom:-520px;right:-300px;transform:rotate(10deg);width:1050px;height:950px}
.hero > .hero-inner,.hero > .stats,
.origen > .origen-head,.origen > .origen-body,
.feat.flip > .body,.feat.flip > .vis,
.staff > .staff-head,.staff > .staff-grid{position:relative;z-index:1}


/* ===== scroll reveal ===== */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .75s ease-out,transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.hero.reveal{opacity:1;transform:none}


@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}}