/* =====================================================================
   AgendaK — hoja de estilos general
   Identidad: precisión y calma en la gestión del tiempo — el arco con
   aguja (heredado del origen kinesiológico del proyecto) es el motivo
   recurrente, reinterpretado como indicador de hora disponible.
   Fraunces solo en el nombre del sistema y titulares públicos; el panel
   interno usa Plex Sans/Mono de forma sobria. Mobile-first, AA mínimo.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,380;9..144,450;9..144,600&family=IBM+Plex+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --color-fondo: #EEF2EF;
  --color-superficie: #FFFFFF;
  --color-texto: #17231F;
  --color-texto-suave: #56645F;
  --color-borde: #D7DFDA;

  --color-primario: #1F6E5C;
  --color-primario-oscuro: #143F35;
  --color-primario-suave: #DCEAE5;

  --color-peligro: #B24B3C;
  --color-peligro-suave: #F6E3DF;
  --color-advertencia: #96691E;
  --color-advertencia-suave: #F3E7CE;

  --color-confirmada: #1F6E5C;
  --color-pendiente: #96691E;
  --color-cancelada: #B24B3C;

  --color-tinta: #16302B;
  --color-movimiento: #E8622C;
  --color-movimiento-oscuro: #C94F20;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --radio: 14px;
  --sombra: 0 2px 10px rgba(15,35,30,.07), 0 1px 2px rgba(15,35,30,.05);
  font-size: 18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-fondo: #0E1A17;
    --color-superficie: #16221E;
    --color-texto: #ECF2EF;
    --color-texto-suave: #9AAAA3;
    --color-borde: #2A3A34;
    --color-primario: #4FAE93;
    --color-primario-oscuro: #86D2BA;
    --color-primario-suave: #1D3931;
    --color-peligro: #E08469;
    --color-peligro-suave: #3A211C;
    --color-advertencia: #D9A94D;
    --color-advertencia-suave: #3A2E15;
    --color-confirmada: #4FAE93;
    --color-pendiente: #D9A94D;
    --color-cancelada: #E08469;
    --color-movimiento: #FF7B4E;
  }
}
:root[data-theme="dark"] {
  --color-fondo: #0E1A17;
  --color-superficie: #16221E;
  --color-texto: #ECF2EF;
  --color-texto-suave: #9AAAA3;
  --color-borde: #2A3A34;
  --color-primario: #4FAE93;
  --color-primario-oscuro: #86D2BA;
  --color-primario-suave: #1D3931;
  --color-peligro: #E08469;
  --color-peligro-suave: #3A211C;
  --color-advertencia: #D9A94D;
  --color-advertencia-suave: #3A2E15;
  --color-confirmada: #4FAE93;
  --color-pendiente: #D9A94D;
  --color-cancelada: #E08469;
  --color-movimiento: #FF7B4E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--font-body); font-weight: 700; margin: 0 0 8px; }
p { margin: 0 0 8px; }
a { color: var(--color-primario); }
:focus-visible { outline: 2px solid var(--color-movimiento); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.cargando { animation: pulso-cargando 1s ease-in-out infinite; }
@keyframes pulso-cargando { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- Etiqueta de marca / eyebrow ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-movimiento);
  font-weight: 600;
  margin: 0 0 10px;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radio);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) ease, filter var(--duration-fast) ease;
}
.boton:hover { transform: translateY(-1px); }
.boton-grande { padding: 16px 24px; font-size: 1.15rem; width: 100%; }
.boton-primario { background: var(--color-movimiento); color: #fff; }
.boton-primario:hover { background: var(--color-movimiento-oscuro); box-shadow: 0 10px 22px -8px rgba(232,98,44,.5); }
.boton-secundario { background: var(--color-superficie); color: var(--color-texto); border: 2px solid var(--color-borde); }
.boton-secundario:hover { border-color: var(--color-primario); }
.boton-peligro { background: var(--color-peligro-suave); color: var(--color-peligro); }
.boton-peligro:hover { background: var(--color-peligro); color: #fff; }
.boton-whatsapp { background: #25d366; color: #fff; }
.boton-pequeno { padding: 8px 14px; font-size: .9rem; }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: .95rem; }
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-superficie);
  color: var(--color-texto);
  transition: border-color var(--duration-fast) ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-movimiento);
}
input[readonly], textarea[readonly] {
  background: var(--color-fondo);
  color: var(--color-texto-suave);
  cursor: not-allowed;
  font-family: var(--font-mono);
  letter-spacing: .02em;
}

/* ---------- Login ---------- */
.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-fondo);
}
.tarjeta-login {
  background: var(--color-superficie);
  border-radius: 20px;
  box-shadow: var(--sombra);
  padding: 40px 32px;
  width: 100%;
  max-width: 440px;
}
.tarjeta-login h1 { font-family: var(--font-display); font-weight: 380; font-size: 2rem; letter-spacing: -.01em; }
.subtitulo { color: var(--color-texto-suave); margin-bottom: 20px; }
.ayuda-login { margin-top: 18px; font-size: .9rem; color: var(--color-texto-suave); text-align: center; }

.alerta { padding: 12px 14px; border-radius: var(--radio); margin-bottom: 14px; font-weight: 600; }
.alerta-error { background: var(--color-peligro-suave); color: var(--color-peligro); }
.alerta-exito { background: var(--color-primario-suave); color: var(--color-primario-oscuro); }

/* ---------- Hero de reserva pública ---------- */
.hero-reserva {
  background: var(--color-tinta);
  color: #F4F7F5;
  border-radius: 24px;
  padding: 40px 32px;
  margin-bottom: 24px;
}
.hero-reserva .eyebrow { color: #E8B49C; }
.hero-reserva h1 { font-family: var(--font-display); font-weight: 380; font-size: clamp(1.9rem, 4vw, 2.6rem); color: #fff; text-wrap: balance; letter-spacing: -.01em; }
.hero-reserva p { color: #C3D2CB; max-width: 42ch; }
.goniometro { width: 100%; max-width: 220px; margin: 0 auto; }
.goniometro svg { width: 100%; height: auto; display: block; }
.goniometro .arco-fondo { fill: none; stroke: rgba(244,247,245,.16); stroke-width: 2; }
.goniometro .arco-medida {
  fill: none; stroke: var(--color-movimiento); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 251; stroke-dashoffset: 251;
  animation: medir-angulo var(--duration-dramatic, 900ms) var(--ease-out-expo) .2s forwards;
}
.goniometro .aguja {
  transform-origin: 130px 130px;
  animation: apuntar-angulo var(--duration-dramatic, 900ms) var(--ease-out-expo) .2s forwards;
}
.goniometro .etiqueta-angulo { font-family: var(--font-mono); font-size: 1.4rem; fill: #fff; font-variant-numeric: tabular-nums; }
.goniometro .centro-aguja { fill: var(--color-movimiento); }
@keyframes medir-angulo { to { stroke-dashoffset: 62; } }
@keyframes apuntar-angulo { from { transform: rotate(-90deg); } to { transform: rotate(-8deg); } }
@media (max-width: 780px) {
  .hero-reserva { grid-template-columns: 1fr; text-align: center; padding: 32px 24px; }
  .goniometro { max-width: 160px; }
}

/* ---------- Layout de app ---------- */
.app-header {
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.app-header .marca { font-family: var(--font-display); font-weight: 450; font-size: 1.3rem; color: var(--color-primario-oscuro); }
.app-header nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-header nav a {
  text-decoration: none;
  color: var(--color-texto);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radio);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.app-header nav a.activo, .app-header nav a:hover { background: var(--color-primario-suave); color: var(--color-primario-oscuro); }
.app-main { padding: 20px; max-width: 1200px; margin: 0 auto; }

.tarjeta {
  background: var(--color-superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 18px;
}

/* ---------- Tablas simples ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--color-borde); }
th { color: var(--color-texto-suave); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; font-family: var(--font-mono); font-weight: 600; }
td { font-variant-numeric: tabular-nums; }

/* ---------- Estados de cita (píldoras) ---------- */
.estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.estado-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.estado-pendiente { background: var(--color-advertencia-suave); color: var(--color-pendiente); }
.estado-confirmada { background: var(--color-primario-suave); color: var(--color-confirmada); }
.estado-cancelada { background: var(--color-peligro-suave); color: var(--color-cancelada); }

/* ---------- Agenda / calendario ---------- */
.agenda-grid-envoltura {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
}
.agenda-grid {
  display: grid;
  grid-template-columns: 70px repeat(5, minmax(84px, 1fr));
  gap: 1px;
  /* Mezcla con el color de texto en vez de usar --color-borde a secas: en
     modo oscuro --color-borde queda casi del mismo tono que el fondo de las
     celdas y las líneas de la grilla se vuelven casi invisibles. */
  background: color-mix(in srgb, var(--color-texto) 30%, var(--color-borde));
}
.agenda-grid .celda-cabecera {
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
  padding: 10px 6px;
  font-weight: 700;
  text-align: center;
  font-size: .9rem;
}
.agenda-grid .celda-hora {
  background: var(--color-superficie);
  padding: 8px 6px;
  font-size: .78rem;
  font-family: var(--font-mono);
  color: var(--color-texto-suave);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Columna de horas y su esquina superior "congeladas": al deslizar la
   grilla horizontalmente en mobile, se quedan fijas a la izquierda para
   no perder la referencia de a qué hora corresponde cada fila. */
.agenda-grid > .celda-cabecera:first-child,
.agenda-grid .celda-hora {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--color-borde);
}
.agenda-grid > .celda-cabecera:first-child { z-index: 3; }
.agenda-grid .celda-slot {
  background: var(--color-superficie);
  min-height: 56px;
  padding: 4px;
  position: relative;
  transition: background var(--duration-fast) ease;
}
.agenda-grid .celda-slot.arrastrando-sobre { background: var(--color-primario-suave); }

/* ---------- Selección de hora pública: día primero, luego lista de horas ----------
   Reemplaza la grilla semanal completa (que en mobile obligaba a deslizar
   horizontalmente) por un selector de día + una lista de solo las horas
   libres de ese día, para no desperdiciar espacio ni depender de scroll. */
.selector-dias {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.boton-dia {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 10px 4px;
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  color: var(--color-texto);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.boton-dia .nombre-dia { display: block; font-weight: 700; font-size: .82rem; }
.boton-dia .fecha-dia { display: block; font-size: .75rem; color: var(--color-texto-suave); font-family: var(--font-mono); }
.boton-dia:hover { border-color: var(--color-primario); }
.boton-dia.seleccionado { border-color: var(--color-movimiento); background: var(--color-primario-suave); }
.boton-dia.sin-horas { opacity: .45; }
.boton-dia.sin-horas .nombre-dia { text-decoration: line-through; }

.lista-horas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.aviso-sin-horas {
  width: 100%;
  text-align: center;
  color: var(--color-texto-suave);
  padding: 24px 12px;
}

/* ---------- Botón de hora disponible (lista pública de arriba) ---------- */
.celda-hora-disponible {
  min-width: 84px;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--color-primario-suave);
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo), background var(--duration-fast) ease;
}
.celda-hora-disponible:hover { background: var(--color-movimiento); border-color: var(--color-movimiento); color: #fff; transform: translateY(-1px); }
.celda-hora-disponible.seleccionada { background: var(--color-movimiento); border-color: var(--color-movimiento); color: #fff; }
.celda-hora-ocupada {
  width: 100%; height: 100%; min-height: 48px;
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, var(--color-borde), var(--color-borde) 5px, var(--color-fondo) 5px, var(--color-fondo) 10px);
}
.nav-volver { text-align: center; margin-bottom: 14px; }
.grilla-semana-nav { display: flex; gap: 10px; }
.grilla-semana-nav .boton { flex: 1; }
.rango-semana { font-family: var(--font-mono); font-size: .85rem; color: var(--color-texto-suave); text-align: center; margin: 10px 0 18px; }

/* ---------- Editor de horario semanal (kine/horario.php) ---------- */
.celda-horario-bloque {
  width: 100%; height: 100%; min-height: 30px;
  border: none;
  background: var(--color-superficie);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-fast) ease;
}
.celda-horario-bloque:hover { background: var(--color-borde); }
.celda-horario-bloque.seleccionado { background: var(--color-primario); }
.celda-horario-bloque.seleccionado:hover { background: var(--color-primario-oscuro); }

.cita-bloque {
  background: var(--color-primario);
  color: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: .82rem;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.cita-bloque:hover { transform: translateY(-1px); }
.cita-bloque.pendiente { background: var(--color-pendiente); }
.cita-bloque.cancelada { background: var(--color-cancelada); opacity: .6; text-decoration: line-through; }
.cita-bloque .cita-acciones { display: flex; gap: 6px; margin-top: 4px; }
.cita-bloque .cita-acciones a, .cita-bloque .cita-acciones button {
  background: rgba(255,255,255,.25);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: .75rem;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.bloqueo-bloque {
  background: repeating-linear-gradient(45deg, var(--color-borde), var(--color-borde) 6px, var(--color-fondo) 6px, var(--color-fondo) 12px);
  border-radius: 10px;
  height: 100%;
  padding: 6px 8px;
  font-size: .78rem;
  color: var(--color-texto-suave);
  font-weight: 600;
}

/* ---------- Responsive: en mobile la grilla no se achica ni se recorta —
   se desliza horizontalmente dentro de .agenda-grid-envoltura (ver arriba). ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.contador-sesiones {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.modal-fondo {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,26,23,.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-fondo.abierto { display: flex; }
.modal-caja {
  background: var(--color-superficie);
  border-radius: 18px;
  padding: 24px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: aparecer-modal var(--duration-normal) var(--ease-out-expo);
}
@keyframes aparecer-modal { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-caja .cerrar-modal { float: right; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--color-texto-suave); }

.acciones-fila { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* =====================================================================
   Landing pública (index.php) — secciones de ancho completo, cada una
   con su propia lógica compositiva (no todas iguales a una "tarjeta").
   ===================================================================== */

.landing-hero {
  background: var(--color-tinta);
  color: #F4F7F5;
  padding: 88px 24px 96px;
  position: relative;
  overflow: hidden;
}
.landing-hero .contenedor {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.landing-hero .eyebrow { color: #E8B49C; }
.landing-hero h1 {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: #fff;
  text-wrap: balance;
  margin: 6px 0 18px;
}
.landing-hero p.subtitulo-hero { color: #C3D2CB; font-size: 1.15rem; max-width: 40ch; margin-bottom: 8px; }
.landing-hero .goniometro { max-width: 280px; margin: 0 auto; }
.landing-hero .dato-confianza {
  margin-top: 28px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.landing-hero .dato-confianza div strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.landing-hero .dato-confianza div span { color: #9FB3AA; font-size: .85rem; }
@media (max-width: 780px) {
  .landing-hero .contenedor { grid-template-columns: 1fr; text-align: center; }
  .landing-hero .dato-confianza { justify-content: center; }
  .landing-hero .acciones-fila { justify-content: center; }
  .landing-seccion h2, .landing-seccion .intro-seccion { text-align: center; margin-left: auto; margin-right: auto; }
  /* p.subtitulo-hero tiene max-width:40ch para no dejar líneas eternas en
     desktop, pero sin margin:auto esa caja angosta queda pegada al borde
     izquierdo aunque su texto esté centrado — hay que centrar la caja también. */
  .landing-hero p.subtitulo-hero { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  /* En celulares angostos las 3 estadísticas no caben en una sola fila:
     en vez de dejar que la 3ra se vaya sola a una segunda línea (se ve
     descuadrado), se apilan verticalmente, cada una centrada. */
  .landing-hero .dato-confianza { flex-direction: column; align-items: center; gap: 14px; }
}

.landing-seccion { padding: 64px 24px; max-width: 1080px; margin: 0 auto; }
.landing-seccion h2 {
  font-family: var(--font-display);
  font-weight: 450;
  font-size: 1.9rem;
  margin-bottom: 6px;
}
.landing-seccion .intro-seccion { color: var(--color-texto-suave); max-width: 56ch; margin-bottom: 36px; }

.pasos-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: paso; }
.pasos-lista > div { position: relative; padding-top: 34px; }
.pasos-lista > div::before {
  counter-increment: paso;
  content: counter(paso);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .85rem;
  color: var(--color-movimiento);
  border: 1.5px solid var(--color-movimiento);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0; left: 0;
}
.pasos-lista h3 { font-size: 1rem; margin: 0 0 4px; }
.pasos-lista p { color: var(--color-texto-suave); font-size: .92rem; margin: 0; }
@media (max-width: 900px) { .pasos-lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pasos-lista { grid-template-columns: 1fr; } }

.grilla-kines { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.kine-card {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 18px;
  border-top: 3px solid var(--color-acento-kine, var(--color-movimiento));
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.kine-card:hover { transform: translateY(-2px); }
.kine-card .foto-kine {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
  display: block;
}
.kine-card .foto-kine-inicial {
  background: var(--color-acento-kine, var(--color-movimiento));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
}
.kine-card .nombre-kine { font-weight: 700; margin-bottom: 2px; }
.kine-card .especialidad-kine { color: var(--color-texto-suave); font-size: .9rem; }

.landing-cta {
  background: var(--color-primario-suave);
  border-radius: 24px;
  padding: 48px 32px;
  text-align: center;
  max-width: 1080px;
  margin: 0 auto 64px;
}
.landing-cta h2 { font-family: var(--font-display); font-weight: 450; font-size: 1.7rem; color: var(--color-primario-oscuro); margin-bottom: 8px; }
.landing-cta p { color: var(--color-primario-oscuro); opacity: .85; margin-bottom: 20px; }

.landing-footer {
  border-top: 1px solid var(--color-borde);
  padding: 28px 24px;
  text-align: center;
  color: var(--color-texto-suave);
  font-size: .85rem;
}