/* ============================================================
   OverGrip — Landing "Próximamente"
   Tokens y medidas según design handoff (alta fidelidad).
   ============================================================ */

:root {
  /* Colores */
  --c-bg:          #1A1A1C;  /* grafito marca */
  --c-accent:      #FF6A00;  /* naranja OverGrip */
  --c-accent-soft: #ffb27a;  /* hover de links */
  --c-accent-hi:   #ff8124;  /* hover del CTA sólido */
  --c-text:        #F4F4F2;
  --c-text-2:      #B8B8BD;
  --c-text-3:      #8a8a8f;
  --c-line:        #2c2c30;
  --c-line-2:      #3a3a3e;
  --c-ball:        #D8E84C;

  /* Tipografías */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* Medidas */
  --radius-btn:  8px;
  --mark-hero:   108px;
  --title-size:  56px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-soft); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Layout general ─────────────────────────────────────── */

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Círculos decorativos, esquina superior derecha */
.deco {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  pointer-events: none;
}
.deco--lg { top: -160px; right: -160px; width: 460px; height: 460px; }
.deco--sm { top:  -70px; right:  -70px; width: 280px; height: 280px; }

/* ── Header ─────────────────────────────────────────────── */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 48px;
  position: relative;
  z-index: 2;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand__mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
}
.brand__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 11px;
}

.brand__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

/* ── Botones ────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--ghost {
  border: 1.5px solid var(--c-text);
  color: var(--c-text);
  padding: 11px 26px;
}
.btn--ghost:not(.btn--inert):hover {
  color: var(--c-text);
  background: rgba(244, 244, 242, 0.09);
}

/* Botón visible pero sin acción: no invita al clic */
.btn--inert {
  cursor: default;
  user-select: none;
}

.btn--solid {
  background: var(--c-accent);
  color: var(--c-bg);
  padding: 14px 32px;
  margin-top: 40px;
}
.btn--solid:hover {
  background: var(--c-accent-hi);
  color: var(--c-bg);
}

/* ── Main ───────────────────────────────────────────────── */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  position: relative;
  z-index: 2;
}

/* Isotipo animado + pelota */
.hero-mark {
  position: relative;
  width: var(--mark-hero);
  height: var(--mark-hero);
  margin-bottom: 44px;
}

.hero-mark__logo {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-mark__logo svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--mark-hero) * 0.2778); /* 30px @ 108px */
}

.ball {
  position: absolute;
  /* Posición relativa al isotipo: 88px / 96px sobre una caja de 108px */
  top:  calc(var(--mark-hero) * 0.8148);
  left: calc(var(--mark-hero) * 0.8889);
  width:  calc(var(--mark-hero) * 0.1852); /* 20px @ 108px */
  height: calc(var(--mark-hero) * 0.1852);
  border-radius: 50%;
  background: var(--c-ball);
  box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.ball__seam {
  position: absolute;
  top: 15%;
  left: -20%;
  width: 140%;
  height: 70%;
  border: 1.5px solid #FFFFFF;
  border-radius: 50%;
  opacity: 0.85;
}

/* Animaciones: ciclo de 3.6s, loop infinito */
@keyframes nudge {
  0%, 8%     { transform: translateX(0); }
  13%        { transform: translateX(3px); }
  18%, 100%  { transform: translateX(0); }
}
@keyframes roll {
  0%, 14% { transform: translateX(0) rotate(0deg); opacity: 1; }
  95%     { opacity: 1; }
  100%    { transform: translateX(58vw) rotate(760deg); opacity: 0; }
}

.hero-mark__logo { animation: nudge 3.6s ease-in-out infinite; }
.ball            { animation: roll  3.6s cubic-bezier(.4, .1, .3, 1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-mark__logo,
  .ball { animation: none; }
  .btn  { transition: none; }
}

/* Textos */
.eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--c-accent);
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--title-size);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 720px;
  color: var(--c-text);
}

.subtitle {
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--c-text-2);
  max-width: 480px;
  line-height: 1.55;
}

/* ── Footer ─────────────────────────────────────────────── */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 28px 24px 36px;
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--c-line);
}

.footer a {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-3);
}
.footer a:hover { color: var(--c-accent-soft); }

.footer__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-line-2);
  flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --title-size: 44px; }

  .header { padding: 24px 28px; }
  .deco--lg { top: -180px; right: -180px; width: 380px; height: 380px; }
  .deco--sm { top:  -90px; right:  -90px; width: 230px; height: 230px; }
}

@media (max-width: 640px) {
  :root {
    --title-size: 34px;
    --mark-hero: 84px;
  }

  .header { padding: 20px 20px; }
  .brand { gap: 11px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__mark svg { border-radius: 9px; }
  .brand__word { font-size: 16px; }
  .btn--ghost { padding: 10px 20px; font-size: 12px; }

  .main { padding: 32px 20px; }
  .hero-mark { margin-bottom: 34px; }
  .subtitle { font-size: 16px; margin-top: 20px; max-width: 420px; }
  .btn--solid { margin-top: 32px; }

  .footer { gap: 10px 18px; padding: 24px 20px 30px; }
  .footer__dot { display: none; }
}

@media (max-width: 360px) {
  :root { --title-size: 30px; }
  .eyebrow { letter-spacing: 0.22em; }
}

/* Pantallas bajas (mobile apaisado): que no se corte el contenido */
@media (max-height: 620px) {
  .main { justify-content: flex-start; padding-top: 24px; }
  .hero-mark { margin-bottom: 24px; }
}