/* Farm Rodeo — base: fuentes, colores, tipografía y piezas que se repiten (letreros, postales, HUD). */

@font-face {
  font-family: "Rye";
  src: url("../fonts/rye-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}
@font-face {
  font-family: "Rye";
  src: url("../fonts/rye-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF;
}

:root {
  --crema: #fff6e3;
  --crema-2: #f6e4bd;
  --papel: #fffbf0;
  --tinta: #3b200e;
  --madera: #8a4f25;
  --madera-osc: #4a2810;
  --rojo: #c8382b;
  --rojo-osc: #8f2219;
  --oro: #f2b53c;
  --oro-claro: #ffd66b;
  --verde: #5e9e33;
  --verde-osc: #2f5e1e;
  --noche: #10153a;
  --rebote: cubic-bezier(.3, 1.55, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.traduciendo body { opacity: 0; }
body {
  margin: 0;
  font-family: "Baloo 2", ui-rounded, "Segoe UI", sans-serif;
  font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--crema);
  overflow-x: hidden;
  transition: opacity .25s ease;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--madera-osc); color: var(--crema); padding: .4em .9em; border-radius: 8px;
}
.saltar:focus { top: 12px; }

.contenedor { max-width: 1160px; margin: 0 auto; }
.seccion { position: relative; padding: clamp(72px, 10vw, 128px) 16px; }

/* Títulos: rojo con contorno crema y canto de madera, como el «Rodeo» del logo */
.titulo {
  display: block;
  font-family: "Rye", Georgia, serif;
  font-size: clamp(2.05rem, 1.3rem + 3.2vw, 3.7rem);
  line-height: 1.12;
  color: var(--rojo);
  -webkit-text-stroke: .16em var(--crema);
  paint-order: stroke fill;
  text-shadow: 0 .09em 0 var(--madera-osc);
  text-wrap: balance;
}
.kicker {
  display: inline-flex; align-items: center; gap: .6em;
  margin-bottom: .7rem;
  font-weight: 800; font-size: .86rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-osc);
}
.kicker::before, .kicker::after {
  content: ""; width: .95em; aspect-ratio: 1; background: var(--oro);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.kicker--claro { color: var(--oro-claro); }

/* Letrero de madera con clavos */
.letrero {
  --giro: 0deg;
  position: relative;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .55em 1.35em .5em;
  font-weight: 800; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); text-decoration: none;
  color: #fff1d0;
  background:
    url("../img/vetas.svg") center / 300px 150px,
    linear-gradient(180deg, #b7763f, #8f5427 58%, #74401d);
  border: 3px solid var(--madera-osc);
  border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 222, 170, .4), inset 0 -3px 0 rgba(0, 0, 0, .25),
              0 5px 0 var(--madera-osc), 0 12px 20px -6px rgba(40, 18, 4, .55);
  text-shadow: 0 2px 0 rgba(40, 18, 4, .6);
  rotate: var(--giro);
  transform-origin: 50% -30%;
  /* Balanceo con transición elástica (no con animation: si no, al salir el ratón se reiniciaría la entrada) */
  transition: rotate .7s cubic-bezier(.25, 2.4, .45, 1);
}
.letrero::before, .letrero::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3e3c3, #8c7a5e 60%, #3c3022);
}
.letrero::before { left: 8px; }
.letrero::after { right: 8px; }
.letrero .icono { width: 1.25em; height: 1.25em; flex: none; filter: drop-shadow(0 2px 0 rgba(40, 18, 4, .6)); }
.letrero:hover { rotate: calc(var(--giro) + 3deg); }
.plataformas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; padding: 0; list-style: none; }
.plataformas .letrero:nth-child(1) { --giro: -2.5deg; }
.plataformas .letrero:nth-child(2) { --giro: 1.5deg; }
.plataformas .letrero:nth-child(3) { --giro: -1deg; }

/* Postal de papel (marco tipo polaroid) */
.postal {
  --giro: 0deg;
  position: relative;
  padding: 12px 12px 16px;
  background: var(--papel);
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(74, 40, 16, .08), 0 22px 34px -14px rgba(60, 30, 10, .5);
  rotate: var(--giro);
}
.postal img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.postal--cinta::before {
  content: ""; position: absolute; z-index: 2; top: -15px; left: 50%; width: 120px; height: 32px;
  translate: -50% 0; rotate: -4deg;
  background: rgba(255, 228, 150, .78);
  box-shadow: 0 1px 3px rgba(60, 30, 10, .2);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}
.etiqueta-arte {
  position: absolute; right: 20px; bottom: 24px;
  padding: .05em .65em; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: #fff1d0; background: rgba(59, 32, 14, .72);
}

/* HUD: reloj del día e idioma */
.hud {
  position: fixed; z-index: 50; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.reloj, .idioma {
  display: flex; align-items: center;
  background: var(--crema); border: 3px solid var(--madera-osc); border-radius: 999px;
  box-shadow: 0 4px 0 var(--madera-osc), 0 10px 18px -8px rgba(40, 18, 4, .5);
  font-weight: 800;
}
.reloj { gap: .45em; padding: .2em .9em .2em .25em; font-size: .95rem; font-variant-numeric: tabular-nums; }
.reloj__icono {
  display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  color: #fff6c8; background: radial-gradient(circle at 35% 35%, #ffd66b, #f29a2e);
  transition: background .6s ease;
}
.reloj__icono svg { width: 1.2em; height: 1.2em; }
.reloj.es-noche .reloj__icono { background: radial-gradient(circle at 35% 35%, #4a5aa8, #1b2258); }
.idioma { padding: 3px; gap: 2px; }
.idioma button {
  font: inherit; font-size: .9rem; color: var(--madera-osc);
  padding: .15em .75em; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
}
.idioma button[aria-pressed="true"] { color: var(--crema); background: var(--rojo); }

/* Aparición al hacer scroll (solo si hay JS) */
.js [data-revela] { transition: opacity .8s ease, translate .9s var(--rebote); }
.js [data-revela]:not(.visto) { opacity: 0; translate: 0 34px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-revela]:not(.visto) { opacity: 1; translate: none; }
}