/* ==========================================================================
   Hero de portada — «La pista» (18/10/2026)
   Una pista de pádel en 3D, de noche, bajo los focos. Las tres zonas de la
   mitad cercana (red, media pista, fondo) llevan a palas de potencia,
   polivalentes y control. Una bola cruza la red al cargar y bota en el
   fondo: es el único movimiento automático de la página.
   Geometría real: 10 × 20 m, línea de saque a 6,95 m de la red,
   cristal de fondo de 3 m y laterales de 4 m.
   ========================================================================== */

/* ---------- Cabecera sobre el hero oscuro ---------- */
.ep-home .nav{background:rgba(10,33,96,.9);border-bottom-color:rgba(255,255,255,.08)}
.ep-home .brand{color:#fff}
.ep-home .brand em{color:var(--ball)}
.ep-home .nav-links a{color:rgba(255,255,255,.78)}
.ep-home .nav-links a:hover,.ep-home .nav-links a.is-active{color:#fff}
.ep-home .nav-links a.is-active::after{background:var(--ball)}
.ep-home .nav-cta{--btn-bg:var(--ball);--btn-bd:var(--ball);--btn-fg:var(--court-deep);color:var(--court-deep)!important}
.ep-home .nav-cta:hover{--btn-bg:var(--ball-2);--btn-bd:var(--ball-2)}
.ep-home .nav-tool{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.2);background:transparent}
.ep-home .nav-tool kbd{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.25);background:transparent}
.ep-home .nav-toggle{border-color:rgba(255,255,255,.25)}
.ep-home .nav-toggle span{background:#fff}

/* ---------- Escena ---------- */
.hero--court{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding:clamp(36px,5.5vw,80px) 0 clamp(40px,5vw,76px);
  background:
    radial-gradient(900px 560px at 82% -6%,rgba(150,185,255,.34),transparent 62%),
    radial-gradient(700px 520px at 104% 70%,rgba(47,100,240,.35),transparent 64%),
    radial-gradient(800px 600px at -10% 110%,rgba(29,78,216,.55),transparent 60%),
    var(--court-deep);
}
/* Haz del foco: un cono de luz muy suave desde arriba a la derecha. */
.hero--court::before{
  content:"";position:absolute;z-index:-1;top:-20%;right:6%;width:46%;height:120%;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 70%);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(18px);pointer-events:none
}
.hero-court-grid{
  max-width:1280px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(24px,3vw,48px);align-items:center
}

/* ---------- Texto ---------- */
.hero-copy{max-width:560px}
.hero-copy h1{
  font-family:var(--ff-display);font-weight:700;color:#fff;
  font-size:clamp(2.45rem,5vw,4.5rem);line-height:.98;letter-spacing:-.045em;margin:0;text-wrap:balance
}
.hero-lead{margin-top:clamp(18px,2vw,26px);font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;color:rgba(255,255,255,.8);max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.6vw,34px)}
.hero-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:999px;
  font-weight:700;font-size:1rem;letter-spacing:-.005em;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease),box-shadow .2s var(--ease)
}
.hero-btn--ball{background:var(--ball);color:var(--court-deep);box-shadow:0 18px 40px -18px rgba(220,242,60,.65)}
.hero-btn--ball:hover{background:#E9FB62;transform:translateY(-2px)}
.hero-btn--line{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.hero-btn--line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero-btn:focus-visible,.hero-search button:focus-visible,.hero-brands a:focus-visible,.readout-link:focus-visible{outline:2px solid var(--ball);outline-offset:3px}
.hero-note{margin-top:12px;font-size:.9rem;color:rgba(255,255,255,.62)}

.hero-search{
  display:flex;align-items:center;gap:10px;margin-top:clamp(26px,3vw,38px);max-width:520px;
  padding:6px 6px 6px 16px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  transition:border-color .2s var(--ease),background .2s var(--ease)
}
.hero-search:focus-within{border-color:rgba(220,242,60,.8);background:rgba(255,255,255,.12)}
.hero-search svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:rgba(255,255,255,.7);stroke-width:2;stroke-linecap:round}
.hero-search input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:#fff;font:inherit;font-size:.98rem;outline:none}
.hero-search input::placeholder{color:rgba(255,255,255,.55)}
.hero-search input::-webkit-search-cancel-button{filter:invert(1)}
.hero-search button{
  flex:0 0 auto;height:44px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  background:#fff;color:var(--court-deep);font-weight:700;font-size:.92rem
}
.hero-search button:hover{background:var(--ball)}
.hero-brands{margin-top:22px;font-size:.92rem;line-height:1.7;color:rgba(255,255,255,.62)}
.hero-brands a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:4px}
.hero-brands a:hover{text-decoration-color:var(--ball)}

/* ---------- Pista 3D ---------- */
.hero-court{position:relative}
.court-head h2{font-family:var(--ff-display);font-size:clamp(1rem,1.3vw,1.15rem);font-weight:600;letter-spacing:-.015em;color:#fff;margin:0}
.court-head p{margin-top:4px;font-size:.9rem;color:rgba(255,255,255,.62)}
.court-stage{
  position:relative;height:clamp(380px,37vw,520px);display:grid;place-items:center;
  perspective:1500px;perspective-origin:50% 28%
}
.court{
  --rx:57deg;--rz:-34deg;
  --cw:clamp(176px,16.5vw,240px);--L:calc(var(--cw) * 2);--u:calc(var(--cw) / 10);
  position:relative;width:var(--cw);height:var(--L);margin-top:calc(var(--u) * -3);margin-left:calc(var(--u) * 3);
  transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateZ(var(--rz))
}
.court>*{position:absolute;transform-style:preserve-3d}
.court-apron{inset:calc(var(--u) * -1.6);border-radius:6px;background:linear-gradient(180deg,#123B9C,#0E2F82);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 60px 90px -20px rgba(0,8,40,.75);transform:translateZ(-1px)}
.court-turf{
  inset:0;overflow:hidden;
  background:
    radial-gradient(70% 45% at 55% 38%,rgba(255,255,255,.16),transparent 70%),
    radial-gradient(ellipse at 50% 50%,#2E63EC 0%,#1F50D6 58%,#1843B8 100%)
}
.court-turf svg{position:absolute;inset:0;width:100%;height:100%}
.court-glass,.court-side,.court-mesh,.court-net{pointer-events:none}
/* Cristales: 3 m al fondo, 4 m en cada lateral junto al fondo. */
.court-glass{
  left:0;width:100%;height:calc(var(--u) * 3);transform-origin:50% 100%;transform:rotateX(-90deg);
  background:linear-gradient(180deg,rgba(210,228,255,.22),rgba(210,228,255,.05));
  border-top:2px solid rgba(255,255,255,.55);border-left:2px solid rgba(255,255,255,.3);border-right:2px solid rgba(255,255,255,.3)
}
.court-glass--far{top:calc(var(--u) * -3)}
.court-glass--near{top:calc(var(--L) - var(--u) * 3);background:linear-gradient(180deg,rgba(210,228,255,.12),rgba(210,228,255,.02));border-top-color:rgba(255,255,255,.35)}
.court-side{
  width:calc(var(--u) * 3);height:calc(var(--u) * 4);
  background:linear-gradient(90deg,rgba(210,228,255,.05),rgba(210,228,255,.18));
  border-top:2px solid rgba(255,255,255,.4);border-bottom:2px solid rgba(255,255,255,.4)
}
.court-side--l1,.court-side--l2{left:calc(var(--u) * -3);transform-origin:100% 50%;transform:rotateY(90deg)}
.court-side--r1,.court-side--r2{left:100%;transform-origin:0 50%;transform:rotateY(-90deg)}
.court-side--l1,.court-side--r1{top:0}
.court-side--l2,.court-side--r2{top:calc(var(--L) - var(--u) * 4)}
.court-mesh{
  top:calc(var(--u) * 4);width:calc(var(--u) * 3);height:calc(var(--L) - var(--u) * 8);opacity:.2;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.35) 0 1px,transparent 1px 7px)
}
.court-mesh--l{left:calc(var(--u) * -3);transform-origin:100% 50%;transform:rotateY(90deg)}
.court-mesh--r{left:100%;transform-origin:0 50%;transform:rotateY(-90deg)}
.court-net{
  left:calc(var(--u) * -.3);width:calc(100% + var(--u) * .6);height:calc(var(--u) * .9);top:calc(50% - var(--u) * .9);
  transform-origin:50% 100%;transform:rotateX(-90deg);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.38) 0 1px,transparent 1px 5px),repeating-linear-gradient(0deg,rgba(255,255,255,.38) 0 1px,transparent 1px 5px),rgba(5,20,70,.25);
  border-top:3px solid #fff
}

/* ---------- Zonas de la mitad cercana ---------- */
/* Red: 3 m desde la red. Media pista: hasta la línea de saque (6,95 m).
   Fondo: de la línea de saque a la pared. */
.zone{left:0;width:100%;display:block;outline:none;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.zone--red{top:50%;height:15%}
.zone--media{top:65%;height:19.75%}
.zone--fondo{top:84.75%;height:15.25%}
.zone--red .zone-tag{left:24%}
.zone--media .zone-tag{left:52%}
.zone--fondo .zone-tag{left:78%}
.zone:hover,.zone:focus-visible,.zone.is-active{background:rgba(220,242,60,.24);box-shadow:inset 0 0 0 2px rgba(220,242,60,.95)}
.zone-tag{
  left:50%;top:50%;position:absolute;white-space:nowrap;
  padding:7px 14px;border-radius:999px;background:#fff;color:var(--court-deep);
  font-family:var(--ff);font-size:13px;font-weight:750;letter-spacing:-.005em;
  box-shadow:0 10px 24px -10px rgba(0,10,50,.7);
  transform:translateZ(calc(var(--u) * 1.3)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) translate(-50%,-50%);
  transition:background .2s var(--ease),transform .25s var(--ease)
}
.zone:hover .zone-tag,.zone:focus-visible .zone-tag,.zone.is-active .zone-tag{
  background:var(--ball);
  transform:translateZ(calc(var(--u) * 1.8)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) translate(-50%,-50%)
}
.zone:focus-visible .zone-tag{box-shadow:0 0 0 3px var(--court-deep),0 0 0 5px var(--ball)}

/* ---------- Bola: cruza la red y bota en el fondo ---------- */
.ball,.ball-shadow,.ball-bounce{left:0;top:0;pointer-events:none}
.ball{
  width:calc(var(--u) * 1.05);height:calc(var(--u) * 1.05);margin:calc(var(--u) * -.525) 0 0 calc(var(--u) * -.525);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#F6FFA8 0%,var(--ball) 46%,#A9BE0E 100%);
  box-shadow:0 0 18px rgba(220,242,60,.45);
  animation:ep-ball 2.5s linear .5s both
}
.ball-shadow{
  width:calc(var(--u) * 1.2);height:calc(var(--u) * 1.2);margin:calc(var(--u) * -.6) 0 0 calc(var(--u) * -.6);border-radius:50%;
  background:radial-gradient(circle,rgba(0,8,40,.55),rgba(0,8,40,0) 70%);
  animation:ep-ball-shadow 2.5s linear .5s both
}
.ball-bounce{
  left:calc(var(--cw) * .62);top:calc(var(--L) * .925);width:calc(var(--u) * 1.4);height:calc(var(--u) * 1.4);
  margin:calc(var(--u) * -.7) 0 0 calc(var(--u) * -.7);border-radius:50%;border:2px solid var(--ball);
  animation:ep-bounce .9s cubic-bezier(.2,.7,.3,1) 2.55s both
}
.ball-bounce::after{content:"";position:absolute;inset:38%;border-radius:50%;background:rgba(220,242,60,.7)}
@keyframes ep-ball{
  0%  {opacity:0;transform:translate3d(calc(var(--cw) * .25),calc(var(--L) * .05),calc(var(--cw) * .32)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx)))}
  6%  {opacity:1}
  22% {transform:translate3d(calc(var(--cw) * .32),calc(var(--L) * .24),calc(var(--cw) * .58)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx)))}
  44% {transform:translate3d(calc(var(--cw) * .42),calc(var(--L) * .5),calc(var(--cw) * .68)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx)))}
  64% {transform:translate3d(calc(var(--cw) * .52),calc(var(--L) * .74),calc(var(--cw) * .46)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx)))}
  82% {transform:translate3d(calc(var(--cw) * .62),calc(var(--L) * .925),calc(var(--cw) * .06)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx)))}
  92% {opacity:1;transform:translate3d(calc(var(--cw) * .66),calc(var(--L) * .97),calc(var(--cw) * .2)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx)))}
  100%{opacity:0;transform:translate3d(calc(var(--cw) * .69),calc(var(--L) * .99),calc(var(--cw) * .26)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx)))}
}
@keyframes ep-ball-shadow{
  0%  {opacity:0;transform:translate3d(calc(var(--cw) * .25),calc(var(--L) * .05),0) scale(.6)}
  22% {opacity:.3;transform:translate3d(calc(var(--cw) * .32),calc(var(--L) * .24),0) scale(.7)}
  44% {opacity:.22;transform:translate3d(calc(var(--cw) * .42),calc(var(--L) * .5),0) scale(.6)}
  64% {opacity:.35;transform:translate3d(calc(var(--cw) * .52),calc(var(--L) * .74),0) scale(.75)}
  82% {opacity:.8;transform:translate3d(calc(var(--cw) * .62),calc(var(--L) * .925),0) scale(1)}
  100%{opacity:0;transform:translate3d(calc(var(--cw) * .69),calc(var(--L) * .99),0) scale(.8)}
}
@keyframes ep-bounce{
  0%  {opacity:0;transform:scale(.2)}
  20% {opacity:1}
  100%{opacity:.55;transform:scale(1)}
}

/* ---------- Ficha de la zona ---------- */
.court-readout{
  position:absolute;left:0;bottom:0;width:min(330px,52%);
  padding:18px 20px 20px;border-radius:22px;
  background:rgba(8,26,80,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -30px rgba(0,6,30,.8)
}
.readout-zone{font-family:var(--ff-display);font-size:1rem;font-weight:650;letter-spacing:-.015em;color:var(--ball)}
.readout-text{margin-top:6px;font-size:.93rem;line-height:1.55;color:rgba(255,255,255,.82)}
.readout-link{
  display:inline-flex;align-items:center;min-height:42px;margin-top:12px;padding:0 18px;border-radius:999px;
  background:#fff;color:var(--court-deep);font-weight:700;font-size:.9rem
}
.readout-link:hover{background:var(--ball)}
.court-readout.is-swapping .readout-zone,.court-readout.is-swapping .readout-text{opacity:.2}
.readout-zone,.readout-text{transition:opacity .18s var(--ease)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-court-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy{max-width:640px}
  .hero-court{margin-top:8px}
  .court-stage{height:clamp(360px,74vw,500px)}
  .court{--cw:clamp(150px,30vw,210px);margin-left:0}
  .court-readout{position:relative;left:auto;bottom:auto;width:auto;margin-top:4px}
}
@media (max-width:520px){
  .hero-copy h1{font-size:clamp(2.2rem,10.4vw,2.8rem)}
  .hero-actions .hero-btn{flex:1 1 100%}
  .hero-search{padding-left:14px}
  .hero-search button{padding:0 16px}
  .court-stage{height:290px}
  .court{--cw:148px}
  .zone-tag{font-size:12px;padding:6px 11px}
}

/* ---------- Movimiento reducido: la bola ya está en el suelo ---------- */
@media (prefers-reduced-motion:reduce){
  .ball,.ball-shadow{animation:none;opacity:0}
  .ball-bounce{animation:none;opacity:.55}
  .zone-tag,.zone,.hero-btn{transition:none}
}