/* =====================================================================
   Healthy Move — sistema visual compartido
   Colores tomados del logo. Lo usan: la página de inicio, el
   agendamiento, la confirmación de cita y el panel de Isabel.
   ===================================================================== */

:root {
  /* Colores del logo */
  --hm-tinta: #0f3038;        /* texto "Healthy Move" */
  --hm-tinta-2: #1d4a55;
  --hm-turquesa: #1cc0d8;     /* trazo turquesa */
  --hm-turquesa-osc: #0b8ea1; /* turquesa legible como texto */
  --hm-rosa: #e4105f;         /* círculo rosa */
  --hm-rosa-osc: #c80c52;
  --hm-verde: #79c626;        /* hoja */
  --hm-verde-osc: #4e8a12;
  --hm-gris: #9fa2a4;         /* figura */

  /* Fondos suaves */
  --hm-fondo: #f6fafb;
  --hm-turquesa-50: #e8f8fb;
  --hm-rosa-50: #fdeef4;
  --hm-verde-50: #f1f9e8;
  --hm-borde: #e3ecef;

  --hm-texto: #1f2d33;
  --hm-texto-suave: #5b6b72;

  --hm-radio: 14px;
  --hm-radio-lg: 22px;
  --hm-sombra: 0 10px 30px rgba(15, 48, 56, 0.08);
  --hm-sombra-lg: 0 24px 60px rgba(15, 48, 56, 0.14);

  --hm-fuente-titulos: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --hm-fuente: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.hm-pagina {
  margin: 0;
  font-family: var(--hm-fuente);
  color: var(--hm-texto);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hm-pagina h1, .hm-pagina h2, .hm-pagina h3, .hm-pagina h4 {
  font-family: var(--hm-fuente-titulos);
  color: var(--hm-tinta);
  line-height: 1.2;
  margin: 0 0 .5em;
}
.hm-pagina img { max-width: 100%; }
.hm-pagina a { color: var(--hm-turquesa-osc); }

.hm-contenedor { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ---------- Botones ---------- */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--hm-fuente-titulos); font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.hm-btn:hover { transform: translateY(-1px); }
.hm-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.hm-btn-primario { background: var(--hm-rosa); color: #fff !important; box-shadow: 0 8px 20px rgba(228, 16, 95, .28); }
.hm-btn-primario:hover { background: var(--hm-rosa-osc); }
.hm-btn-oscuro { background: var(--hm-tinta); color: #fff !important; }
.hm-btn-oscuro:hover { background: #0a2227; }
.hm-btn-contorno { background: transparent; color: var(--hm-tinta) !important; border-color: var(--hm-tinta); }
.hm-btn-contorno:hover { background: var(--hm-tinta); color: #fff !important; }
.hm-btn-whatsapp { background: #25d366; color: #fff !important; }
.hm-btn-whatsapp:hover { background: #1ebc59; }
.hm-btn-grande { padding: 16px 30px; font-size: 17px; }

/* ---------- Encabezado ---------- */
.hm-encabezado {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hm-borde);
}
.hm-encabezado .hm-contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
.hm-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hm-marca img { height: 46px; width: auto; }
.hm-marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.hm-marca-texto strong { font-family: var(--hm-fuente-titulos); font-size: 20px; color: var(--hm-tinta); }
.hm-marca-texto span { font-size: 12px; color: var(--hm-texto-suave); letter-spacing: .3px; }
.hm-nav { display: flex; align-items: center; gap: 26px; }
.hm-nav a { color: var(--hm-tinta); text-decoration: none; font-weight: 600; font-size: 15px; }
.hm-nav a:hover { color: var(--hm-rosa); }
.hm-acciones { display: flex; align-items: center; gap: 12px; }
.hm-enlace-sesion {
  display: inline-flex; align-items: center; gap: 6px; color: var(--hm-tinta) !important;
  text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 999px;
}
.hm-enlace-sesion:hover { background: var(--hm-turquesa-50); }
.hm-enlace-sesion svg { width: 18px; height: 18px; }

/* ---------- Tarjetas / campos ---------- */
.hm-tarjeta {
  background: #fff; border: 1px solid var(--hm-borde); border-radius: var(--hm-radio-lg);
  box-shadow: var(--hm-sombra);
}
.hm-etiqueta-seccion {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--hm-fuente-titulos);
  font-weight: 600; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--hm-rosa);
}
.hm-etiqueta-seccion::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--hm-verde); }

.hm-campo { display: block; margin-top: 16px; }
.hm-campo > span { display: block; font-weight: 700; font-size: 14px; color: var(--hm-tinta); margin-bottom: 6px; }
.hm-campo input, .hm-campo select, .hm-campo textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--hm-borde); border-radius: 12px;
  font-size: 15px; font-family: inherit; color: var(--hm-texto); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.hm-campo input:focus, .hm-campo select:focus, .hm-campo textarea:focus {
  outline: none; border-color: var(--hm-turquesa); box-shadow: 0 0 0 4px rgba(28, 192, 216, .15);
}

/* ---------- Pie de página ---------- */
.hm-pie { background: var(--hm-tinta); color: #cfe0e4; padding: 56px 0 26px; }
.hm-pie a { color: #fff; text-decoration: none; }
.hm-pie a:hover { color: var(--hm-turquesa); }
.hm-pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.hm-pie h4 { color: #fff; font-size: 16px; margin-bottom: 14px; }
.hm-pie ul { list-style: none; padding: 0; margin: 0; }
.hm-pie li { margin-bottom: 9px; font-size: 15px; }
.hm-pie-logo { background: #fff; border-radius: 16px; padding: 10px 14px; display: inline-block; margin-bottom: 14px; }
.hm-pie-logo img { height: 110px; display: block; }
.hm-pie-legal {
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #9fb7bd;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.hm-whatsapp-flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45); transition: transform .15s;
}
.hm-whatsapp-flotante:hover { transform: scale(1.07); }
.hm-whatsapp-flotante svg { width: 30px; height: 30px; fill: #fff; }

@media (max-width: 900px) {
  .hm-nav { display: none; }
  .hm-pie-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .hm-marca-texto { display: none; }
  .hm-enlace-sesion .hm-texto-largo { display: none; }
  .hm-btn { padding: 12px 18px; font-size: 15px; }
}