/* ============ Cuarentita landing - visual style per docs/cuarentita_visual_style_guide.md ============ */
:root {
  --cream: #FFF8E8;
  --ivory: #FFFDF5;
  --beige: #F5E8C9;
  --burgundy: #7A1111;
  --burgundy-dark: #541013;
  --floral-red: #B63822;
  --gold: #C5921E;
  --gold-dark: #8D6412;
  --gold-light: #D8AE42;
  --blue: #123A5A;
  --green: #0B4A2B;
  --orange: #D96D1D;
  --ink: #17120F;
  --night-1: #0c0e24;
  --night-2: #241031;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

/* ============ Header ============ */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
}
.brand-logo { width: clamp(88px, 12vw, 132px); height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.lang-toggle {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: .04em;
  color: var(--burgundy);
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: transform .15s ease;
}
.lang-toggle:hover { transform: scale(1.06); }
.lang-toggle .lang-sep { margin: 0 .35em; color: var(--gold-dark); }
html[lang="es"] .lang-toggle .lang-es,
html[lang="en"] .lang-toggle .lang-en { color: var(--burgundy); }
html[lang="es"] .lang-toggle .lang-en,
html[lang="en"] .lang-toggle .lang-es { color: #b9a06a; font-weight: 700; }

/* ============ Hero / parallax ============ */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, #3a1c4d 0%, var(--night-2) 38%, var(--night-1) 100%);
}
.hero-layers { position: absolute; inset: 0; }
.hero-logo { display: none; }
.hero-layers .layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 112%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center bottom;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.hero-copy {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(92vw, 640px);
  text-align: center;
}
.hero-tagline {
  display: inline-block;
  font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  font-weight: 700;
  color: var(--ivory);
  background: rgba(12, 10, 26, 0.55);
  border: 1.5px solid rgba(197, 146, 30, 0.6);
  border-radius: 14px;
  padding: 0.7rem 1.3rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
  backdrop-filter: blur(3px);
}
.hero-cta { margin-top: 1.1rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.02rem;
  text-decoration: none;
  color: #FFFDF7;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: 3px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 7px 18px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.22); }
.btn-green { background: linear-gradient(180deg, #14663d, var(--green)); }
.btn-blue  { background: linear-gradient(180deg, #1d5580, var(--blue)); }
.scroll-hint {
  position: absolute;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--gold-light);
  font-size: 1.8rem;
  text-decoration: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.9);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ============ Shared section styling ============ */
section { padding: clamp(3rem, 7vw, 5.5rem) 1.4rem; }
.section-title {
  font-family: 'Kaushan Script', cursive;
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  color: var(--burgundy);
  text-align: center;
  margin-bottom: 1.2rem;
  text-shadow: 1px 2px 0 rgba(84, 16, 19, 0.18);
}
.section-title.light { color: var(--cream); text-shadow: 0 3px 8px rgba(0,0,0,.55); }
.lead {
  max-width: 46rem;
  margin: 0 auto 1rem;
  text-align: center;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.65;
}
.lead.light { color: var(--beige); }
.lead strong { color: var(--burgundy); }

/* ============ About ============ */
.about {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 45%, var(--beige) 100%);
  border-top: 6px solid var(--gold);
  border-bottom: 6px solid var(--gold);
}
.about-logo { width: min(78vw, 430px); margin: 0 auto 1.6rem; filter: drop-shadow(0 8px 18px rgba(84,16,19,.25)); }
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.3rem;
  max-width: 62rem;
  margin: 2.4rem auto 0;
}
.feature {
  background: var(--ivory);
  border: 3px solid var(--gold);
  outline: 1.5px solid rgba(122, 17, 17, 0.35);
  outline-offset: -8px;
  border-radius: 18px;
  padding: 1.6rem 1.3rem;
  text-align: center;
  box-shadow: 0 6px 16px rgba(84, 16, 19, 0.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(84,16,19,.18); }
.feature-icon { font-size: 2.1rem; margin-bottom: .5rem; }
.feature h2 { font-size: 1.18rem; font-weight: 900; color: var(--burgundy); margin-bottom: .5rem; }
.feature p { font-size: .98rem; line-height: 1.55; }

/* ============ Table / cards animation ============ */
.table-section {
  position: relative;
  background:
    radial-gradient(90% 70% at 50% 30%, #10613a 0%, var(--green) 55%, #06331d 100%);
  border-top: 10px solid #6b4320;
  border-bottom: 10px solid #6b4320;
  box-shadow: inset 0 8px 0 var(--gold-dark), inset 0 -8px 0 var(--gold-dark);
  overflow: hidden;
}

/* fan of five dealt cards */
.fan {
  position: relative;
  height: clamp(240px, 42vw, 360px);
  max-width: 58rem;
  margin: 2.2rem auto 0;
}
.fan-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(110px, 19vw, 170px);
  margin-left: calc(clamp(110px, 19vw, 170px) / -2);
  transform-origin: 50% 120%;
  transform: rotate(0deg) translateY(26px);
  opacity: 0;
  transition: transform .9s cubic-bezier(.2,.7,.25,1.1), opacity .6s ease;
}
.fan.in-view .fan-card { opacity: 1; }
.fan.in-view .fan-card:nth-child(1) { transform: rotate(-26deg); transition-delay: .00s; }
.fan.in-view .fan-card:nth-child(2) { transform: rotate(-13deg); transition-delay: .08s; }
.fan.in-view .fan-card:nth-child(3) { transform: rotate(  0deg); transition-delay: .16s; }
.fan.in-view .fan-card:nth-child(4) { transform: rotate( 13deg); transition-delay: .24s; }
.fan.in-view .fan-card:nth-child(5) { transform: rotate( 26deg); transition-delay: .32s; }
.fan-card svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
  border-radius: 10px;
  transition: transform .22s ease, filter .22s ease;
}
/* the float animation owns .float-wrap's transform, so the hover lift lives on the svg:
   a running keyframe animation always wins over a normal transform declaration */
.float-wrap { animation: floaty 4.5s ease-in-out infinite; }
.fan-card:nth-child(1) .float-wrap { animation-delay: 0s; }
.fan-card:nth-child(2) .float-wrap { animation-delay: .55s; }
.fan-card:nth-child(3) .float-wrap { animation-delay: 1.1s; }
.fan-card:nth-child(4) .float-wrap { animation-delay: 1.65s; }
.fan-card:nth-child(5) .float-wrap { animation-delay: 2.2s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.fan-card:hover .float-wrap { animation-play-state: paused; }
.fan-card:hover svg { transform: translateY(-16px) scale(1.06); filter: drop-shadow(0 14px 20px rgba(0,0,0,.5)); }

/* deal & flip loop */
.deal-scene {
  position: relative;
  height: clamp(190px, 30vw, 260px);
  max-width: 34rem;
  margin: 2.6rem auto 0;
  perspective: 900px;
}
.deck-pile, .flip-card {
  position: absolute;
  bottom: 12px;
  width: clamp(96px, 16vw, 140px);
}
.deck-pile { left: 8%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.deck-pile::before, .deck-pile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0e2c44;
  border: 2px solid var(--gold-dark);
  border-radius: 10px;
  z-index: -1;
  transform: translate(4px, 4px);
}
.deck-pile::after { transform: translate(8px, 8px); }
.flip-card { left: 8%; animation: deal 5.5s cubic-bezier(.35,.1,.3,1) infinite; }
.flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 180 / 252;
  transform-style: preserve-3d;
  animation: flip 5.5s cubic-bezier(.5,.05,.35,1) infinite;
}
.face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.face.front { transform: rotateY(180deg); }
@keyframes deal {
  0%, 12%   { left: 8%; }
  45%, 88%  { left: 62%; }
  100%      { left: 8%; }
}
@keyframes flip {
  0%, 12%   { transform: rotateY(0deg); }
  45%, 82%  { transform: rotateY(180deg); }
  96%, 100% { transform: rotateY(360deg); }
}
.table-note {
  margin-top: 2rem;
  text-align: center;
  color: var(--beige);
  font-size: .95rem;
  font-style: italic;
  opacity: .85;
}

/* ============ How to play ============ */
.howto {
  background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 55%, var(--beige) 100%);
  border-bottom: 6px solid var(--gold);
}
.basics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  max-width: 58rem;
  margin: 2rem auto;
}
.basic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
  background: var(--ivory);
  border: 3px solid var(--gold);
  border-radius: 16px;
  padding: 1.1rem .9rem;
  box-shadow: 0 5px 12px rgba(84,16,19,.1);
}
.basic-num {
  font-family: 'Kaushan Script', cursive;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--burgundy);
  text-shadow: 1px 2px 0 rgba(84,16,19,.18);
}
.basic-label { font-size: .92rem; line-height: 1.4; font-weight: 700; color: var(--ink); }
.howto-capture { max-width: 42rem; }
.howto-subtitle {
  font-family: 'Kaushan Script', cursive;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: var(--blue);
  text-align: center;
  margin: 2.6rem 0 1.4rem;
}

/* play demos */
.plays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.3rem;
  max-width: 62rem;
  margin: 0 auto;
}
.play {
  background: var(--ivory);
  border: 3px solid var(--gold);
  border-radius: 18px;
  padding: 1.2rem 1.2rem 1.5rem;
  text-align: center;
  box-shadow: 0 6px 16px rgba(84,16,19,.12);
}
.play h3 {
  font-family: 'Kaushan Script', cursive;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--burgundy);
  margin: .9rem 0 .45rem;
}
.play p { font-size: .95rem; line-height: 1.55; }
.stage {
  position: relative;
  height: 190px;
  border-radius: 14px;
  background: radial-gradient(85% 80% at 50% 42%, #10613a 0%, var(--green) 70%, #06331d 100%);
  border: 2.5px solid var(--gold-dark);
  box-shadow: inset 0 0 0 2px rgba(197,146,30,.35), inset 0 6px 18px rgba(0,0,0,.35);
  overflow: hidden;
}
.stage { --cw: 84px; }
@media (max-width: 430px) { .stage { --cw: 68px; } }
.stage .pc {
  position: absolute;
  width: var(--cw);
  height: auto;
  filter: drop-shadow(0 6px 9px rgba(0,0,0,.45));
  border-radius: 6px;
}
.pts-badge {
  position: absolute;
  top: 10px; right: 12px;
  font-family: 'Kaushan Script', cursive;
  font-size: 1.5rem;
  color: var(--cream);
  background: linear-gradient(180deg, #14663d, var(--green));
  border: 2.5px solid var(--gold);
  border-radius: 999px;
  padding: .12rem .75rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
  opacity: 0;
}
.stage.run .pts-badge { animation: pts-pop var(--loop, 5.5s) ease-in-out infinite; }
@keyframes pts-pop {
  0%, 38%   { opacity: 0; transform: scale(.4); }
  46%       { opacity: 1; transform: scale(1.18); }
  51%       { transform: scale(1); }
  86%       { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* caída: rival card waits, your equal card slams on top */
.stage-caida { --loop: 5.5s; }
.stage-caida .pc-thrown { left: calc(50% - var(--cw) * 0.69); top: 44px; transform: rotate(-6deg); }
.stage-caida .pc-drop   { left: calc(50% - var(--cw) * 0.21); top: 30px; opacity: 0; transform: translate(70px,-130px) rotate(24deg); }
.stage-caida.run .pc-thrown { animation: caida-wait var(--loop) ease-in-out infinite; }
.stage-caida.run .pc-drop   { animation: caida-drop var(--loop) cubic-bezier(.5,.05,.4,1) infinite; }
@keyframes caida-wait {
  0%, 8%    { opacity: 0; transform: rotate(-6deg) translateY(-14px); }
  16%, 88%  { opacity: 1; transform: rotate(-6deg) translateY(0); }
  96%, 100% { opacity: 0; }
}
@keyframes caida-drop {
  0%, 30%   { opacity: 0; transform: translate(70px,-130px) rotate(24deg); }
  42%       { opacity: 1; transform: translate(3px,4px) rotate(8deg); }
  46%       { transform: translate(0,0) rotate(5deg); }
  88%       { opacity: 1; transform: translate(0,0) rotate(5deg); }
  96%, 100% { opacity: 0; transform: translate(0,0) rotate(5deg); }
}

/* ronda: three equal cards rise in a wave */
.stage-ronda { --loop: 4.2s; }
.stage-ronda .pc { top: 52px; }
.stage-ronda .pc-r1 { left: calc(50% - var(--cw) * 1.4); transform: rotate(-8deg); }
.stage-ronda .pc-r2 { left: calc(50% - var(--cw) * 0.5); transform: rotate(0deg); }
.stage-ronda .pc-r3 { left: calc(50% + var(--cw) * 0.4); transform: rotate(8deg); }
.stage-ronda.run .pc { animation: ronda-lift var(--loop) ease-in-out infinite; }
.stage-ronda.run .pc-r1 { --rot: -8deg; animation-delay: 0s; }
.stage-ronda.run .pc-r2 { --rot: 0deg;  animation-delay: .28s; }
.stage-ronda.run .pc-r3 { --rot: 8deg;  animation-delay: .56s; }
@keyframes ronda-lift {
  0%, 26%   { transform: rotate(var(--rot, 0deg)) translateY(0); filter: drop-shadow(0 6px 9px rgba(0,0,0,.45)); }
  38%       { transform: rotate(var(--rot, 0deg)) translateY(-16px); filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(216,174,66,.85)); }
  54%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); filter: drop-shadow(0 6px 9px rgba(0,0,0,.45)); }
}

/* limpia: 5 + 2 wait on the felt, the 7 arrives and sweeps everything away */
.stage-limpia { --loop: 6.5s; }
.stage-limpia .pc-t1 { left: calc(50% - var(--cw) * 1.14); top: 48px; transform: rotate(-7deg); }
.stage-limpia .pc-t2 { left: calc(50% - var(--cw) * 0.05); top: 52px; transform: rotate(6deg); }
.stage-limpia .pc-cap { left: 100%; top: 44px; opacity: 0; transform: rotate(18deg); }
.stage-limpia.run .pc-t1 { animation: limpia-t1 var(--loop) ease-in-out infinite; }
.stage-limpia.run .pc-t2 { animation: limpia-t2 var(--loop) ease-in-out infinite; }
.stage-limpia.run .pc-cap { animation: limpia-cap var(--loop) cubic-bezier(.4,.1,.4,1) infinite; }
@keyframes limpia-t1 {
  0%       { opacity: 0; transform: rotate(-7deg) translateY(-10px); }
  10%, 62% { opacity: 1; transform: rotate(-7deg) translateY(0); }
  76%, 92% { opacity: 0; transform: rotate(-14deg) translate(-30px,-130px) scale(.82); }
  100%     { opacity: 0; transform: rotate(-7deg) translateY(-10px); }
}
@keyframes limpia-t2 {
  0%       { opacity: 0; transform: rotate(6deg) translateY(-10px); }
  10%, 62% { opacity: 1; transform: rotate(6deg) translateY(0); }
  76%, 92% { opacity: 0; transform: rotate(12deg) translate(6px,-136px) scale(.82); }
  100%     { opacity: 0; transform: rotate(6deg) translateY(-10px); }
}
@keyframes limpia-cap {
  0%, 22%  { opacity: 0; left: 100%; transform: rotate(18deg); }
  36%, 62% { opacity: 1; left: calc(50% + var(--cw) * 0.48); transform: rotate(4deg); }
  76%, 92% { opacity: 0; left: calc(50% + var(--cw) * 0.48); transform: rotate(10deg) translate(40px,-140px) scale(.82); }
  100%     { opacity: 0; left: 100%; transform: rotate(18deg); }
}

/* score plaque */
.score-plaque {
  max-width: 46rem;
  margin: 2.8rem auto 0;
  background: var(--ivory);
  border: 3px solid var(--gold);
  outline: 1.5px solid rgba(122,17,17,.35);
  outline-offset: -8px;
  border-radius: 18px;
  padding: 1.6rem 1.6rem 1.8rem;
  box-shadow: 0 6px 16px rgba(84,16,19,.12);
}
.score-plaque .howto-subtitle { margin: 0 0 1.1rem; }
.score-ladder {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem;
  text-align: center;
}
.score-ladder li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-weight: 900;
  font-size: .95rem;
  color: var(--ink);
}
.chip {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--gold-dark);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 3px 6px rgba(0,0,0,.25);
}
.chip-tanto { background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold)); }
.chip-perro { background: radial-gradient(circle at 35% 30%, #d4553d, var(--floral-red)); }
.chip-chica { background: radial-gradient(circle at 35% 30%, #1d5580, var(--blue)); }
.chip-mesa  { background: radial-gradient(circle at 35% 30%, #14663d, var(--green)); }
.score-note {
  margin-top: 1.1rem;
  text-align: center;
  font-size: .95rem;
  line-height: 1.55;
}
.score-note.zapateria { color: var(--burgundy); font-weight: 700; }

/* ============ Dichos ticker ============ */
.dichos {
  background: linear-gradient(180deg, var(--burgundy), var(--burgundy-dark));
  border-bottom: 6px solid var(--gold);
  padding: 2rem 0 2.3rem;
  overflow: hidden;
}
.dichos-title {
  font-family: 'Kaushan Script', cursive;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--cream);
  text-align: center;
  margin-bottom: 1.2rem;
}
.dichos-ticker { overflow: hidden; width: 100%; }
.dichos-track {
  display: inline-flex;
  gap: 1rem;
  white-space: nowrap;
  width: max-content;
  animation: dichos-scroll 42s linear infinite;
}
.dichos-ticker:hover .dichos-track { animation-play-state: paused; }
.dichos-track span {
  display: inline-block;
  font-family: 'Kaushan Script', cursive;
  font-size: 1.15rem;
  color: var(--burgundy);
  background: var(--cream);
  border: 2.5px solid var(--gold);
  border-radius: 999px;
  padding: .4rem 1.1rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
@keyframes dichos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ Social ============ */
.social { background: linear-gradient(180deg, var(--cream), var(--ivory)); text-align: center; }
.social-avatar {
  width: clamp(120px, 20vw, 180px);
  margin: 0 auto 1.2rem;
  filter: drop-shadow(0 6px 14px rgba(84,16,19,.3));
  transition: transform .25s ease;
}
.social-avatar:hover { transform: rotate(-4deg) scale(1.05); }
.social-links {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  background: var(--ivory);
  border: 3px solid var(--gold);
  border-radius: 18px;
  padding: 1.2rem 1.6rem;
  min-width: 158px;
  box-shadow: 0 5px 14px rgba(84,16,19,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.social-link:hover { transform: translateY(-5px); box-shadow: 0 11px 22px rgba(84,16,19,.2); }
.social-medallion {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(180deg, #1d5580, var(--blue));
  border: 2.5px solid var(--gold);
  color: #FFFDF7;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25);
}
.social-medallion svg { width: 28px; height: 28px; }
.social-name { font-weight: 900; color: var(--blue); font-size: 1.05rem; }
.social-handle { font-size: .88rem; color: var(--burgundy); font-weight: 700; }

/* ============ Footer ============ */
.site-footer {
  background: linear-gradient(180deg, var(--burgundy), var(--burgundy-dark));
  border-top: 6px solid var(--gold);
  color: var(--cream);
  text-align: center;
  padding: 2.6rem 1.4rem 2rem;
}
.footer-logo { width: 150px; margin: 0 auto 1rem; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.site-footer p { font-size: 1rem; }
.footer-fine { margin-top: .5rem; font-size: .85rem; opacity: .8; }

/* ============ Motion preferences ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-layers .layer { transform: translateX(-50%) !important; }
  .float-wrap, .scroll-hint, .flip-card, .flip-inner,
  .stage .pc, .pts-badge, .dichos-track { animation: none !important; }
  .fan-card { transition: none; }
  .stage .pc, .pts-badge { opacity: 1 !important; }
  .stage-caida .pc-drop { transform: translate(0,0) rotate(5deg) !important; }
  .stage-limpia .pc-cap { left: calc(50% + var(--cw) * 0.48) !important; opacity: 1 !important; transform: rotate(4deg) !important; }
  .dichos-ticker { overflow-x: auto; }
}

/* Viewport narrower than the artwork (941x1672 ≈ 9/16): cover would slice the
   Cuarentita plaque off both edges, so fit the whole scene and let the night
   gradient fill above it. All layers share one source size, so they stay in register. */
@media (max-aspect-ratio: 9/16) {
  .hero-layers .layer { object-fit: contain; height: 100%; }
  .hero-copy { top: auto; bottom: 12%; transform: translateX(-50%); }
}

/* ============ Small screens ============ */
@media (max-width: 560px) {
  .hero-copy { top: 50%; }
  .hero-tagline { font-size: 1.02rem; padding: .6rem 1rem; }
  .btn { font-size: .95rem; padding: .65rem 1.3rem; }
  .social-links { gap: .8rem; }
  .social-link { min-width: 132px; padding: 1rem 1.1rem; }
}
/* ============ Wide / landscape hero: text panel left, portrait art column right ============ */
@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .hero::before {
    content: "";
    position: absolute;
    inset: -30px;
    background: url("/assets/img/parallax-1-mountains.webp") center 30% / cover no-repeat;
    filter: blur(16px) brightness(0.45) saturate(1.1);
  }
  .hero-layers {
    left: auto;
    right: 4vw;
    width: clamp(300px, calc(100svh * 0.563), 46vw);
    overflow: visible;
  }
  .hero-layers .layer { height: 108%; }
  .hero-layers .layer-logo { display: none; } /* the plaque moves to the text panel on wide screens */
  .hero-copy {
    left: 0;
    right: calc(4vw + clamp(300px, calc(100svh * 0.563), 46vw));
    top: 50%;
    width: auto;
    transform: translateY(-50%);
    padding: 0 3vw 0 6vw;
  }
  .hero-logo {
    display: block;
    width: min(30vw, 420px);
    margin: 0 auto 1.4rem;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.55));
  }
  .site-header .brand { visibility: hidden; } /* the hero shows the main logo itself */
  .hero-tagline { font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
}