/* ==========================================================================
   Padel Camila — styles.css
   Se arma concatenando: base.css + componentes.css + movimiento.css
   Todo valor de diseño sale del bloque :root de acá abajo.
   ========================================================================== */

:root {
  /* ---- Color: marca azul (el azul de las canchas) ---- */
  --azul-950: #061441;
  --azul-900: #0a1f5c;
  --azul-800: #0f2f8f;
  --azul-700: #1646c8;
  --azul-300: #8fb0ff;
  --azul-100: #e3ecff;
  --azul-50: #f4f8ff;
  --blanco: #ffffff;

  /* ---- Color: acento único (pelota de pádel). Solo para Reservar ---- */
  --acento: #d8f43a;
  --sobre-acento: var(--azul-900);

  /* ---- Color: roles ---- */
  --tinta: var(--azul-900);
  --tinta-suave: #3b4c85;
  --enlace: var(--azul-700);
  --foco: var(--azul-700);
  --peligro: #b3261e;
  --exito: #0e7c4a;
  --pendiente-fondo: #fff1b8;

  /* ---- Espaciado: una sola escala ---- */
  --e-4: 4px;
  --e-8: 8px;
  --e-12: 12px;
  --e-16: 16px;
  --e-24: 24px;
  --e-32: 32px;
  --e-48: 48px;
  --e-64: 64px;
  --e-96: 96px;
  --e-128: 128px;

  /* ---- Tipografía ---- */
  --fuente-titulos: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-1: 0.8rem;
  --t-2: 0.9rem;
  --t-3: 1rem;
  --t-4: 1.15rem;
  --t-5: 1.4rem;
  --t-6: 1.75rem;
  --t-7: 2.25rem;
  --t-8: 3rem;
  --t-hero: clamp(2.5rem, 1.1rem + 5.2vw, 4.25rem);
  --t-h1: clamp(var(--t-7), 1.4rem + 3.4vw, var(--t-8));
  --t-h2: clamp(var(--t-6), 1.3rem + 2vw, var(--t-7));
  --t-h3: clamp(var(--t-4), 1rem + 0.8vw, var(--t-5));
  --lh-titulo: 1.05;
  --lh-texto: 1.6;

  /* ---- Forma ---- */
  --radio-card: 20px;
  --radio-boton: 12px;
  --sombra-1: 0 var(--e-4) var(--e-12) color-mix(in srgb, var(--azul-900) 14%, transparent);
  --sombra-2: 0 var(--e-16) var(--e-32) color-mix(in srgb, var(--azul-900) 24%, transparent);
  --borde: 1px;
  --borde-2: 2px;
  --borde-3: 3px;

  /* ---- Layout ---- */
  --ancho-max: 1160px;
  --aire: 20px;
  --sec-y: var(--e-64);
  --alto-tap: var(--e-48);
  --alto-header: var(--e-64);
  --lectura: 65ch;
}

@media (min-width: 900px) {
  :root {
    --sec-y: var(--e-96);
  }
}

/* ---- Reset mínimo ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-header) + var(--e-16));
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fuente-texto);
  font-size: var(--t-3);
  line-height: var(--lh-texto);
  color: var(--tinta);
  background: var(--blanco);
  overflow-x: clip;
}

main {
  flex: 1 0 auto;
  display: block;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  line-height: var(--lh-titulo);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  text-transform: uppercase;
}

h2 {
  font-size: var(--t-h2);
  text-transform: uppercase;
}

h3 {
  font-size: var(--t-h3);
  font-weight: 700;
}

p {
  margin: 0;
  max-width: var(--lectura);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--enlace);
  text-underline-offset: var(--e-4);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

address {
  font-style: normal;
}

[hidden] {
  display: none !important;
}

/* ---- Foco visible ---- */
:focus-visible {
  outline: var(--borde-3) solid var(--foco);
  outline-offset: var(--e-4);
}

.sec--oscura,
.cabecera,
.pie,
.menu-movil {
  --foco: var(--blanco);
}

/* ---- Accesibilidad ---- */
.solo-lector {
  position: absolute;
  width: var(--borde);
  height: var(--borde);
  margin: calc(var(--borde) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: var(--e-16);
  top: calc(var(--e-64) * -2);
  z-index: 100;
  padding: var(--e-12) var(--e-16);
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--tinta);
  font-weight: 800;
}

.saltar:focus {
  top: var(--e-16);
}

/* ---- Contenedor y secciones ---- */
.contenedor {
  width: min(100% - 2 * var(--aire), var(--ancho-max));
  margin-inline: auto;
}

.sec {
  position: relative;
  padding-block: var(--sec-y);
  overflow-x: clip;
}

.sec--blanca {
  background: var(--blanco);
  color: var(--tinta);
}

.sec--tenue {
  background: var(--azul-100);
  color: var(--tinta);
}

.sec--oscura {
  background: var(--azul-900);
  color: var(--blanco);
}

.sec--oscura a:not(.btn) {
  color: var(--blanco);
}

.sec__cab {
  display: grid;
  gap: var(--e-12);
  margin-bottom: var(--e-32);
}

.sec__cab p {
  color: var(--tinta-suave);
}

.sec--oscura .sec__cab p,
.sec--oscura .suave {
  color: var(--azul-100);
}

.eyebrow {
  font-family: var(--fuente-titulos);
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--enlace);
}

.sec--oscura .eyebrow {
  color: var(--azul-300);
}

.suave {
  color: var(--tinta-suave);
}

.centrado {
  text-align: center;
  justify-items: center;
}

/* ==========================================================================
   COMPONENTES
   ========================================================================== */

/* ---- Iconos ---- */
.ico {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--s {
  width: 1.15rem;
  height: 1.15rem;
}

.ico--estrella {
  fill: currentColor;
  stroke: none;
}

/* ---- Botones ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-8);
  min-height: var(--alto-tap);
  padding: var(--e-12) var(--e-24);
  border: var(--borde-2) solid transparent;
  border-radius: var(--radio-boton);
  font-family: var(--fuente-texto);
  font-size: var(--t-3);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  transform: translateY(calc(var(--e-4) * -0.5));
}

.btn:active {
  transform: none;
}

/* El único uso del acento: lo que hay que tocar para reservar */
.btn--reservar {
  background: var(--acento);
  color: var(--sobre-acento);
  border-color: var(--azul-900);
  box-shadow: var(--sombra-1);
}

.btn--reservar:hover {
  box-shadow: var(--sombra-2);
}

.sec--oscura .btn--reservar,
.cabecera .btn--reservar,
.menu-movil .btn--reservar,
.barra-fija .btn--reservar {
  border-color: var(--acento);
}

.btn--primario {
  background: var(--azul-700);
  color: var(--blanco);
  border-color: var(--azul-700);
}

.btn--primario:hover {
  background: var(--azul-800);
  border-color: var(--azul-800);
}

.btn--contorno {
  background: transparent;
  color: var(--azul-700);
  border-color: var(--azul-700);
}

.btn--contorno:hover {
  background: var(--azul-50);
}

.btn--claro {
  background: transparent;
  color: var(--blanco);
  border-color: var(--blanco);
}

.btn--claro:hover {
  background: color-mix(in srgb, var(--blanco) 14%, transparent);
}

.btn--chico {
  min-height: var(--alto-tap);
  padding: var(--e-8) var(--e-16);
  font-size: var(--t-2);
}

.btn--ancho {
  width: 100%;
}

.fila-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-12);
}

/* ---- Aviso configurable ---- */
.aviso {
  background: var(--azul-100);
  color: var(--tinta);
  padding: var(--e-8) var(--aire);
  text-align: center;
  font-weight: 700;
  font-size: var(--t-2);
}

.aviso p {
  max-width: none;
}

/* ---- Cabecera ---- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--azul-900);
  color: var(--blanco);
  border-bottom: var(--borde) solid color-mix(in srgb, var(--blanco) 18%, transparent);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e-12);
  min-height: var(--alto-header);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-8);
  margin-right: auto;
  color: var(--blanco);
  text-decoration: none;
  min-width: 0;
}

.logo__marca {
  width: var(--e-32);
  height: var(--e-32);
  flex: none;
}

.logo__marca .lm-fondo {
  fill: var(--azul-700);
}

.logo__marca .lm-linea {
  fill: none;
  stroke: var(--blanco);
  stroke-width: 3;
}

.logo__marca .lm-pelota {
  fill: var(--blanco);
}

.logo__texto {
  display: grid;
  line-height: 1;
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  min-width: 0;
}

.logo__texto strong {
  font-size: var(--t-5);
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.logo__texto small {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--azul-300);
}

.nav-principal {
  display: none;
}

.nav-principal ul {
  display: flex;
  gap: var(--e-8);
}

.nav-principal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-tap);
  padding: var(--e-8) var(--e-12);
  border-radius: var(--radio-boton);
  color: var(--blanco);
  font-weight: 700;
  text-decoration: none;
}

.nav-principal a:hover {
  background: color-mix(in srgb, var(--blanco) 12%, transparent);
}

.nav-principal a[aria-current="page"] {
  box-shadow: inset 0 calc(var(--borde-3) * -1) 0 var(--azul-300);
  border-radius: 0;
}

.menu-boton {
  display: inline-grid;
  place-items: center;
  width: var(--alto-tap);
  height: var(--alto-tap);
  padding: 0;
  border: var(--borde-2) solid color-mix(in srgb, var(--blanco) 40%, transparent);
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--blanco);
}

.cabecera .btn--reservar {
  display: none;
  padding-inline: var(--e-16);
  font-size: var(--t-2);
}

@media (min-width: 600px) {
  .cabecera .btn--reservar {
    display: inline-flex;
  }
}

@media (min-width: 900px) {
  .nav-principal {
    display: block;
  }

  .menu-boton {
    display: none;
  }

  .cabecera .btn--reservar {
    padding-inline: var(--e-24);
    font-size: var(--t-3);
  }
}

/* ---- Menú móvil ---- */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--e-24);
  padding: var(--e-16) var(--aire) var(--e-32);
  background: var(--azul-900);
  color: var(--blanco);
  overflow-y: auto;
}

.menu-movil__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--e-48);
}

.menu-movil ul {
  display: grid;
  gap: var(--e-8);
}

.menu-movil li a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: var(--alto-tap);
  padding: var(--e-8) 0;
  border-bottom: var(--borde) solid color-mix(in srgb, var(--blanco) 18%, transparent);
  font-family: var(--fuente-titulos);
  font-size: var(--t-6);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blanco);
  text-decoration: none;
}

.menu-movil__datos {
  color: var(--azul-100);
  font-size: var(--t-2);
}

body.menu-abierto {
  overflow: hidden;
}

/* ---- Hero ---- */
.hero {
  background-color: var(--azul-900);
  background-image: linear-gradient(160deg, var(--azul-900) 0%, var(--azul-800) 100%);
  color: var(--blanco);
  padding-block: var(--sec-y);
  overflow-x: clip;
}

.hero__grilla {
  display: grid;
  gap: var(--e-32);
  align-items: center;
}

.hero__texto {
  display: grid;
  gap: var(--e-24);
  justify-items: start;
}

.hero h1 {
  font-size: var(--t-hero);
  line-height: 0.98;
}

.hero h1 em {
  font-style: normal;
  color: var(--azul-300);
  display: block;
}

.hero__lead {
  font-size: var(--t-4);
  color: var(--azul-100);
}

.hero a:not(.btn) {
  color: var(--blanco);
}

.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-12) var(--e-24);
  color: var(--azul-100);
  font-size: var(--t-2);
  font-weight: 700;
}

.hero__datos li {
  display: inline-flex;
  align-items: center;
  gap: var(--e-8);
}

.hero__cancha {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.hero__cancha svg {
  width: 100%;
  height: auto;
}

.hero__cancha .hc-piso {
  fill: var(--azul-700);
}

.hero__cancha .hc-linea {
  fill: none;
  stroke: var(--blanco);
  stroke-width: 4;
  stroke-linecap: round;
}

.hero__cancha .hc-red {
  fill: none;
  stroke: var(--blanco);
  stroke-width: 6;
  stroke-dasharray: 2 10;
  stroke-linecap: butt;
}

.hero__cancha .hc-pelota {
  fill: var(--blanco);
}

.hero--pagina {
  background-image:
    linear-gradient(160deg, color-mix(in srgb, var(--azul-900) 92%, transparent), color-mix(in srgb, var(--azul-800) 82%, transparent)),
    url("img/cancha-lineas-banda.jpg");
  background-size: cover;
  background-position: center;
}

.hero--pagina .hero__texto {
  gap: var(--e-16);
}

.hero--pagina h1 {
  font-size: var(--t-h1);
}

@media (min-width: 900px) {
  .hero__grilla {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--e-64);
  }
}

/* ---- Chip de estado ---- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-8);
  padding: var(--e-4) var(--e-12);
  border-radius: var(--radio-boton);
  background: var(--azul-100);
  color: var(--tinta);
  font-size: var(--t-2);
  font-weight: 800;
}

.estado__punto {
  width: var(--e-8);
  height: var(--e-8);
  border-radius: var(--radio-boton);
  background: var(--tinta-suave);
}

.estado--abierto .estado__punto {
  background: var(--exito);
}

/* ---- Cards y grillas ---- */
.grilla {
  display: grid;
  gap: var(--e-16);
}

@media (min-width: 640px) {
  .grilla--2,
  .grilla--3,
  .grilla--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grilla {
    gap: var(--e-24);
  }

  .grilla--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grilla--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  display: grid;
  gap: var(--e-12);
  align-content: start;
  padding: var(--e-24);
  border-radius: var(--radio-card);
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: var(--sombra-1);
}

.sec--blanca .card {
  background: var(--azul-50);
  border: var(--borde) solid var(--azul-100);
  box-shadow: none;
}

.sec--oscura .card {
  background: color-mix(in srgb, var(--blanco) 8%, transparent);
  border: var(--borde) solid color-mix(in srgb, var(--blanco) 22%, transparent);
  color: var(--blanco);
  box-shadow: none;
}

.card__icono {
  display: inline-grid;
  place-items: center;
  width: var(--e-48);
  height: var(--e-48);
  border-radius: var(--radio-boton);
  background: var(--azul-700);
  color: var(--blanco);
}

.card p {
  color: var(--tinta-suave);
  font-size: var(--t-2);
}

.sec--oscura .card p {
  color: var(--azul-100);
}

/* ---- Precios ---- */
.precio {
  display: grid;
  gap: var(--e-8);
  align-content: start;
  padding: var(--e-24);
  border-radius: var(--radio-card);
  background: var(--blanco);
  box-shadow: var(--sombra-1);
}

.precio__etiqueta {
  font-weight: 800;
  font-size: var(--t-2);
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.precio p.precio__monto {
  font-family: var(--fuente-titulos);
  font-size: var(--t-8);
  font-weight: 800;
  line-height: 1;
  color: var(--azul-700);
}

.precio p {
  font-size: var(--t-2);
  color: var(--tinta-suave);
}

.precio--destacado {
  background: var(--azul-700);
  color: var(--blanco);
}

.precio--destacado .precio__etiqueta,
.precio--destacado p {
  color: var(--azul-100);
}

.precio--destacado p.precio__monto {
  color: var(--blanco);
}

.dos-col {
  display: grid;
  gap: var(--e-32);
  align-items: center;
}

@media (min-width: 900px) {
  .dos-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-64);
  }

  .dos-col--inv > :first-child {
    order: 2;
  }
}

.foto {
  border-radius: var(--radio-card);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  background: var(--azul-700);
}

.foto img {
  width: 100%;
}

.foto figcaption {
  padding: var(--e-12) var(--e-16);
  font-size: var(--t-2);
  background: var(--blanco);
  color: var(--tinta-suave);
}

figure {
  margin: 0;
}

/* ---- Pasos ---- */
.pasos {
  display: grid;
  gap: var(--e-16);
  counter-reset: paso;
}

.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-16);
  align-items: start;
  padding: var(--e-24);
  border-radius: var(--radio-card);
  background: var(--blanco);
  box-shadow: var(--sombra-1);
}

.paso::before {
  counter-increment: paso;
  content: counter(paso);
  display: grid;
  place-items: center;
  width: var(--e-48);
  height: var(--e-48);
  border-radius: var(--radio-boton);
  background: var(--azul-700);
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-size: var(--t-6);
  font-weight: 800;
}

.paso p {
  font-size: var(--t-2);
  color: var(--tinta-suave);
}

@media (min-width: 900px) {
  .pasos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-24);
  }

  .paso {
    grid-template-columns: 1fr;
  }
}

/* ---- Reseñas ---- */
.resenas__puntaje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-12) var(--e-24);
  margin-bottom: var(--e-32);
}

.resenas__nota {
  font-family: var(--fuente-titulos);
  font-size: var(--t-8);
  font-weight: 800;
  line-height: 1;
}

.estrellas {
  display: inline-flex;
  gap: var(--e-4);
  color: var(--blanco);
}

.resena {
  display: grid;
  gap: var(--e-12);
  align-content: space-between;
  margin: 0;
}

.resena blockquote {
  margin: 0;
  font-size: var(--t-4);
  line-height: 1.4;
}

.resena figcaption {
  font-size: var(--t-2);
  color: var(--azul-100);
  font-weight: 700;
}

/* ---- FAQ ---- */
.faq {
  display: grid;
  gap: var(--e-12);
  max-width: 48rem;
}

.faq details {
  border-radius: var(--radio-boton);
  background: var(--blanco);
  border: var(--borde-2) solid var(--azul-100);
}

.sec--tenue .faq details {
  border-color: var(--blanco);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-16);
  min-height: var(--alto-tap);
  padding: var(--e-12) var(--e-16);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--fuente-titulos);
  font-size: var(--t-6);
  line-height: 1;
  color: var(--azul-700);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details > div {
  padding: 0 var(--e-16) var(--e-16);
  color: var(--tinta-suave);
}

/* ---- Selector de turno ---- */
.turno {
  display: grid;
  gap: var(--e-24);
  padding: var(--e-24);
  border-radius: var(--radio-card);
  background: var(--blanco);
  box-shadow: var(--sombra-2);
  color: var(--tinta);
}

.sec--tenue .turno {
  box-shadow: var(--sombra-1);
}

.turno fieldset {
  display: grid;
  gap: var(--e-12);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.turno legend {
  display: flex;
  align-items: center;
  gap: var(--e-12);
  padding: 0;
  margin-bottom: var(--e-12);
  font-family: var(--fuente-titulos);
  font-size: var(--t-5);
  font-weight: 800;
  text-transform: uppercase;
}

.turno legend span {
  display: inline-grid;
  place-items: center;
  width: var(--e-32);
  height: var(--e-32);
  border-radius: var(--radio-boton);
  background: var(--azul-700);
  color: var(--blanco);
  font-size: var(--t-4);
}

.opciones {
  display: grid;
  gap: var(--e-12);
}

@media (min-width: 480px) {
  .opciones {
    grid-template-columns: 1fr 1fr;
  }
}

.opcion {
  position: relative;
  display: block;
}

.opcion input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcion__caja {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-16);
  min-height: var(--alto-tap);
  border: var(--borde-2) solid var(--azul-100);
  border-radius: var(--radio-boton);
  background: var(--azul-50);
}

.opcion__caja strong {
  font-family: var(--fuente-titulos);
  font-size: var(--t-5);
  text-transform: uppercase;
  line-height: 1;
}

.opcion__caja small {
  color: var(--tinta-suave);
  font-size: var(--t-2);
}

.opcion input:checked + .opcion__caja {
  border-color: var(--azul-700);
  background: var(--azul-100);
  box-shadow: inset 0 0 0 var(--borde) var(--azul-700);
}

.opcion input:focus-visible + .opcion__caja {
  outline: var(--borde-3) solid var(--foco);
  outline-offset: var(--e-4);
}

.contador {
  display: inline-flex;
  align-items: center;
  gap: var(--e-16);
}

.contador button {
  display: inline-grid;
  place-items: center;
  width: var(--alto-tap);
  height: var(--alto-tap);
  padding: 0;
  border: var(--borde-2) solid var(--azul-700);
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--azul-700);
  font-size: var(--t-6);
  font-weight: 800;
  line-height: 1;
}

.contador button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.contador output {
  min-width: var(--e-32);
  text-align: center;
  font-family: var(--fuente-titulos);
  font-size: var(--t-7);
  font-weight: 800;
}

.nota {
  font-size: var(--t-2);
  color: var(--tinta-suave);
}

.resumen {
  display: grid;
  gap: var(--e-8);
  padding: var(--e-16);
  border-radius: var(--radio-boton);
  background: var(--azul-100);
}

.resumen div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-16);
  align-items: baseline;
}

.resumen dt {
  color: var(--tinta-suave);
  font-weight: 700;
}

.resumen dd {
  margin: 0;
  font-weight: 800;
}

.resumen__total dd {
  font-family: var(--fuente-titulos);
  font-size: var(--t-6);
  color: var(--azul-700);
  line-height: 1;
}

.resumen__total dt {
  color: var(--tinta);
}

.resumen dl {
  margin: 0;
  display: grid;
  gap: var(--e-8);
}

.turno-resumen {
  display: grid;
  gap: var(--e-12);
  margin-bottom: var(--e-24);
}

/* ---- Marco de Cal.com ---- */
.cal {
  display: grid;
  gap: var(--e-16);
  margin-top: var(--e-32);
}

.cal__marco {
  border-radius: var(--radio-card);
  overflow: hidden;
  background: var(--blanco);
  box-shadow: var(--sombra-2);
  border: var(--borde) solid var(--azul-100);
}

.cal__marco iframe {
  width: 100%;
  min-height: 46rem;
  border: 0;
  background: var(--blanco);
}

.cal__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-12);
}

/* ---- Pendientes (datos que faltan) ---- */
.pendiente {
  display: inline;
  padding: var(--e-4) var(--e-8);
  border: var(--borde-2) dashed var(--tinta);
  border-radius: var(--radio-boton);
  background: var(--pendiente-fondo);
  color: var(--tinta);
  font-weight: 700;
  font-size: var(--t-2);
}

.pendiente-bloque {
  display: block;
  padding: var(--e-16);
}

/* ---- Datos del club ---- */
.datos {
  display: grid;
  gap: var(--e-16);
}

.dato {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-12);
  align-items: start;
}

.dato .ico {
  margin-top: var(--e-4);
  color: var(--azul-700);
}

.sec--oscura .dato .ico {
  color: var(--azul-300);
}

.dato strong {
  display: block;
}

.dato a,
.dato span,
.dato address {
  overflow-wrap: anywhere;
}

.mapa {
  border-radius: var(--radio-card);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  background: var(--azul-100);
}

.mapa iframe {
  width: 100%;
  height: 22rem;
  border: 0;
}

/* ---- Formulario de consulta ---- */
.formulario {
  display: grid;
  gap: var(--e-16);
  padding: var(--e-24);
  border-radius: var(--radio-card);
  background: var(--blanco);
  box-shadow: var(--sombra-1);
}

.campo {
  display: grid;
  gap: var(--e-8);
}

.campo label {
  font-weight: 800;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--alto-tap);
  padding: var(--e-12) var(--e-16);
  border: var(--borde-2) solid var(--tinta-suave);
  border-radius: var(--radio-boton);
  background: var(--blanco);
}

.campo textarea {
  min-height: 8rem;
  resize: vertical;
}

.campo [aria-invalid="true"] {
  border-color: var(--peligro);
}

.campo__error {
  color: var(--peligro);
  font-size: var(--t-2);
  font-weight: 700;
}

.resultado {
  display: grid;
  gap: var(--e-12);
  padding: var(--e-16);
  border-radius: var(--radio-boton);
  background: var(--azul-100);
}

.resultado textarea {
  width: 100%;
  min-height: 6rem;
  padding: var(--e-12);
  border: var(--borde) solid var(--tinta-suave);
  border-radius: var(--radio-boton);
  background: var(--blanco);
}

/* ---- Lista con tildes ---- */
.tildes {
  display: grid;
  gap: var(--e-12);
}

.tildes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-12);
  align-items: start;
}

.tildes .ico {
  margin-top: var(--e-4);
  color: var(--azul-700);
}

/* ---- Pie ---- */
.pie {
  background: var(--azul-950);
  color: var(--azul-100);
  padding-block: var(--e-64) var(--e-32);
  font-size: var(--t-2);
}

.pie a {
  color: var(--blanco);
}

.pie__grilla {
  display: grid;
  gap: var(--e-32);
}

.pie h2 {
  font-size: var(--t-4);
  color: var(--blanco);
  margin-bottom: var(--e-12);
}

.pie ul {
  display: grid;
  gap: var(--e-4);
}

.pie ul a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-tap);
}

.pie__legal {
  margin-top: var(--e-48);
  padding-top: var(--e-24);
  border-top: var(--borde) solid color-mix(in srgb, var(--blanco) 18%, transparent);
  color: var(--azul-300);
  font-size: var(--t-1);
  max-width: none;
}

@media (min-width: 900px) {
  .pie__grilla {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

/* ---- Barra fija mobile ---- */
.barra-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: var(--e-8);
  padding: var(--e-8) var(--aire);
  background: var(--azul-900);
  border-top: var(--borde) solid color-mix(in srgb, var(--blanco) 18%, transparent);
}

.barra-fija .btn {
  flex: 1;
}

.barra-fija .btn--claro {
  flex: 0 0 auto;
}

body.con-barra {
  padding-bottom: calc(var(--e-48) + var(--e-24));
}

@media (min-width: 900px) {
  .barra-fija {
    display: none;
  }

  body.con-barra {
    padding-bottom: 0;
  }
}

/* ---- Utilidades ---- */
.mt-24 {
  margin-top: var(--e-24);
}

.mt-32 {
  margin-top: var(--e-32);
}

.angosto {
  max-width: 48rem;
}

.fila-botones--centro {
  justify-content: center;
}

.mapa__nota {
  padding: var(--e-24);
}

.apilado {
  display: grid;
  gap: var(--e-16);
  justify-items: start;
}

/* ==========================================================================
   MOVIMIENTO — todas las clases de animación llevan prefijo mov-
   Se respeta prefers-reduced-motion al final.
   ========================================================================== */

/* Aparición al scroll (solo si hay JS: sin JS todo se ve) */
.js .mov-revelar {
  opacity: 0;
  transform: translateY(var(--e-24));
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--mov-demora, 0s);
}

.js .mov-revelar.mov-visto {
  opacity: 1;
  transform: none;
}

/* Cancha del hero: las líneas se dibujan y la pelota hace un peloteo */
.mov-trazo {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mov-dibujar 1.8s ease forwards;
  animation-delay: var(--mov-demora, 0s);
}

@keyframes mov-dibujar {
  to {
    stroke-dashoffset: 0;
  }
}

.mov-pelota {
  offset-path: path("M100 210 C 150 40, 250 40, 280 120 S 410 40, 460 210 S 150 262, 100 210");
  offset-rotate: 0deg;
  animation: mov-peloteo 3.6s ease-in-out 1.6s infinite;
}

@keyframes mov-peloteo {
  0% {
    offset-distance: 0%;
  }

  50% {
    offset-distance: 50%;
  }

  100% {
    offset-distance: 100%;
  }
}

/* El botón principal del hero respira una vez */
.mov-latido {
  animation: mov-latido 2.4s ease-out 1.2s 2;
}

@keyframes mov-latido {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent);
  }

  70% {
    box-shadow: 0 0 0 var(--e-16) color-mix(in srgb, var(--acento) 0%, transparent);
  }

  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 0%, transparent);
  }
}

/* Entrada del menú móvil */
.menu-movil:not([hidden]) {
  animation: mov-menu 0.22s ease-out;
}

@keyframes mov-menu {
  from {
    opacity: 0;
    transform: translateY(calc(var(--e-16) * -1));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .mov-revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mov-trazo {
    animation: none;
    stroke-dashoffset: 0;
  }

  .mov-pelota {
    animation: none;
    offset-distance: 25%;
  }

  .mov-latido,
  .menu-movil:not([hidden]) {
    animation: none;
  }

  .btn {
    transition: none;
  }
}