/* ---------- Colores de Las Heras: verde césped y amarillo pelota (de su logo) ---------- */
:root {
  --fondo: #f2f5ee;
  --fondo-2: #e2eadd;
  --papel: #ffffff;
  --tinta: #0c1f14;
  --tinta-suave: #475a4d;
  --primario: #0e5530;     /* césped a la sombra de las palmeras */
  --primario-2: #0a3d22;
  --verde: #1a9a4b;        /* el verde del logo */
  --acento: #f6b519;       /* la pelota */
  --acento-tinta: #1d1400;
  --tablero: #08100b;
  --led: #f6b519;
  --led-apagado: rgba(246, 181, 25, 0.1);
  --led-verde: #5dff9b;
  --led-rojo: #ff5a4d;
  --linea: rgba(12, 31, 20, 0.14);
  --pasto: #17844a;
  --pasto-2: #1d9555;
  --polvo: #2f6fb5;        /* las de pádel son azules */
  --polvo-2: #3a7cc4;
  --arena: #b5895a;
  --arena-2: #c29766;

  --sale: cubic-bezier(0.22, 1, 0.36, 1);   /* una sola curva para todo */
  --rapido: 160ms;
  --medio: 280ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1.0625rem/1.55 "Barlow", system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

.caja { width: min(1160px, 100% - 32px); margin-inline: auto; }
.seccion { padding-block: clamp(64px, 9vw, 128px); }

.titulo {
  margin: 0 0 12px;
  font: 900 clamp(2.4rem, 6vw, 4.2rem)/0.92 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.intro { margin: 0 0 32px; color: var(--tinta-suave); max-width: 40em; }
.intro-oscura { margin: 0 0 32px; color: rgba(255, 255, 255, 0.82); }

.enlace {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--acento);
  padding-bottom: 2px;
  cursor: pointer;
  transition: color var(--rapido);
}
.enlace:hover { color: var(--verde); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 800 1.2rem/1 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rapido) var(--sale), background-color var(--rapido), opacity var(--rapido);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: scale(0.97); }
.boton-pelota { background: var(--acento); color: var(--acento-tinta); }
.boton-pelota:hover { background: #ffc634; }
.boton-linea { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.boton-linea:hover { background: rgba(255, 255, 255, 0.12); }
.boton-claro { background: var(--papel); color: var(--tinta); }
.boton-mp { background: #009ee3; color: #fff; }
.boton-wa { background: #25d366; color: #06290f; }
.boton-chico { min-height: 42px; padding: 8px 18px; font-size: 1.05rem; }
.boton-ancho { width: 100%; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.enlace-boton {
  display: block;
  margin: 14px auto 0;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- Aviso y barra ---------- */
.aviso {
  margin: 0;
  background: var(--acento);
  color: var(--acento-tinta);
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 7px 16px;
}
.barra { position: sticky; top: 0; z-index: 20; background: var(--primario-2); color: #fff; }
.barra-dentro { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 900 1.55rem/1 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.marca b { color: var(--acento); font-weight: 900; }
.logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 12% 48%; background: #fff; flex: none; }
.nav { display: flex; gap: 22px; margin-left: auto; font-weight: 600; }
.nav a { text-decoration: none; opacity: 0.85; transition: opacity var(--rapido); }
.nav a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---------- Portada ---------- */
.portada { position: relative; isolation: isolate; overflow: hidden; background: var(--primario-2); color: #fff; }
.portada-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  animation: acerca 18s var(--sale) both;
}
@keyframes acerca { from { transform: scale(1.08); } to { transform: scale(1); } }
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* velo neutro para leer el texto sobre la foto */
  background: linear-gradient(90deg, rgba(4, 18, 10, 0.88) 0%, rgba(4, 18, 10, 0.6) 55%, rgba(4, 18, 10, 0.25) 100%);
}
.portada-dentro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: 40px;
  min-height: min(82vh, 700px);
  padding-block: 80px 60px;
}
h1 {
  margin: 0;
  max-width: 11ch;
  font: 900 clamp(3.4rem, 9vw, 7rem)/0.86 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
  text-wrap: balance;
}
.bajada { max-width: 32em; margin: 24px 0 30px; font-size: 1.18rem; color: rgba(255, 255, 255, 0.92); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* El tablero del complejo */
.tablero {
  justify-self: end;
  width: min(100%, 380px);
  padding: 18px 20px 16px;
  border: 3px solid #26302a;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px) 0 0 / 6px 6px, var(--tablero);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.tablero-fila { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.tablero-celda { display: grid; gap: 4px; }
.tablero-celda + .tablero-celda { border-left: 2px solid #1f2722; padding-left: 16px; }
.tablero-rotulo { font: 700 0.95rem/1.1 "Barlow", sans-serif; color: rgba(255, 255, 255, 0.6); }
.tablero-num {
  font: 800 clamp(2.6rem, 5vw, 3.4rem)/1 "Doto", monospace;
  color: var(--led);
  text-shadow: 0 0 12px rgba(246, 181, 25, 0.55);
  font-variant-numeric: tabular-nums;
}
.dos-puntos { animation: titila 2s steps(1) infinite; }
@keyframes titila { 50% { opacity: 0.15; } }
.tablero-estado {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 2px solid #1f2722;
  font: 800 1.05rem/1.25 "Doto", monospace;
  text-transform: uppercase;
  color: var(--led-rojo);
  text-shadow: 0 0 10px rgba(255, 90, 77, 0.5);
}
.tablero-estado.abierto { color: var(--led-verde); text-shadow: 0 0 10px rgba(93, 255, 155, 0.5); }

/* ---------- Comodidades ---------- */
.comodidades { background: var(--acento); color: var(--acento-tinta); }
.comodidades ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin: 0 auto;
  padding: 14px 0;
  list-style: none;
  font: 800 1.15rem/1.2 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.comodidades li + li::before { content: "●"; margin-inline: 14px; font-size: 0.6em; vertical-align: 0.2em; color: var(--primario); }

/* ---------- Turnero ---------- */
.reservar { padding-block: clamp(64px, 9vw, 120px); background: var(--primario); color: #fff; }
.reservar .titulo { color: #fff; }
.reservar-grilla { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.reservar-grilla > * { min-width: 0; }
.pasos fieldset { margin: 0 0 34px; padding: 0; border: 0; min-width: 0; transition: opacity var(--medio); }
.pasos fieldset:disabled { opacity: 0.45; }
.pasos legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0;
  font: 800 1.4rem/1 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-tinta);
  font-size: 1.1rem;
}
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: grid;
  gap: 2px;
  min-width: 64px;
  min-height: 48px;
  align-content: center;
  padding: 10px 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--rapido) var(--sale);
}
.chip span:active { transform: scale(0.96); }
.chip small { font-weight: 500; font-size: 0.85rem; opacity: 0.85; }
.dias small { text-transform: capitalize; }
.dias b { font: 900 1.6rem/1 "Big Shoulders Display", sans-serif; }
.chip span:hover { border-color: #fff; }
.chip input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.chip input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.deportes .chip span { min-width: 120px; padding: 12px 20px; font: 800 1.35rem/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.deportes small { font: 500 0.85rem/1.2 "Barlow", sans-serif; text-transform: none; }
.duracion { margin-bottom: 12px; }

/* Tamaño de la cancha de fútbol: se elige antes que la hora */
.tamanos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; max-width: 640px; }
.tamano { position: relative; }
.tamano input { position: absolute; opacity: 0; pointer-events: none; }
.tamano span {
  display: grid; justify-items: start; gap: 6px; height: 100%; padding: 14px 16px;
  border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 12px; cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--rapido) var(--sale);
}
.tamano span:hover { border-color: #fff; }
.tamano span:active { transform: scale(0.97); }
.tamano .sigla { font-size: 1.6rem; padding: 4px 10px; }
.tamano b { font: 900 1.35rem/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.tamano small { font-size: 0.88rem; opacity: 0.85; }
.tamano input:checked + span { background: #fff; border-color: #fff; color: var(--tinta); }
.tamano input:checked + span .sigla.s-f5 { background: var(--primario); color: #fff; }
.tamano input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
.duracion .chip span { min-height: 40px; padding: 6px 16px; }

/* Horas: un tablero de luces */
.horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px) 0 0 / 6px 6px, var(--tablero);
}
.horas .chip span {
  min-height: 62px;
  padding: 10px 6px 8px;
  border: 0;
  border-radius: 8px;
  background: var(--led-apagado);
  color: var(--led);
}
.horas .chip b { font: 800 1.35rem/1 "Barlow", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.horas .chip small { font: 600 0.78rem/1.1 "Barlow", sans-serif; color: rgba(255, 255, 255, 0.7); }
.horas .chip span:hover { background: rgba(246, 181, 25, 0.2); }
.horas .chip input:checked + span { background: var(--led); color: var(--tablero); box-shadow: 0 0 18px rgba(246, 181, 25, 0.6); }
.horas .chip input:checked + span small { color: var(--tablero); }
.horas .chip input:disabled + span { background: transparent; color: rgba(255, 255, 255, 0.22); cursor: not-allowed; }
.horas .chip input:disabled + span small { color: rgba(255, 255, 255, 0.3); }
.horas .promo small { color: var(--led-verde); }
.horas .chip { animation: prende var(--medio) var(--sale) both; animation-delay: calc(var(--i, 0) * 12ms); }
@keyframes prende { from { opacity: 0; transform: scale(0.94); } }
.sin-opciones { grid-column: 1 / -1; margin: 0; padding: 14px 8px; color: rgba(255, 255, 255, 0.75); font-weight: 600; }

/* Canchas libres a esa hora */
.libres { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.libre input { position: absolute; opacity: 0; pointer-events: none; }
.libre { position: relative; }
.libre span {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--rapido) var(--sale);
  animation: prende var(--medio) var(--sale) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.libre span:hover { border-color: #fff; }
.libre span:active { transform: scale(0.98); }
.libre b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font: 900 1.9rem/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
/* Sigla de la cancha: F5, F7, F8/9 se distinguen de un vistazo */
.sigla {
  display: inline-block; padding: 3px 9px; border-radius: 6px; font-style: normal;
  font: 900 1.15rem/1 "Big Shoulders Display", sans-serif; letter-spacing: 0.03em;
  background: #fff; color: var(--primario-2);
}
.sigla.s-f7 { background: var(--acento); color: var(--acento-tinta); }
.sigla.s-f89 { background: #ef7d2d; color: #2a1000; }
.sigla.s-padel { background: #8fc3f2; color: #0b2a4a; }
.sigla.s-hockey { background: #d8b27f; color: #2e1d07; }
.libre input:checked + span .sigla { background: var(--acento-tinta); color: #fff; }
.libre small { grid-column: 1; min-width: 0; font-size: 0.9rem; opacity: 0.85; }
.libre em { grid-row: 2; grid-column: 2; white-space: nowrap; font: 800 1.2rem/1 "Big Shoulders Display", sans-serif; font-style: normal; }
.libre input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.libre input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; }
.campo { display: grid; gap: 6px; font-weight: 600; align-content: start; }
.campo small { font-weight: 500; font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); }
.campo input {
  min-height: 52px;
  padding: 10px 14px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: 1.05rem;
  transition: border-color var(--rapido);
}
.campo input:focus { border-color: var(--acento); outline: none; }
.campo input[aria-invalid="true"] { border-color: var(--led-rojo); }
.metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; margin-top: 20px; }
.metodo { position: relative; }
.metodo input { position: absolute; opacity: 0; pointer-events: none; }
.metodo span {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido);
}
.metodo b { font: 800 1.25rem/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.metodo small { font-size: 0.9rem; opacity: 0.85; }
.metodo input:checked + span { background: #fff; border-color: #fff; color: var(--tinta); }
.metodo input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }

/* La planilla */
.planilla {
  position: sticky;
  top: 92px;
  padding: 22px 22px 18px;
  border-radius: 12px;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}
.planilla-cabeza {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--tinta);
  font: 900 1.2rem/1.1 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
}
.planilla-cabeza span + span { color: var(--tinta-suave); text-align: right; }
.planilla-datos { margin: 0 0 18px; }
.dato { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed rgba(12, 31, 20, 0.22); }
.dato dt { color: var(--tinta-suave); font-weight: 500; }
.dato dd { margin: 0; font-weight: 700; text-align: right; }
.dato.total { border-bottom: 0; padding-top: 14px; }
.dato.total dd { font: 900 1.7rem/1 "Big Shoulders Display", sans-serif; }
.dato.senia dd { color: var(--verde); }
.vacio { color: #a9b3ac; font-weight: 500; }
.recien dd { animation: marca 0.7s var(--sale); }
@keyframes marca { from { background: rgba(246, 181, 25, 0.45); } to { background: transparent; } }
.falta { margin: 12px 0 0; font-size: 0.93rem; color: var(--tinta-suave); text-align: center; }
.falta.error { color: #b3261e; font-weight: 600; }

/* Comprobante */
#comprobante { animation: aparece var(--medio) var(--sale); outline: none; }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } }
.cuenta {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 6px 0 10px;
  padding: 14px;
  border-radius: 10px;
  background: var(--tablero);
}
.cuenta-num { font: 800 2.8rem/1 "Doto", monospace; color: var(--led); text-shadow: 0 0 12px rgba(246, 181, 25, 0.55); font-variant-numeric: tabular-nums; }
.cuenta-texto { color: rgba(255, 255, 255, 0.75); font-weight: 600; font-size: 0.92rem; }
.cuenta.firme { background: var(--verde); }
.cuenta.firme .cuenta-num { color: #fff; text-shadow: none; font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: 2.2rem; text-transform: uppercase; }
.cuenta.firme .cuenta-texto { color: rgba(255, 255, 255, 0.9); }
.cuenta.vencida .cuenta-num { color: var(--led-rojo); text-shadow: 0 0 12px rgba(255, 90, 77, 0.5); }
.alias {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--fondo-2);
}
.alias b { font-size: 1.15rem; word-break: break-all; }
.alias button { flex: none; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 700; cursor: pointer; transition: transform var(--rapido) var(--sale); }
.alias button:active { transform: scale(0.95); }
#comp-acciones { display: grid; gap: 10px; }
.muestra-nota { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: #fff6dc; color: #5c4400; font-size: 0.88rem; font-weight: 600; }

/* ---------- Canchas ---------- */
.canchas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.cancha {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--papel);
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  transition: transform var(--medio) var(--sale), box-shadow var(--medio) var(--sale);
}
.cancha:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(12, 31, 20, 0.14); }
.cancha:active { transform: translateY(-1px) scale(0.99); }
.cancha-cesped { position: relative; padding: 18px; background: repeating-linear-gradient(90deg, var(--pasto) 0 25px, var(--pasto-2) 25px 50px); }
.cancha-cesped.padel { background: repeating-linear-gradient(90deg, var(--polvo) 0 25px, var(--polvo-2) 25px 50px); }
.cancha-cesped.hockey { background: repeating-linear-gradient(90deg, var(--arena) 0 25px, var(--arena-2) 25px 50px); }
.cancha-cesped img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.cancha-dibujo { display: block; width: 100%; height: auto; }
.cancha-dibujo * { fill: none; stroke: rgba(255, 255, 255, 0.92); stroke-width: 2; }
.cancha-dibujo .punto { fill: #fff; }
.cancha-cantidad {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--tablero);
  font: 800 1.15rem/1 "Doto", monospace;
  color: var(--led);
}
.cancha-info { display: grid; align-content: start; gap: 4px; padding: 16px 18px 20px; }
.cancha-nombre { font: 900 2rem/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.cancha-tipo { font-weight: 600; color: var(--tinta-suave); }
.cancha-precios { display: grid; gap: 2px; margin-top: 10px; font-size: 0.98rem; }
.cancha-precios div { display: flex; justify-content: space-between; gap: 12px; }
.cancha-precios b { font-weight: 700; }
.cancha-precios .promo b { color: var(--verde); }

/* ---------- Trasnoche ---------- */
.trasnoche { background: var(--tablero); color: #fff; padding-block: clamp(48px, 6vw, 72px); }
.trasnoche-dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.trasnoche .titulo { color: var(--led); max-width: 16ch; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.trasnoche p { margin: 0; max-width: 36em; color: rgba(255, 255, 255, 0.86); font-size: 1.1rem; }

/* ---------- El complejo ---------- */
.complejo-grilla { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; margin-top: 28px; }
.complejo-foto { margin: 0; }
.complejo-foto img { width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 12px; }
.complejo-foto figcaption { margin-top: 10px; color: var(--tinta-suave); font-size: 0.95rem; }
.ademas { display: grid; gap: 26px; }
.ademas h3 { margin: 0 0 4px; font: 900 1.8rem/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.ademas p { margin: 0 0 8px; }
.ademas article { padding-left: 18px; border-left: 6px solid var(--acento); }

/* ---------- Dónde ---------- */
.donde { padding-block: clamp(64px, 9vw, 120px); background: var(--primario-2); color: #fff; }
.donde-grilla { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: stretch; }
.direccion { margin: 0 0 14px; font-size: 1.3rem; font-weight: 700; }
.horario { margin: 0 0 10px; color: rgba(255, 255, 255, 0.88); }
.horario b { color: var(--acento); }
.donde .acciones { margin-top: 24px; }
.mapa { width: 100%; height: 100%; min-height: 380px; border: 0; border-radius: 12px; }

/* ---------- Pie ---------- */
.pie { padding-block: 36px 100px; background: var(--tablero); color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }
.pie-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.pie p { margin: 0; }
.pie-marca { display: inline-flex; align-items: center; gap: 10px; font: 900 1.5rem/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; color: #fff; }
.pie-marca .logo { width: 36px; height: 36px; }
.pie a { color: #fff; font-weight: 700; }

.wa-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform var(--rapido) var(--sale);
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante:active { transform: scale(0.95); }
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Movimiento de entrada ---------- */
.entra { animation: sube 700ms var(--sale) both; }
.portada-texto .entra:nth-child(2) { animation-delay: 90ms; }
.portada-texto .entra:nth-child(3) { animation-delay: 180ms; }
.tablero.entra { animation-delay: 260ms; }
@keyframes sube { from { opacity: 0; transform: translateY(24px); } }
/* Solo se esconde si el script está y avisó; sin script, todo se ve */
.js .revela { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--sale), transform 600ms var(--sale); transition-delay: calc(var(--i, 0) * 80ms); }
.js .revela.visto { opacity: 1; transform: none; }

/* ---------- Celular ---------- */
@media (max-width: 960px) {
  .portada-dentro { grid-template-columns: 1fr; align-items: start; min-height: 0; padding-block: 56px 40px; }
  .tablero { justify-self: start; }
  .reservar-grilla { grid-template-columns: 1fr; }
  .planilla { position: static; }
  .complejo-grilla, .donde-grilla { grid-template-columns: 1fr; }
  .mapa { min-height: 300px; }
}
@media (max-width: 639px) {
  .nav { display: none; }
  .barra-dentro { justify-content: space-between; gap: 12px; }
  .marca { font-size: 1.3rem; }
  .logo { width: 38px; height: 38px; }
  .portada::after { background: linear-gradient(0deg, rgba(4, 18, 10, 0.94) 35%, rgba(4, 18, 10, 0.5) 100%); }
  .acciones .boton { flex: 1 1 100%; }
  .comodidades ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 1.02rem; }
  .comodidades li + li::before { content: none; }
  .comodidades li::before { content: "● "; font-size: 0.6em; vertical-align: 0.2em; color: var(--primario); }
  .deportes { display: grid; grid-template-columns: repeat(3, 1fr); }
  .deportes .chip span { min-width: 0; padding: 12px 6px; font-size: 1.15rem; }
  .dias { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .dias .chip { flex: none; scroll-snap-align: start; }
  .horas { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .horas .chip b { font-size: 1.2rem; }
  .libres, .campos, .metodos { grid-template-columns: 1fr; }
  .tamanos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tamano span { padding: 12px 8px; justify-items: center; text-align: center; }
  .tamano .sigla { font-size: 1.4rem; }
  .tamano b { font-size: 1rem; }
  .tamano small { font-size: 0.78rem; }
  .cancha { grid-template-columns: 42% 1fr; grid-template-rows: none; }
  .cancha-cesped { padding: 12px 10px; display: grid; align-items: center; }
  .cancha-info { padding: 14px; }
  .cancha-nombre { font-size: 1.6rem; }
  .cancha-precios { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revela { opacity: 1; transform: none; }
}