@import "tailwindcss";

:root {
  /* Paleta editorial Club 1976 */
  --ot-green: #0f382a;
  --ot-green-soft: #0a2b1f;
  --ot-cream: #f3efe5;
  --ot-cream-dark: #e8e2d6;
  --ot-paper: #faf8f2;
  --ot-gold: #a68b5b;
  --ot-ink: #201e19;
  --ot-muted: #5b5648;
  --background: var(--ot-cream);
  --foreground: var(--ot-ink);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-ot-green: var(--ot-green);
  --color-ot-green-soft: var(--ot-green-soft);
  --color-ot-cream: var(--ot-cream);
  --color-ot-cream-dark: var(--ot-cream-dark);
  --color-ot-paper: var(--ot-paper);
  --color-ot-gold: var(--ot-gold);
  --color-ot-ink: var(--ot-ink);
  --color-ot-muted: var(--ot-muted);
  --font-sans: var(--font-inter);
  --font-serif: var(--font-fraunces);
  --font-display: var(--font-fraunces);
  --font-condensed: var(--font-barlow-condensed);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter), var(--font-outfit), sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in srgb, var(--ot-gold) 45%, white);
  color: var(--ot-ink);
}

.ot-container {
  width: min(1240px, calc(100% - 2rem));
  margin-inline: auto;
}

.ot-eyebrow {
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--ot-gold);
  font-weight: 500;
}

.ot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ot-green);
  background: var(--ot-green);
  color: #f7f3ea;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-family: var(--font-barlow-condensed), "Barlow Condensed", sans-serif;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.ot-label-condensed {
  font-family: var(--font-barlow-condensed), "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
}

.ot-serif {
  font-family: var(--font-fraunces), "Fraunces", Georgia, serif;
}

.ot-btn:hover {
  background: var(--ot-green-soft);
  transform: translateY(-1px);
}

.ot-btn.bg-ot-cream:hover,
.ot-btn[class*="bg-ot-cream"]:hover {
  background: #ffffff;
  color: var(--ot-green);
}

.ot-btn-ghost {
  background: transparent;
  color: var(--ot-ink);
  border-color: color-mix(in srgb, var(--ot-ink) 22%, transparent);
}

.ot-btn-ghost:hover {
  background: var(--ot-ink);
  color: var(--ot-cream);
}

.ot-rule {
  height: 1px;
  background: color-mix(in srgb, var(--ot-ink) 12%, transparent);
}

@keyframes ot-kenburns {
  from {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.12) translate3d(-1.5%, -1%, 0);
  }
}

@keyframes ot-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ot-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.ot-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.ot-marquee__track {
  display: inline-flex;
  width: max-content;
  animation: ot-marquee 42s linear infinite;
  will-change: transform;
}

.ot-marquee:hover .ot-marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ot-marquee__track {
    animation: none;
  }
}

/* Inputs OT: sin blanco del navegador / autocompletado */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select {
  background-color: color-mix(in srgb, var(--ot-cream-dark) 45%, transparent);
  color: var(--ot-ink);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ot-ink);
  box-shadow: 0 0 0 1000px var(--ot-cream-dark) inset;
  transition: background-color 99999s ease-out;
}