/* Home page styles (jugaglobo.com). Organized by section: base, hero, then later sections. */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/BricolageGrotesque_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-style: normal; font-display: swap; src: url('/assets/fonts/BricolageGrotesque_800ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Figtree'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/Figtree_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/Figtree_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/Figtree_700Bold.ttf') format('truetype'); }

/* ---------- Tokens ---------- */
:root {
  --aire: #f4f7f9;
  --surface: #fff;
  --noche: #102a43;
  --malla: #3d5266;
  --cesped: #1e7a4f;
  --pelota: #d9ec3c;
  --vidrio: #c9d6e2;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --font-display: 'Bricolage Grotesque', Figtree, system-ui, sans-serif;
  --font-body: Figtree, system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --content-max: 1320px;
  --shadow-float: 0 28px 60px -24px rgba(16, 42, 67, 0.45), 0 8px 18px -10px rgba(16, 42, 67, 0.25);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--aire);
  color: var(--noche);
  font: 400 17px/1.5 var(--font-body);
}
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }
p { margin: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(100vh, 1100px);
  min-height: min(100svh, 1100px);
  background:
    radial-gradient(120% 60% at 50% 42%, #fff 0%, rgba(255, 255, 255, 0) 60%),
    var(--aire);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  min-height: inherit;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(32px, 6vh, 72px) var(--gutter) 0;
}
.hero-copy { align-self: start; max-width: 520px; }
/* Wordmark and headline also scale with the viewport height, so short windows keep room for the court. */
.hero-wordmark { display: block; width: clamp(190px, min(25vw, 42vh), 360px); height: auto; margin: 0 0 clamp(16px, 2.5vh, 28px) -0.6%; }
.hero h1 {
  max-width: 11em;
  font-size: clamp(30px, min(3.6vw, 7vh), 52px);
  line-height: 1.05;
  letter-spacing: -1px;
  text-wrap: balance;
}
.hero-lead { margin-top: 12px; color: var(--malla); font-size: clamp(17px, 1.5vw, 20px); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--pelota);
  color: var(--noche);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cesped);
}

/* Phone with the real app screen, floating over the court. */
.hero-phone {
  align-self: end;
  justify-self: end;
  width: clamp(240px, 22vw, 310px);
  margin: 0 clamp(0px, 4vw, 64px) clamp(28px, 6vh, 64px) 0;
  animation: hero-float 5.2s ease-in-out infinite;
}
.phone {
  position: relative;
  transform: rotate(3deg);
  border: 7px solid var(--vidrio);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
/* Hero glass: 2 px white highlight inside the Vidrio border, drawn over the screenshot. */
.phone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius-lg) - 7px);
  box-shadow: inset 0 0 0 2px #fff;
  pointer-events: none;
}
/* Crop to the header, the next class card and the "Después" rows (the bottom of the capture
   shows the floating tab bar over a cut card). */
.phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 1010;
  object-fit: cover;
  object-position: top;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Court scene: one SVG in the intro's camera model, sitting on the hero's bottom edge, centered,
   and never cropped: it fits the hero's width on tall heroes and the hero's height on wide, short
   ones (the copy keeps its size, so a cropped scene would push the net and the lob into it).
   The floor is drawn past the viewBox, so it still reaches the hero's sides. */
.scene {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: min(100%, min(100vh, 1100px) * 1.6);
  width: min(100%, min(100svh, 1100px) * 1.6);
  height: auto;
  aspect-ratio: 1440 / 900;
  translate: -50% 0;
  overflow: visible;
  display: block;
}
.scene-floor { fill: var(--cesped); }
.scene-lines { fill: #fff; }
.scene-glass { fill: rgba(255, 255, 255, 0.62); stroke: var(--vidrio); stroke-width: 4; stroke-linejoin: round; }
.scene-mullions { fill: none; stroke: var(--vidrio); stroke-width: 2.5; stroke-linecap: round; }
.scene-glare { fill: #fff; }
.scene-mesh { fill: rgba(201, 214, 226, 0.3); }
.scene-net { fill: var(--malla); opacity: 0.3; }
.scene-net-mesh { opacity: 0.35; }
.scene-net-tape { fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: round; }
.scene-net-posts { stroke: var(--noche); stroke-width: 6; stroke-linecap: round; }
/* The lob's trail: Césped dots (dash 2/9); where it crosses the Césped floor the dots turn
   white, like the court lines, so the whole arc stays readable. */
.scene-trail-dots { fill: none; stroke: var(--cesped); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; }
.scene-trail-dots.on-floor { stroke: #fff; }
.scene-ball circle { fill: var(--pelota); stroke: var(--noche); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.scene-shadow { fill: var(--noche); }
.scene-ball, .scene-shadow, .scene-paddle { transform-box: view-box; transform-origin: 0 0; }

/* Lob keyframes: a 3D lob sampled every 30 ms and projected with the camera model of the
   intro "Cancha": x = 720 + 560·X/Z, y = 392 − 560·(Y − 2.6)/Z (net 6 m ahead,
   ball radius 0.15 m). Loop 3.4 s: toss and contact with squash 1.3 × 0.75 (0–0.45 s), lob
   (1.08 s) revealing the dotted trail, bounce with squash 1.35 × 0.70,
   a rebound that keeps the ball's heading and falls out through the bottom (opaque), rest.
   The base transforms are the reduced-motion still frame (the ball coming down mid-lob). */
.scene-ball { transform: translate(604.9px, 416.1px) scale(1.944); animation: scene-ball 3.4s linear infinite; }
.scene-shadow { transform: translate(604.9px, 729px) scale(1.944); opacity: 0.22; animation: scene-shadow 3.4s linear infinite; }
.scene-trail-reveal { stroke-dashoffset: 0.588; animation: scene-trail-reveal 3.4s linear infinite; }
.scene-trail { animation: scene-trail 3.4s linear infinite; }
.scene-paddle { opacity: 0; animation: scene-paddle 3.4s infinite; }
@keyframes scene-ball {
  0% { transform: translate(755px, 434.8px) scale(0.583, 0.583); opacity: 0; }
  2.941% { transform: translate(755px, 434.8px) scale(0.583, 0.583); opacity: 1; }
  4.412% { transform: translate(755px, 435.3px) scale(0.583, 0.583); opacity: 1; }
  6.618% { transform: translate(755px, 438px) scale(0.583, 0.583); opacity: 1; }
  8.824% { transform: translate(755px, 443px) scale(0.583, 0.583); opacity: 1; }
  11.029% { transform: translate(755px, 450.4px) scale(0.583, 0.583); opacity: 1; }
  13.235% { transform: translate(755px, 461.5px) scale(0.758, 0.437); opacity: 1; }
  14.118% { transform: translate(748.1px, 436.2px) scale(0.596, 0.596); opacity: 1; }
  15% { transform: translate(741.4px, 412.7px) scale(0.61, 0.61); opacity: 1; }
  15.882% { transform: translate(734.8px, 389.8px) scale(0.624, 0.624); opacity: 1; }
  16.765% { transform: translate(728.3px, 367.3px) scale(0.639, 0.639); opacity: 1; }
  17.647% { transform: translate(722px, 345.4px) scale(0.654, 0.654); opacity: 1; }
  18.529% { transform: translate(715.9px, 324.1px) scale(0.67, 0.67); opacity: 1; }
  19.412% { transform: translate(709.9px, 303.4px) scale(0.687, 0.687); opacity: 1; }
  20.294% { transform: translate(704px, 283.5px) scale(0.705, 0.705); opacity: 1; }
  21.176% { transform: translate(698.2px, 264.3px) scale(0.724, 0.724); opacity: 1; }
  22.059% { transform: translate(692.7px, 245.8px) scale(0.744, 0.744); opacity: 1; }
  22.941% { transform: translate(687.2px, 228.3px) scale(0.765, 0.765); opacity: 1; }
  23.824% { transform: translate(681.9px, 211.7px) scale(0.788, 0.788); opacity: 1; }
  24.706% { transform: translate(676.7px, 196.1px) scale(0.811, 0.811); opacity: 1; }
  25.588% { transform: translate(671.7px, 181.7px) scale(0.836, 0.836); opacity: 1; }
  26.471% { transform: translate(666.8px, 168.5px) scale(0.863, 0.863); opacity: 1; }
  27.353% { transform: translate(662.1px, 156.7px) scale(0.892, 0.892); opacity: 1; }
  28.235% { transform: translate(657.5px, 146.4px) scale(0.922, 0.922); opacity: 1; }
  29.118% { transform: translate(653.1px, 137.8px) scale(0.955, 0.955); opacity: 1; }
  30% { transform: translate(648.8px, 131px) scale(0.99, 0.99); opacity: 1; }
  30.882% { transform: translate(644.6px, 126.2px) scale(1.027, 1.027); opacity: 1; }
  31.765% { transform: translate(640.6px, 123.8px) scale(1.068, 1.068); opacity: 1; }
  32.647% { transform: translate(636.7px, 124px) scale(1.112, 1.112); opacity: 1; }
  33.529% { transform: translate(633px, 127.1px) scale(1.16, 1.16); opacity: 1; }
  34.412% { transform: translate(629.4px, 133.5px) scale(1.212, 1.212); opacity: 1; }
  35.294% { transform: translate(626px, 143.6px) scale(1.268, 1.268); opacity: 1; }
  36.176% { transform: translate(622.7px, 158.1px) scale(1.331, 1.331); opacity: 1; }
  37.059% { transform: translate(619.5px, 177.7px) scale(1.4, 1.4); opacity: 1; }
  37.941% { transform: translate(616.5px, 203.1px) scale(1.477, 1.477); opacity: 1; }
  38.824% { transform: translate(613.6px, 235.3px) scale(1.562, 1.562); opacity: 1; }
  39.706% { transform: translate(610.9px, 275.6px) scale(1.658, 1.658); opacity: 1; }
  40.588% { transform: translate(608.3px, 325.7px) scale(1.766, 1.766); opacity: 1; }
  41.471% { transform: translate(605.8px, 387.5px) scale(1.89, 1.89); opacity: 1; }
  42.353% { transform: translate(603.5px, 463.7px) scale(2.032, 2.032); opacity: 1; }
  43.235% { transform: translate(601.4px, 557.8px) scale(2.198, 2.198); opacity: 1; }
  44.118% { transform: translate(599.4px, 674.6px) scale(2.392, 2.392); opacity: 1; }
  44.647% { transform: translate(598.2px, 758.3px) scale(2.527, 2.527); opacity: 1; }
  45% { transform: translate(597.5px, 828.6px) scale(3.544, 1.838); opacity: 1; }
  45.882% { transform: translate(596.5px, 778.7px) scale(2.483, 3.09); opacity: 1; }
  46.765% { transform: translate(595.5px, 746.5px) scale(2.908, 2.908); opacity: 1; }
  47.647% { transform: translate(594.3px, 714.5px) scale(3.073, 3.073); opacity: 1; }
  48.529% { transform: translate(593px, 686.9px) scale(3.259, 3.259); opacity: 1; }
  49.412% { transform: translate(591.5px, 664.5px) scale(3.468, 3.468); opacity: 1; }
  50.294% { transform: translate(589.8px, 648.3px) scale(3.706, 3.706); opacity: 1; }
  51.176% { transform: translate(587.9px, 639.6px) scale(3.979, 3.979); opacity: 1; }
  52.059% { transform: translate(585.7px, 640.4px) scale(4.295, 4.295); opacity: 1; }
  52.941% { transform: translate(583px, 652.9px) scale(4.667, 4.667); opacity: 1; }
  53.824% { transform: translate(579.9px, 680.7px) scale(5.108, 5.108); opacity: 1; }
  54.706% { transform: translate(576.1px, 728.5px) scale(5.642, 5.642); opacity: 1; }
  55.588% { transform: translate(571.5px, 803.1px) scale(6.3, 6.3); opacity: 1; }
  56.471% { transform: translate(565.6px, 915.4px) scale(7.132, 7.132); opacity: 1; }
  56.912% { transform: translate(562px, 990.7px) scale(7.636, 7.636); opacity: 1; }
  57.206% { transform: translate(562px, 990.7px) scale(7.636, 7.636); opacity: 0; }
  100% { transform: translate(755px, 434.8px) scale(0.583); opacity: 0; }
}
@keyframes scene-shadow {
  0% { transform: translate(755px, 493.1px) scale(0.583); opacity: 0; }
  2.941% { transform: translate(755px, 493.1px) scale(0.583); opacity: 0.25; }
  13.235% { transform: translate(755px, 493.1px) scale(0.583); opacity: 0.272; }
  15% { transform: translate(741.4px, 497.7px) scale(0.61); opacity: 0.23; }
  16.765% { transform: translate(728.3px, 502.7px) scale(0.639); opacity: 0.194; }
  18.529% { transform: translate(715.9px, 508.2px) scale(0.67); opacity: 0.163; }
  20.294% { transform: translate(704px, 514.2px) scale(0.705); opacity: 0.136; }
  22.059% { transform: translate(692.7px, 521px) scale(0.744); opacity: 0.115; }
  23.824% { transform: translate(681.9px, 528.5px) scale(0.787); opacity: 0.1; }
  25.588% { transform: translate(671.7px, 537px) scale(0.836); opacity: 0.1; }
  27.353% { transform: translate(662.1px, 546.5px) scale(0.892); opacity: 0.1; }
  29.118% { transform: translate(653.1px, 557.5px) scale(0.955); opacity: 0.1; }
  30.882% { transform: translate(644.6px, 570px) scale(1.027); opacity: 0.1; }
  32.647% { transform: translate(636.7px, 584.7px) scale(1.112); opacity: 0.1; }
  34.412% { transform: translate(629.4px, 602px) scale(1.212); opacity: 0.107; }
  36.176% { transform: translate(622.7px, 622.7px) scale(1.331); opacity: 0.125; }
  37.941% { transform: translate(616.5px, 647.9px) scale(1.477); opacity: 0.149; }
  39.706% { transform: translate(610.9px, 679.4px) scale(1.658); opacity: 0.178; }
  41.471% { transform: translate(605.8px, 719.6px) scale(1.89); opacity: 0.212; }
  43.235% { transform: translate(601.4px, 772.9px) scale(2.198); opacity: 0.251; }
  45% { transform: translate(597.5px, 847px) scale(2.625); opacity: 0.295; }
  46.765% { transform: translate(595.5px, 896px) scale(2.908); opacity: 0.274; }
  48.529% { transform: translate(593px, 956.8px) scale(3.259); opacity: 0.259; }
  50.294% { transform: translate(589.8px, 1034.4px) scale(3.706); opacity: 0.248; }
  52.059% { transform: translate(585.7px, 1136.5px) scale(4.295); opacity: 0.242; }
  53.824% { transform: translate(579.9px, 1277.4px) scale(5.108); opacity: 0.242; }
  55.588% { transform: translate(571.5px, 1484px) scale(6.3); opacity: 0.246; }
  56.912% { transform: translate(562px, 1715.6px) scale(7.636); opacity: 0.253; }
  57.206% { transform: translate(562px, 1715.6px) scale(7.636); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes scene-trail-reveal {
  0% { stroke-dashoffset: 1; }
  13.235% { stroke-dashoffset: 1; }
  14.118% { stroke-dashoffset: 0.984; }
  15% { stroke-dashoffset: 0.969; }
  15.882% { stroke-dashoffset: 0.954; }
  16.765% { stroke-dashoffset: 0.94; }
  17.647% { stroke-dashoffset: 0.925; }
  18.529% { stroke-dashoffset: 0.912; }
  19.412% { stroke-dashoffset: 0.898; }
  20.294% { stroke-dashoffset: 0.885; }
  21.176% { stroke-dashoffset: 0.873; }
  22.059% { stroke-dashoffset: 0.86; }
  22.941% { stroke-dashoffset: 0.849; }
  23.824% { stroke-dashoffset: 0.838; }
  24.706% { stroke-dashoffset: 0.828; }
  25.588% { stroke-dashoffset: 0.818; }
  26.471% { stroke-dashoffset: 0.81; }
  27.353% { stroke-dashoffset: 0.802; }
  28.235% { stroke-dashoffset: 0.795; }
  29.118% { stroke-dashoffset: 0.788; }
  30% { stroke-dashoffset: 0.783; }
  30.882% { stroke-dashoffset: 0.779; }
  31.765% { stroke-dashoffset: 0.776; }
  32.647% { stroke-dashoffset: 0.774; }
  33.529% { stroke-dashoffset: 0.771; }
  34.412% { stroke-dashoffset: 0.766; }
  35.294% { stroke-dashoffset: 0.76; }
  36.176% { stroke-dashoffset: 0.75; }
  37.059% { stroke-dashoffset: 0.738; }
  37.941% { stroke-dashoffset: 0.722; }
  38.824% { stroke-dashoffset: 0.701; }
  39.706% { stroke-dashoffset: 0.676; }
  40.588% { stroke-dashoffset: 0.645; }
  41.471% { stroke-dashoffset: 0.606; }
  42.353% { stroke-dashoffset: 0.558; }
  43.235% { stroke-dashoffset: 0.5; }
  44.118% { stroke-dashoffset: 0.426; }
  45% { stroke-dashoffset: 0.335; }
  45.882% { stroke-dashoffset: 0.311; }
  46.765% { stroke-dashoffset: 0.289; }
  47.647% { stroke-dashoffset: 0.269; }
  48.529% { stroke-dashoffset: 0.252; }
  49.412% { stroke-dashoffset: 0.238; }
  50.294% { stroke-dashoffset: 0.227; }
  51.176% { stroke-dashoffset: 0.222; }
  52.059% { stroke-dashoffset: 0.22; }
  52.941% { stroke-dashoffset: 0.211; }
  53.824% { stroke-dashoffset: 0.194; }
  54.706% { stroke-dashoffset: 0.163; }
  55.588% { stroke-dashoffset: 0.117; }
  56.471% { stroke-dashoffset: 0.045; }
  56.912% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes scene-trail {
  0%, 12.941% { opacity: 0; }
  13.235%, 61.324% { opacity: 1; }
  71.618%, 100% { opacity: 0; }
}
@keyframes scene-paddle {
  0% { opacity: 0; transform: translate(-4px, 28px) rotate(-60deg) scaleX(.7); }
  5.882% { opacity: 1; transform: translate(-4px, 22px) rotate(-60deg) scaleX(.7); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  11.176% { opacity: 1; transform: translate(-12px, 28px) rotate(-88deg) scaleX(.62); animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
  13.235% { opacity: 1; transform: translate(0, 10px) rotate(-70deg) scaleX(.62); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  15.294% { opacity: 1; transform: translate(9px, -10px) rotate(-40deg) scaleX(.75); }
  20.588%, 100% { opacity: 0; transform: translate(12px, -18px) rotate(-25deg) scaleX(.75); }
}
/* end lob keyframes */

/* Pause every hero animation while off screen, in a hidden tab or with reduced motion (motion.js). */
.hero.is-paused *,
.hero.is-paused *::before,
.hero.is-paused *::after { animation-play-state: paused; }

/* Landscape tablets: the copy column reaches the middle of the hero, so slide the court right
   until the top of the lob clears it (none at 1280 px and wider, at most 120 px). */
@media (min-width: 641px) and (max-width: 1279px) and (min-aspect-ratio: 5/4) {
  .scene { translate: calc(-50% + clamp(0px, (1280px - 100vw) * 0.4, 120px)) 0; }
}

/* Portrait tablets: a full-height hero would leave a wide empty sky over a small court, so the
   hero is sized to its content instead: the copy, then exactly the part of the scene below the
   top of the lob (0.539 × the scene width) plus a small gap. */
@media (min-width: 641px) and (max-aspect-ratio: 1/1) {
  .hero { min-height: 0; }
  .hero-inner { grid-template-rows: auto calc(100vw * 0.539 + 24px); }
  .hero-copy { grid-row: 1; }
  .hero-phone { grid-row: 1 / -1; grid-column: 2; }
}

/* Phone: the copy sits on the sky, the phone below it on the right, and the court is pulled
   down and to the left so the lob plays between them. */
@media (max-width: 640px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0;
    padding: 28px 20px 0;
  }
  .hero-phone {
    align-self: start;
    width: min(46vw, 180px);
    margin: 20px 2px 32px 0;
  }
  .scene {
    top: 256px;
    left: -110px;
    width: calc(100% + 110px);
    height: calc(100% - 256px);
    aspect-ratio: auto;
    translate: none;
    overflow: hidden;
  }
}

/* Reduced motion: no animation at all; the base transforms above are a mid-lob still frame. */
@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero *::before,
  .hero *::after { animation: none !important; }
}

/* ---------- Audience cards (#para-quien) ---------- */
.audience { padding: clamp(56px, 9vw, 120px) 0; }
.audience-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 300px);
  grid-template-areas: "head phone" "cards phone";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 6vw, 96px);
}
.audience-head { grid-area: head; margin-bottom: 28px; }
.audience-head h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -1px; text-wrap: balance; }
.audience-head p { margin-top: 10px; color: var(--malla); font-size: clamp(17px, 1.5vw, 20px); }
.audience-cards { grid-area: cards; display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.audience-phone { grid-area: phone; align-self: center; justify-self: end; width: 100%; }

.aud-card {
  background: var(--surface);
  border: 2px solid var(--vidrio);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 250ms ease-out, border-color 250ms ease-out;
}
.aud-card:has([aria-expanded="true"]) {
  border-color: var(--vidrio);
  box-shadow: inset 0 0 0 2px #fff, var(--shadow-float);
}
.aud-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: none;
  color: var(--noche);
  font: 700 clamp(20px, 2vw, 24px)/1.2 var(--font-display);
  letter-spacing: -0.5px;
  text-align: left;
  cursor: pointer;
}
.aud-name { flex: 1 1 auto; }
.aud-btn:focus-visible { outline: 3px solid var(--cesped); outline-offset: -5px; border-radius: var(--radius-md); }
.aud-chev { flex: none; color: var(--malla); transition: transform 250ms ease-out; }
.aud-btn[aria-expanded="true"] .aud-chev { transform: rotate(180deg); }
.aud-badge {
  flex: none;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--pelota);
  font: 700 14px/1.2 var(--font-body);
  letter-spacing: 0;
}
.aud-mobile-shot { display: none; }
.aud-panel { padding: 0 20px 20px; animation: aud-in 250ms ease-out; }
.aud-panel[hidden] { display: none; }
.aud-hook { font-weight: 600; font-size: 18px; margin-bottom: 12px; }
.aud-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aud-panel li { position: relative; padding-left: 22px; color: var(--malla); }
.aud-panel li strong { color: var(--noche); font-weight: 700; }
.aud-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cesped);
}
@keyframes aud-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* The phone shares the hero frame; screens are stacked and the active one fades in. */
.audience-phone .phone { display: grid; transform: rotate(-2deg); }
.aud-screen {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 0s linear 250ms;
}
[data-active="profes"] [data-audience-screen="profes"],
[data-active="clubes"] [data-audience-screen="clubes"],
[data-active="jugadores"] [data-audience-screen="jugadores"] {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

/* "Próximamente" screen in the app's style. */
.aud-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 600 / 1010;
  background: var(--aire);
  text-align: center;
  padding: 24px;
}
.aud-soon-arc { width: 70%; height: auto; margin-bottom: 18px; }
.aud-soon-title { font: 800 clamp(26px, 2.4vw, 32px)/1.1 var(--font-display); letter-spacing: -1px; }
.aud-soon-line { color: var(--malla); font-weight: 600; }

@media (max-width: 640px) {
  /* On phones the big phone would scroll out of view when a card is tapped, so each open
     panel carries its own small phone instead. */
  .audience-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "cards";
    grid-template-rows: none;
  }
  .audience-head { margin-bottom: 20px; }
  .audience-phone { display: none; }
  .aud-panel { display: flow-root; }
  .aud-panel[hidden] { display: none; }
  .aud-mobile-shot { display: block; float: right; width: 128px; margin: 4px 4px 8px 16px; }
  .aud-mobile-shot .phone { transform: rotate(2deg); border-width: 5px; border-radius: 20px; box-shadow: 0 14px 28px -14px rgba(16, 42, 67, 0.45); }
  .aud-mobile-shot .phone::after { border-radius: 15px; }
  .aud-soon-title { font-size: 17px; }
  .aud-soon-line { font-size: 12px; }
  .aud-soon { padding: 10px; }
  .aud-soon-arc { margin-bottom: 10px; }
  .aud-hook { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .aud-panel { animation: aud-fade 200ms linear; }
  .aud-screen { transform: none; transition: opacity 200ms linear, visibility 0s linear 200ms; }
  .aud-chev { transition: none; }
}
@keyframes aud-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Closing (#contacto) and footer ---------- */
.closing { padding: clamp(56px, 9vw, 120px) 0; background: var(--surface); border-top: 2px solid var(--vidrio); }
.closing-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.closing h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -1px; }
.closing-lead { margin-top: 14px; font-size: clamp(18px, 1.7vw, 22px); max-width: 34ch; text-wrap: balance; }
.closing-note { margin-top: 8px; color: var(--malla); font-weight: 600; }
.contact-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 18px;
  max-width: 100%;
  border: 2px solid var(--vidrio);
  border-radius: var(--radius-pill);
  background: var(--aire);
  color: var(--noche);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, transform 150ms ease-out;
}
.contact-btn:hover { border-color: var(--cesped); background: #fff; }
.contact-btn:active { transform: scale(0.98); }
.contact-btn:focus-visible { outline: 3px solid var(--cesped); outline-offset: 3px; }
.contact-icon { flex: none; color: var(--cesped); }
.site-footer { background: var(--noche); color: var(--vidrio); padding: 24px 0; }
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 15px;
}
.site-footer a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.site-footer a:focus-visible { outline: 3px solid var(--pelota); outline-offset: 3px; }
@media (max-width: 640px) {
  .contact-list { flex-direction: column; align-items: stretch; }
  .contact-btn { justify-content: flex-start; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-btn { transition: none; }
}