/* PICA — linktree. Tokens del design system (pica-front-end/src/theme/colors.ts). */
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --primary: #2DD7A7;
  --on-primary: #003D46;
  --bg: #00161A;
  --card: #03272E;
  --borde: #0A2A2F;
  --texto: #FFFFFF;
  --subtexto: #B7CBC8;
  --tenue: #7FA5A0;
  /* colores por deporte: fútbol y pádel son los del design system;
     tenis y running usan el amarillo y el naranja de su paleta extendida */
  --futbol: #2DD7A7;
  --padel: #4A90D9;
  --tenis: #FBBF24;
  --running: #F59E0B;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  /* la grilla sutil y el resplandor verde de las piezas de Instagram */
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(45, 215, 167, 0.16), transparent 70%),
    linear-gradient(rgba(45, 215, 167, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 215, 167, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

.pagina {
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.logo { width: 84px; height: 84px; filter: drop-shadow(0 10px 28px rgba(45, 215, 167, 0.25)); }

.pildora {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(45, 215, 167, 0.35);
  background: rgba(45, 215, 167, 0.08);
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary);
  text-align: center;
}
.pildora::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none;
}

h1 {
  margin-top: 14px;
  font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
  text-align: center;
}
h1 span { color: var(--primary); }

.zonas {
  margin-top: 8px;
  font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--tenue); text-align: center;
}

.bajada {
  margin-top: 14px;
  font-size: 15px; line-height: 1.45; color: var(--subtexto); text-align: center;
}
.bajada strong { color: var(--texto); font-weight: 600; }

.rotulo {
  align-self: flex-start;
  margin: 30px 2px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tenue);
}

.deportes { width: 100%; display: flex; flex-direction: column; gap: 10px; }

.deporte {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 16px;
  color: var(--texto); text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.deporte:hover, .deporte:focus-visible { border-color: var(--color); transform: translateY(-1px); outline: none; }
.deporte:active { transform: scale(0.99); }

.marca {
  flex: none; width: 10px; height: 38px; border-radius: 6px; background: var(--color);
}
.deporte .texto { flex: 1; display: flex; flex-direction: column; }
.deporte .nombre { font-size: 17px; font-weight: 700; }
.deporte .sub { font-size: 13px; color: var(--subtexto); margin-top: 1px; }
.deporte .flecha { flex: none; font-size: 20px; color: var(--color); font-weight: 600; }

.oferta {
  margin-top: 30px; width: 100%;
  padding: 18px;
  border: 1px dashed rgba(183, 203, 200, 0.28);
  border-radius: 16px;
  text-align: center;
}
.oferta p { font-size: 14px; color: var(--subtexto); }
.oferta .botones { margin-top: 12px; display: flex; gap: 10px; }
.oferta a {
  flex: 1;
  padding: 11px 10px;
  border-radius: 999px;
  border: 1px solid rgba(45, 215, 167, 0.45);
  color: var(--primary); text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.oferta a:hover, .oferta a:focus-visible { background: rgba(45, 215, 167, 0.1); outline: none; }

.boton-principal {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 28px rgba(45, 215, 167, 0.25);
}

.pie {
  margin-top: auto;
  padding-top: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 13px; color: var(--tenue);
}
.pie a.ig {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--texto); text-decoration: none; font-weight: 600;
}
.pie a.ig svg { width: 18px; height: 18px; }
.pie small { font-size: 11px; color: #4E6F6B; }

@media (max-width: 360px) {
  h1 { font-size: 30px; }
  .oferta .botones { flex-direction: column; }
}