/* ==========================================================================
   MESTALLA — historia de un campo
   Paleta: blanco (principal) + colores históricos del Valencia CF (acentos)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* base — blanco */
  --white:#ffffff;
  --paper:#faf8f5;
  --ink:#15171c;
  --ink-soft:#3a3d44;
  --line: rgba(15,17,20,.1);

  /* acentos históricos del Valencia CF */
  --black:#111214;
  --orange:#ec6a1e;
  --orange-dark:#b6490c;
  --senyera-red:#c8102e;
  --senyera-yellow:#ffc72c;
  --blue:#1c4e9c;
  --sepia:#8a6b46;
  --claret:#7a2e2e;
  --water:#0e3a5f;

  --accent: var(--orange);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.era-title,.brand-text{
  font-family:'Fraunces', Georgia, serif;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

::selection{ background:var(--orange); color:#fff; }

/* ---------- progress bar ---------- */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--senyera-yellow), var(--orange), var(--senyera-red));
  z-index:1000; transition:width .08s linear;
}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  background:var(--black);
  color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-family:'Fraunces',serif; font-size:1.1rem;
  flex:none;
}
.brand-text{ font-weight:600; letter-spacing:.03em; font-size:1rem; line-height:1.1; color:var(--ink); }
.brand-text em{ display:block; font-style:normal; font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }

.main-nav{ display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; }
.main-nav::-webkit-scrollbar{ display:none; }
.main-nav a{
  text-decoration:none; font-size:.82rem; font-weight:600; color:var(--ink-soft);
  white-space:nowrap; padding:6px 2px; border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.main-nav a:hover{ color:var(--orange); border-color:var(--orange); }

/* ---------- side timeline rail ---------- */
.timeline-rail{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:850; display:flex; flex-direction:column; gap:13px;
  align-items:flex-end;
}
.rail-dot{
  position:relative; display:flex; align-items:center; gap:8px;
  text-decoration:none;
}
.rail-dot span{
  width:8px; height:8px; border-radius:50%;
  background:var(--line); border:1px solid rgba(15,17,20,.25);
  transition:all .25s ease;
}
.rail-dot::before{
  content:attr(data-year);
  font-size:.68rem; font-weight:600; color:var(--ink-soft);
  opacity:0; transform:translateX(6px);
  transition:all .2s ease;
  white-space:nowrap;
}
.rail-dot:hover::before{ opacity:1; transform:translateX(0); }
.rail-dot.active span{
  background:var(--accent-rail, var(--orange));
  border-color:var(--accent-rail, var(--orange));
  transform:scale(1.5);
  box-shadow:0 0 0 4px rgba(236,106,30,.15);
}
.rail-dot.active::before{ opacity:1; transform:translateX(0); color:var(--ink); }

@media (max-width:1050px){ .timeline-rail{ display:none; } }

/* ---------- intro note ---------- */
.intro-note{
  max-width:720px; margin:0 auto; padding:64px 28px;
  text-align:center;
}
.intro-note p{
  font-size:1.02rem; line-height:1.75; color:var(--ink-soft);
}
.intro-note a{ color:var(--orange-dark); font-weight:600; text-decoration:underline; }

/* ---------- era sections (parallax) ---------- */
.era{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:80px 0;
}
.era.compact{ min-height:46vh; padding:60px 0; }

.era-bg{
  position:absolute;
  inset:-25% -25%;
  background-size:cover;
  background-position:center;
  will-change:transform;
  transition:transform .05s linear;
}
.era-overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.28) 42%, rgba(255,255,255,.1) 70%, rgba(255,255,255,.02) 100%);
}
.era-overlay.dark{
  background:linear-gradient(120deg, rgba(10,11,13,.62) 0%, rgba(10,11,13,.38) 45%, rgba(10,11,13,.14) 75%, rgba(10,11,13,.02) 100%);
}
.era-overlay.dark.strong{
  background:linear-gradient(180deg, rgba(6,7,9,.28) 0%, rgba(6,7,9,.5) 55%, rgba(6,7,9,.62) 100%);
}
.era-overlay-plain{ position:absolute; inset:0; background:var(--paper); }

.era-content{
  position:relative; z-index:2;
  max-width:560px;
  margin:0 40px 0 80px;
  padding:36px 40px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-radius:3px;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 70px rgba(15,17,20,.16);
}
.era-content.light-on-dark{
  background:rgba(8,9,11,.62);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.era-content.wide{
  background:rgba(8,9,11,.52);
}
.era-overlay-plain ~ .era-content{
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border:none; box-shadow:none;
}
.era-content.wide{ max-width:920px; }
.era-content.align-left{ margin-right:auto; }
.era-content.align-right{ margin-left:auto; margin-right:80px; text-align:right; }
.era-content.align-right .stat-chip{ margin-left:auto; }
.era-content.align-center{ margin:0 auto; text-align:center; max-width:680px; }
.era-content.align-center.wide{ max-width:980px; }
.era-content.light-on-dark{ color:#fff; }
.era-content.light-on-dark .era-body p{ color:rgba(255,255,255,.85); }
.era-content.light-on-dark .era-lead{ color:rgba(255,255,255,.85); }
/* On dark panels the thematic accent can be too dark to read (e.g. black, blue,
   sepia) — always force a bright, legible accent for the kicker + stat chips. */
.era-content.light-on-dark .era-kicker{ color:var(--orange); border-color:var(--orange); }
.era-content.light-on-dark .stat-chip{ color:var(--senyera-yellow); border-color:var(--senyera-yellow); }

.era-kicker{
  display:inline-block;
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:2px solid var(--accent);
}
.era-title{
  font-size:clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight:600;
  line-height:1.12;
  margin:0 0 20px;
}
.era-body p{
  font-size:1.02rem; line-height:1.75; color:var(--ink-soft);
  margin:0 0 16px;
}
.era-lead{ font-size:1.12rem; line-height:1.7; color:var(--ink-soft); margin:0 auto 36px; max-width:640px; }
.era-footnote{ font-size:.88rem; line-height:1.65; color:rgba(255,255,255,.78); margin-top:30px; max-width:760px; margin-left:auto; margin-right:auto; }

/* opacity/translate reveal, toggled by JS */
.era-content, .era-figure{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.era.in-view .era-content, .era.in-view .era-figure{ opacity:1; transform:none; }

/* accent per era */
.era[data-accent="orange"]{ --accent: var(--orange-dark); }
.era[data-accent="black"]{ --accent: var(--black); }
.era[data-accent="sepia"]{ --accent: var(--sepia); }
.era[data-accent="claret"]{ --accent: var(--claret); }
.era[data-accent="water"]{ --accent: var(--senyera-yellow); }
.era[data-accent="senyera"]{ --accent: var(--senyera-red); }
.era[data-accent="blue"]{ --accent: var(--blue); }

/* stat chip */
.stat-chip{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  font-family:'Fraunces',serif; font-weight:700; font-size:2rem; line-height:1;
  color:var(--accent);
  border-left:3px solid var(--accent);
  padding-left:14px; margin-top:8px;
}
.stat-chip small{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-top:4px;
}
.stat-chip.dark small{ color:rgba(255,255,255,.7); }

/* secondary figure (Algirós newspaper) */
.era-figure.secondary-figure{
  margin-top:26px; max-width:340px;
  background:#fff; padding:10px 10px 14px; box-shadow:0 18px 40px rgba(15,17,20,.18);
  border:1px solid var(--line);
}
.era-figure.secondary-figure img{ width:100%; }
.figure-caption{
  display:block; font-size:.72rem; color:var(--ink-soft); margin-top:8px; text-align:center;
}

/* ---------- hero ---------- */
.hero-era{ min-height:100vh; }
.hero-overlay{
  background:linear-gradient(180deg, rgba(6,7,9,.35) 0%, rgba(6,7,9,.55) 55%, rgba(6,7,9,.85) 100%);
}
.hero-content{
  position:relative; z-index:2; color:#fff;
  max-width:760px; margin:0 auto; padding:0 28px;
  text-align:center;
}
.hero-kicker{
  font-size:.82rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); margin-bottom:18px;
}
.hero-title{
  font-size:clamp(3.4rem, 11vw, 8rem);
  font-weight:700; letter-spacing:.02em; margin:0 0 22px;
  line-height:.95;
}
.hero-sub{ font-size:clamp(1rem,2vw,1.2rem); line-height:1.7; color:rgba(255,255,255,.88); max-width:600px; margin:0 auto 40px; }
.scroll-cue{
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; color:#fff; font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.scroll-cue i{
  width:1px; height:44px; background:linear-gradient(#fff, transparent);
  position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:''; position:absolute; top:0; left:0; width:100%; height:14px;
  background:var(--orange);
  animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{ transform:translateY(-14px); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translateY(44px); opacity:0; }
}

/* ---------- flood eras (riada / dana) ---------- */
.flood-era .era-overlay.dark.strong{
  background:
    linear-gradient(180deg, rgba(5,15,25,.5) 0%, rgba(5,15,25,.86) 60%, rgba(5,15,25,.94) 100%);
}

/* ---------- legends grid ---------- */
.legends-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:8px;
  text-align:left;
}
.legend-card{
  margin:0; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden; border-radius:2px;
  transition:transform .25s ease, border-color .25s ease;
}
.legend-card:hover{ transform:translateY(-6px); border-color:var(--orange); }
.legend-card img{ width:100%; height:190px; object-fit:cover; filter:grayscale(.15) contrast(1.05); }
.legend-card figcaption{ padding:12px 14px 16px; }
.legend-card figcaption strong{ display:block; font-family:'Fraunces',serif; font-size:1rem; color:#fff; margin-bottom:4px; }
.legend-card figcaption span{ display:block; font-size:.74rem; color:rgba(255,255,255,.6); }
.legend-card.highlight{ border-color:var(--orange); background:rgba(236,106,30,.12); }

@media (max-width:900px){
  .legends-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .legends-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .legend-card img{ height:140px; }
}

/* ---------- future / nou mestalla ---------- */
.future-era{ background:var(--paper); }
.future-graphic{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.petal{
  position:absolute; border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
  opacity:.5; will-change: transform;
}
.p1{ width:340px; height:340px; background:var(--orange); top:-80px; left:-100px; opacity:.18; }
.p2{ width:220px; height:220px; background:var(--black); bottom:10%; left:6%; opacity:.08; }
.p3{ width:280px; height:280px; background:var(--senyera-yellow); top:12%; right:-90px; opacity:.22; }
.p4{ width:180px; height:180px; background:var(--senyera-red); bottom:-60px; right:14%; opacity:.14; }
.p5{ width:140px; height:140px; background:var(--orange); top:46%; left:42%; opacity:.1; }
.p6{ width:100px; height:100px; background:var(--black); top:20%; left:30%; opacity:.06; }

/* ---------- footer ---------- */
.site-footer{
  background:var(--black); color:rgba(255,255,255,.7);
  padding:56px 28px 40px; text-align:center;
}
.footer-title{ font-family:'Fraunces',serif; color:#fff; font-size:1.3rem; margin:0 0 10px; }
.footer-text{ font-size:.85rem; margin:0 0 14px; color:rgba(255,255,255,.55); }
.footer-sources{ font-size:.78rem; max-width:720px; margin:0 auto; line-height:1.8; color:rgba(255,255,255,.5); }
.footer-sources a{ color:var(--orange); text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .site-header{ padding:12px 16px; }
  .main-nav{ gap:14px; max-width:52vw; }
  .era-content{ margin:0 20px; max-width:none; padding:26px; }
  .era-content.align-right{ margin:0 20px; text-align:left; }
  .era-content.align-right .stat-chip{ margin-left:0; }
  .era-content.wide{ max-width:none; }
  .hero-title{ font-size:clamp(2.6rem, 15vw, 5rem); }
  .era{ padding:60px 0; }
}
@media (max-width:480px){
  .brand-text em{ display:none; }
  .era-content{ padding:20px; }
  .era-title{ font-size:1.6rem; }
}

/* ---------- fan culture graphics ---------- */
.fans-stat-row{
  display:flex; gap:28px; flex-wrap:wrap; margin-top:10px;
}
.curva-era{ background:var(--black); }
.secondary-figure.figure-large{ max-width:440px; }

/* ---------- protest gallery (Lim Go Home) ---------- */
.protest-era{ background:#0a0a0a; }
.protest-gallery{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:32px;
}
.protest-photo{ margin:0; }
.protest-photo img{
  width:100%; height:220px; object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.protest-photo figcaption{
  font-size:.76rem; color:rgba(255,255,255,.6); margin-top:10px;
}
@media (max-width:600px){
  .protest-gallery{ grid-template-columns:1fr; }
}

/* ---------- no-js safety net ---------- */
.no-js .era-content, .no-js .era-figure{ opacity:1 !important; transform:none !important; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  /* parallax stays on, just dampened in main.js — not fully disabled */
  .scroll-cue i::after{ animation:none; }
}