/* ═══════════════════════════════════════════════════════════════════════════
   HACER CLÍNICA · Estilos agregados
   ───────────────────────────────────────────────────────────────────────────
   Va aparte de styles.css a propósito. Todo lo de acá es nuevo (menú animado,
   horarios libres, reseñas) y así se puede desplegar sin volver a mandar el
   archivo de estilos entero, que es de donde depende que el sitio se vea.

   Lo carga app.js solo, insertando el <link> en el <head>, así no hubo que
   tocar las 18 páginas del sitio una por una para sumar una etiqueta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. MENÚ HAMBURGUESA ═══════════════════════════════════════════════════
   Antes el menú aparecía y desaparecía de golpe (display:none ↔ display:flex,
   que no se puede animar) y las tres rayitas se quedaban quietas: no había
   forma de saber si estaba abierto salvo mirando abajo.

   Ahora las rayitas se cruzan en una X y el menú se despliega. Como
   display no admite transición, el menú queda siempre montado y lo que se
   anima es la altura.
   ═══════════════════════════════════════════════════════════════════════════ */

.hamburger {
  position: relative;
  border-radius: 10px;
  padding: 6px;
  transition: background-color var(--trans), transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.hamburger:active { transform: scale(.9); }
.hamburger.open   { background: rgba(161, 99, 71, .12); }

.hamburger span {
  transform-origin: center;
  border-radius: 2px;
  transition:
    transform .34s cubic-bezier(.68, -.35, .27, 1.35),
    opacity   .18s ease,
    width     .28s ease,
    background-color var(--trans);
}

/* Guiño al pasar el dedo/mouse: la rayita del medio se achica. */
.hamburger:hover span             { background: var(--tierra); }
.hamburger:hover span:nth-child(2){ width: 15px; }

/* La separación entre rayitas es de 5px y cada una mide 2px de alto: del
   centro de una al centro de la otra hay 7px, que es lo que hay que
   desplazarlas para que se crucen justo en el medio. */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(.1); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hamburger.open span              { background: var(--tierra); width: 24px; }

@media (max-width: 720px) {
  /* Reemplaza el display:none / display:flex del stylesheet base: el menú
     queda en el DOM y se despliega con una transición de altura. */
  .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--fondo);
    border-bottom: 1px solid transparent;
    padding: 0 24px;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      max-height .36s cubic-bezier(.4, 0, .2, 1),
      padding    .36s cubic-bezier(.4, 0, .2, 1),
      gap        .36s cubic-bezier(.4, 0, .2, 1),
      transform  .36s cubic-bezier(.4, 0, .2, 1),
      opacity    .24s ease,
      border-color .36s ease,
      /* La visibilidad recién se apaga cuando terminó de cerrarse; si no, el
         menú desaparece de golpe a mitad de la animación. */
      visibility 0s linear .36s;
  }

  .nav-links.open {
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    padding: 20px 24px 24px;
    gap: 18px;
    border-bottom-color: var(--crema-oscuro);
    box-shadow: 0 16px 34px rgba(79, 74, 48, .12);
    transition-delay: 0s;
  }

  /* Los ítems entran escalonados: el menú se siente armado y no volcado. */
  .nav-links li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .26s ease, transform .26s ease;
  }

  .nav-links.open li { opacity: 1; transform: translateY(0); }
  .nav-links.open li:nth-child(1) { transition-delay: .07s; }
  .nav-links.open li:nth-child(2) { transition-delay: .11s; }
  .nav-links.open li:nth-child(3) { transition-delay: .15s; }
  .nav-links.open li:nth-child(4) { transition-delay: .19s; }
  .nav-links.open li:nth-child(5) { transition-delay: .23s; }
  .nav-links.open li:nth-child(6) { transition-delay: .27s; }
  .nav-links.open li:nth-child(7) { transition-delay: .31s; }

  /* Los CTA se clonan de a dos y cada uno traía su propia línea divisoria
     arriba: alcanza con la del primero. */
  .mobile-cta-li + .mobile-cta-li {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  /* Mientras el menú está abierto, el fondo no se mueve. */
  body.nav-abierto { overflow: hidden; }
}

/* Quien pidió menos movimiento en su sistema no debería recibir más por
   nuestra cuenta. La X sigue funcionando; deja de tener recorrido. */
@media (prefers-reduced-motion: reduce) {
  .hamburger span,
  .nav-links,
  .nav-links li {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ═══ 2. HORARIOS LIBRES ════════════════════════════════════════════════════
   Los horarios salen de la agenda real de cada profesional (app.hacerclinica).
   ═══════════════════════════════════════════════════════════════════════════ */

.hc-agenda {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.hc-agenda-titulo {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  margin-bottom: 4px;
}

.hc-agenda-sub {
  font-size: .82rem;
  color: var(--gris-texto);
  margin-bottom: 18px;
}

.hc-agenda-dia + .hc-agenda-dia { margin-top: 16px; }

.hc-agenda-fecha {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tierra);
  margin-bottom: 8px;
}

.hc-slots { display: flex; flex-wrap: wrap; gap: 8px; }

.hc-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--crema-oscuro);
  background: var(--crema);
  color: var(--verde-oscuro);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--trans);
}

.hc-slot:hover {
  border-color: var(--tierra);
  background: var(--tierra);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(161, 99, 71, .28);
}

.hc-agenda-vacio,
.hc-agenda-cargando {
  font-size: .875rem;
  color: var(--gris-texto);
}

.hc-agenda-pie {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--crema-oscuro);
  font-size: .72rem;
  color: var(--gris-verde);
}

.hc-agenda-mas {
  background: none;
  border: none;
  padding: 0;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 700;
  color: var(--tierra);
  cursor: pointer;
  text-decoration: underline;
}

/* Badge de disponibilidad real en las tarjetas del listado */
.hc-badge-agenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--verde-medio);
}

.hc-badge-agenda .availability-dot { background: var(--verde-sage); }

/* ═══ 3. RESEÑAS ════════════════════════════════════════════════════════════ */

.hc-resenas {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.hc-resenas-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.hc-promedio {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hc-promedio-num {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  line-height: 1;
}

.hc-estrellas { display: inline-flex; gap: 2px; }
.hc-estrellas svg { width: 16px; height: 16px; display: block; }
.hc-estrella-llena  { fill: var(--tierra); }
.hc-estrella-vacia  { fill: var(--crema-oscuro); }

.hc-resena {
  padding: 18px 0;
  border-top: 1px solid var(--crema-oscuro);
}

.hc-resena:first-of-type { border-top: none; padding-top: 0; }

.hc-resena-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hc-resena-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--crema-oscuro);
}

.hc-resena-avatar-txt {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verde-sage);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1rem;
}

.hc-resena-autor { font-weight: 600; font-size: .9rem; color: var(--verde-oscuro); }
.hc-resena-fecha { font-size: .75rem; color: var(--gris-verde); }
.hc-resena-texto { font-size: .92rem; color: var(--gris-texto); line-height: 1.7; white-space: pre-wrap; }

.hc-resena-respuesta {
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 3px solid var(--tierra);
  background: var(--crema);
  border-radius: 0 10px 10px 0;
}

.hc-resena-respuesta-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tierra);
  margin-bottom: 4px;
}

.hc-resenas-vacio { font-size: .9rem; color: var(--gris-texto); }

/* ── Formulario ── */

.hc-form-resena {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--crema-oscuro);
}

.hc-form-titulo {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--verde-oscuro);
  margin-bottom: 6px;
}

.hc-form-aviso {
  font-size: .78rem;
  color: var(--gris-verde);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Campos de identificación del formulario simple */
.hc-form-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 560px) {
  .hc-form-fila { grid-template-columns: 1fr; }
}

.hc-campo { display: flex; flex-direction: column; gap: 5px; }

.hc-campo > span {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tierra);
}

.hc-campo > span em {
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris-verde);
}

.hc-campo input {
  padding: 10px 14px;
  border: 1.5px solid var(--crema-oscuro);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--verde-oscuro);
  background: var(--fondo);
  transition: border-color var(--trans);
}

.hc-campo input:focus { outline: none; border-color: var(--tierra); }

/* Campo trampa contra bots: fuera de la pantalla y fuera del tabulador.
   Una persona no lo ve nunca; un bot lo completa y ahí se delata.
   Ojo: no se puede usar display:none — buena parte de los bots ignoran los
   campos ocultos así, y el filtro dejaría de servir. */
.hc-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hc-puntaje { display: flex; gap: 4px; margin-bottom: 12px; }

.hc-puntaje button {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
  transition: transform .18s ease;
}

.hc-puntaje button:hover { transform: scale(1.18); }
.hc-puntaje svg { width: 26px; height: 26px; }

.hc-form-resena textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  border: 1.5px solid var(--crema-oscuro);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--verde-oscuro);
  background: var(--fondo);
  resize: vertical;
  transition: border-color var(--trans);
}

.hc-form-resena textarea:focus { outline: none; border-color: var(--tierra); }

.hc-form-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.hc-contador { font-size: .72rem; color: var(--gris-verde); margin-left: auto; }

.hc-mensaje {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: .85rem;
  line-height: 1.5;
}

.hc-mensaje-ok    { background: rgba(160, 156, 131, .18); color: var(--verde-oscuro); }
.hc-mensaje-error { background: rgba(161, 99, 71, .12);  color: var(--tierra); }

.hc-oculto { display: none !important; }

/* ═══ 4. ASISTENTE ══════════════════════════════════════════════════════════
   La burbuja se apila ARRIBA de la de WhatsApp, que ya vive en bottom:28px
   con 58px de alto. De ahí sale el 102px: 28 + 58 + 16 de aire. Si algún día
   se mueve la de WhatsApp, hay que mover esta también.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El panel es un <section>, y styles.css le da a TODA section
   `padding:80px 24px`. Eso metía el contenido del chat 80px para abajo y 24
   a cada lado: el encabezado quedaba flotando en el medio de la tarjeta.
   No lo detectó ninguna prueba —la caja del panel medía bien, lo que estaba
   corrido era lo de adentro— sino mirar una captura.
   El reset va acá arriba para que valga aunque después se agreguen reglas. */
.hc-chat-panel,
.hc-chat-panel header,
.hc-chat-panel form,
.hc-chat-panel section { padding: 0; margin: 0; }

.hc-chat-header { padding: 16px 18px !important; }
.hc-chat-pie    { padding: 12px !important; }
.hc-chat-cuerpo { padding: 16px !important; }
.hc-form        { padding: 16px !important; }

.hc-chat-burbuja {
  position: fixed;
  bottom: 102px;
  right: 28px;
  z-index: 91;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--crema);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(94, 89, 64, .38);
  transition: transform var(--trans), background var(--trans);
}

.hc-chat-burbuja:hover { transform: scale(1.08); background: var(--verde-medio); }
.hc-chat-burbuja svg { width: 26px; height: 26px; }

/* Puntito que invita a abrirlo la primera vez. */
.hc-chat-punto {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tierra);
  border: 2px solid var(--fondo);
}

.hc-chat-abierto .hc-chat-burbuja svg { transform: rotate(8deg); }

.hc-chat-panel {
  position: fixed;
  bottom: 102px;
  right: 28px;
  z-index: 92;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 140px);
  background: var(--fondo);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(79, 74, 48, .28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s;
}

.hc-chat-abierto .hc-chat-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.hc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--verde-oscuro);
  color: var(--crema);
}

.hc-chat-header strong { display: block; font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; }
.hc-chat-header span   { display: block; font-size: .72rem; opacity: .65; letter-spacing: .06em; text-transform: uppercase; }

.hc-chat-cerrar {
  background: none;
  border: none;
  color: var(--crema);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  opacity: .75;
  transition: opacity var(--trans);
}
.hc-chat-cerrar:hover { opacity: 1; }
.hc-chat-cerrar svg { width: 20px; height: 20px; display: block; }

.hc-chat-cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.hc-msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: .88rem;
  line-height: 1.6;
  animation: hc-entra .24s ease both;
}

@keyframes hc-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hc-msg-bot { background: #fff; color: var(--verde-oscuro); border-bottom-left-radius: 5px; box-shadow: 0 1px 3px rgba(79,74,48,.07); }
.hc-msg-vos { background: var(--verde-oscuro); color: var(--crema); align-self: flex-end; border-bottom-right-radius: 5px; }
.hc-msg-ok  { background: rgba(160,156,131,.2); }
.hc-msg-error { background: rgba(161,99,71,.12); color: var(--tierra); }

.hc-msg-aviso {
  max-width: 100%;
  background: var(--crema);
  color: var(--gris-texto);
  font-size: .74rem;
  line-height: 1.55;
  border-radius: 12px;
}

/* Puntitos de "está escribiendo" */
.hc-msg-esperando { display: flex; gap: 4px; align-items: center; padding: 14px; }
.hc-msg-esperando span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gris-verde);
  animation: hc-latido 1.2s infinite ease-in-out;
}
.hc-msg-esperando span:nth-child(2) { animation-delay: .18s; }
.hc-msg-esperando span:nth-child(3) { animation-delay: .36s; }

@keyframes hc-latido {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Recursos del protocolo de riesgo: grandes, tocables, con el número primero. */
.hc-msg-recursos { max-width: 100%; display: flex; flex-direction: column; gap: 8px; }

.hc-recurso {
  display: block;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1.5px solid var(--crema-oscuro);
  background: var(--fondo);
  text-decoration: none;
  transition: border-color var(--trans), background var(--trans);
}
.hc-recurso:hover { border-color: var(--tierra); background: var(--crema); }
.hc-recurso-tel      { display: block; font-size: 1.1rem; font-weight: 700; color: var(--tierra); }
.hc-recurso-nombre   { display: block; font-size: .82rem; font-weight: 600; color: var(--verde-oscuro); }
.hc-recurso-detalle  { display: block; font-size: .74rem; color: var(--gris-texto); line-height: 1.5; margin-top: 2px; }
.hc-recurso-horario  { display: block; font-size: .68rem; color: var(--gris-verde); margin-top: 2px; }

/* Tarjetas de profesionales y horarios */
.hc-msg-pros, .hc-msg-horarios { max-width: 100%; display: flex; flex-direction: column; gap: 8px; }

.hc-pro {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--crema-oscuro);
  text-decoration: none;
  transition: border-color var(--trans);
}
.hc-pro:hover { border-color: var(--tierra); }
.hc-pro strong { display: block; font-size: .88rem; color: var(--verde-oscuro); }
.hc-pro span   { display: block; font-size: .74rem; color: var(--gris-texto); }
.hc-pro-libre  { color: var(--verde-medio) !important; font-weight: 600; }

.hc-dia { display: flex; flex-direction: column; gap: 2px; }
.hc-dia-nombre { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tierra); }
.hc-dia-horas  { font-size: .85rem; color: var(--verde-oscuro); }

.hc-chat-link {
  display: inline-block;
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--tierra);
  text-decoration: underline;
}
.hc-chat-link-wa { color: #128C4B; }

/* Botones de opción */
.hc-opciones { display: flex; flex-wrap: wrap; gap: 6px; }

.hc-opcion {
  background: #fff;
  border: 1.5px solid var(--crema-oscuro);
  border-radius: 100px;
  padding: 7px 13px;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  cursor: pointer;
  transition: all var(--trans);
}
.hc-opcion:hover { border-color: var(--tierra); background: var(--tierra); color: #fff; }

/* Formulario de pedido de turno */
.hc-form {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(79,74,48,.07);
}

.hc-f-titulo { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: var(--verde-oscuro); }
.hc-f-aviso  { font-size: .74rem; color: var(--gris-texto); line-height: 1.5; }
.hc-f-campo  { display: flex; flex-direction: column; gap: 4px; }
.hc-f-campo > span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tierra); }
.hc-f-ayuda  { font-size: .68rem; color: var(--gris-verde); font-style: normal; }

.hc-f-input {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--crema-oscuro);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--verde-oscuro);
  background: var(--fondo);
  transition: border-color var(--trans);
}
.hc-f-input:focus { outline: none; border-color: var(--tierra); }
textarea.hc-f-input { resize: vertical; min-height: 60px; }

.hc-f-enviar {
  background: var(--tierra);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 11px;
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--trans);
}
.hc-f-enviar:hover:not(:disabled) { background: var(--tierra-claro); }
.hc-f-enviar:disabled { opacity: .6; cursor: default; }

.hc-f-error { font-size: .78rem; color: var(--tierra); }

/* Barra de escritura */
.hc-chat-pie {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--crema-oscuro);
  background: var(--fondo);
}

.hc-chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--crema-oscuro);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: .88rem;
  color: var(--verde-oscuro);
  background: #fff;
  transition: border-color var(--trans);
}
.hc-chat-input:focus { outline: none; border-color: var(--tierra); }

.hc-chat-enviar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--crema);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--trans);
}
.hc-chat-enviar:hover { background: var(--verde-medio); }
.hc-chat-enviar svg { width: 18px; height: 18px; }

/* En celular el panel ocupa casi toda la pantalla: un cuadradito de 380px
   sobre 360px de ancho no se puede usar. */
@media (max-width: 560px) {
  .hc-chat-panel {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    transform: translateY(100%);
  }
  .hc-chat-abierto .hc-chat-panel { transform: translateY(0); }
  .hc-chat-burbuja { bottom: 96px; right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-chat-panel, .hc-msg, .hc-msg-esperando span {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ═══ 5. MÓDULO "INCLUIDO EN EL ALQUILER" ═══════════════════════════════════
   Va en /alquiler-consultorio/, después de los precios. Lo inserta el script
   hc-admin-api/agregar-modulo-y-credito.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.hc-incluye-cabecera { max-width: 640px; margin-bottom: 40px; }

/* ── Tres tarjetas con modal ──
   Antes fueron nueve cajas en grilla (un ladrillo) y después tres bloques con
   todo desplegado (larguísimo). Esto es lo tercero: tres tarjetas que dicen de
   qué va cada cosa, y el detalle a un clic.

   El detalle NO vive en JavaScript: está escrito en el HTML dentro de cada
   tarjeta y el JS lo esconde al arrancar. Sin JavaScript se ve todo, y un
   buscador lo indexa igual. Un modal es una comodidad, no puede ser la única
   forma de leer el contenido. */

.hc-solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hc-incluye-tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.hc-tarjeta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  padding: 30px 26px 24px;
  box-shadow: var(--shadow);
  transition:
    transform .45s cubic-bezier(.22, .61, .36, 1),
    box-shadow .45s ease;
}

/* Lavado que sube desde abajo al pasar por encima. Va en un pseudo-elemento
   detrás del contenido para que el texto no parpadee. */
.hc-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--crema) 0%, #fff 90%);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* Subrayado que se dibuja de izquierda a derecha. */
.hc-tarjeta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--tierra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.hc-tarjeta:hover,
.hc-tarjeta:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 20px 46px rgba(79, 74, 48, .17);
}

.hc-tarjeta:hover::before,
.hc-tarjeta:focus-within::before { transform: translateY(0); }

.hc-tarjeta:hover::after,
.hc-tarjeta:focus-within::after { transform: scaleX(1); }

/* Hundir un poco al apretar: confirma el clic antes de que abra el modal. */
.hc-tarjeta:has(.hc-tarjeta-btn:active) { transform: translateY(-4px) scale(.988); }

/* Número fantasma: crece y se tiñe al pasar por encima. */
.hc-tarjeta-num {
  position: absolute;
  top: 10px; right: 18px;
  z-index: -1;
  font-family: var(--font-serif);
  font-size: 4.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--crema-oscuro);
  transition:
    transform .55s cubic-bezier(.22, .61, .36, 1),
    color .45s ease;
}

.hc-tarjeta:hover .hc-tarjeta-num,
.hc-tarjeta:focus-within .hc-tarjeta-num {
  transform: translateY(-6px) scale(1.14);
  color: rgba(161, 99, 71, .22);
}

.hc-tarjeta-titulo {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  margin-bottom: 8px;
}

.hc-tarjeta-sub {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--gris-texto);
  min-height: 3em;
}

.hc-tarjeta-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 20px;
}

.hc-tarjeta-chips li {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gris-verde);
  background: var(--crema);
  border-radius: 100px;
  padding: 4px 11px;
  transition: background .35s ease, color .35s ease;
}

.hc-tarjeta:hover .hc-tarjeta-chips li,
.hc-tarjeta:focus-within .hc-tarjeta-chips li {
  background: #fff;
  color: var(--verde-medio);
}

.hc-tarjeta-mas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--tierra);
}

.hc-tarjeta-mas svg {
  width: 17px; height: 17px;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.hc-tarjeta:hover .hc-tarjeta-mas svg,
.hc-tarjeta:focus-within .hc-tarjeta-mas svg { transform: translateX(6px); }

/* Un botón de verdad que cubre la tarjeta entera: se puede tocar en cualquier
   lado, y para un lector de pantalla es un botón con nombre, no un div. */
.hc-tarjeta-btn {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 20px;
}

.hc-tarjeta-btn:focus-visible {
  outline: 3px solid var(--tierra);
  outline-offset: 3px;
}

/* Detalle: visible sin JavaScript, oculto cuando el JS toma el control. */
.hc-tarjeta-detalle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--crema-oscuro);
}

.hc-incluye-tarjetas.js-listo .hc-tarjeta-detalle { display: none; }

.hc-detalle-item strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--verde-oscuro);
  margin-bottom: 3px;
}

.hc-detalle-item span {
  display: block;
  font-size: .89rem;
  line-height: 1.7;
  color: var(--gris-texto);
}

@media (max-width: 900px) {
  .hc-incluye-tarjetas { grid-template-columns: 1fr; }
  .hc-tarjeta-sub { min-height: 0; }
}

/* ── Entrada de las tarjetas ── */
.hc-incluye-tarjetas.sr { opacity: 1; transform: none; }

.hc-incluye-tarjetas.sr .hc-tarjeta {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.22, .61, .36, 1),
    box-shadow .45s ease;
  transition-delay: var(--db, 0s);
}

.hc-incluye-tarjetas.sr.visible .hc-tarjeta { opacity: 1; transform: translateY(0); }

/* Una vez que entró, el hover manda: si no, el retraso de entrada se aplicaba
   también al levantarse y la tarjeta reaccionaba tarde al mouse. */
.hc-incluye-tarjetas.sr.visible .hc-tarjeta:hover,
.hc-incluye-tarjetas.sr.visible .hc-tarjeta:focus-within {
  transform: translateY(-8px);
  transition-delay: 0s;
}

/* ── Modal ── */
.hc-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hc-modal[hidden] { display: none; }

.hc-modal-fondo {
  position: absolute;
  inset: 0;
  background: rgba(47, 53, 42, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s ease;
}

.hc-modal.visible .hc-modal-fondo { opacity: 1; }

.hc-modal-panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(82vh, 780px);
  overflow-y: auto;
  background: var(--fondo);
  border-radius: 22px;
  padding: 40px 38px 34px;
  box-shadow: 0 30px 80px rgba(47, 53, 42, .38);
  opacity: 0;
  transform: translateY(20px) scale(.96);
  /* Un pelín de rebote al final: la curva pasa de 1 y vuelve. */
  transition:
    opacity .3s ease,
    transform .45s cubic-bezier(.2, .9, .3, 1.06);
}

.hc-modal.visible .hc-modal-panel { opacity: 1; transform: none; }

body.hc-modal-abierto { overflow: hidden; }

.hc-modal-cerrar {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--crema);
  color: var(--verde-oscuro);
  cursor: pointer;
  transition: background var(--trans), transform var(--trans);
}

.hc-modal-cerrar:hover { background: var(--crema-oscuro); transform: rotate(90deg); }
.hc-modal-cerrar svg { width: 18px; height: 18px; }

.hc-modal-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--crema-oscuro);
  margin-bottom: 6px;
}

.hc-modal-panel h3 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  margin-bottom: 6px;
}

.hc-modal-sub {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--gris-verde);
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--crema-oscuro);
}

.hc-modal-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Los ítems del modal entran de a uno, después del panel. */
.hc-modal .hc-detalle-item {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(.18s + var(--d, 0s));
}

.hc-modal.visible .hc-detalle-item { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .hc-modal { padding: 0; align-items: flex-end; }
  .hc-modal-panel {
    width: 100%;
    max-height: 88vh;
    border-radius: 22px 22px 0 0;
    padding: 32px 24px 28px;
    transform: translateY(100%);
  }
  .hc-modal.visible .hc-modal-panel { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hc-tarjeta,
  .hc-tarjeta::before,
  .hc-tarjeta::after,
  .hc-tarjeta-num,
  .hc-tarjeta-mas svg,
  .hc-modal-panel,
  .hc-modal-fondo,
  .hc-modal-cerrar,
  .hc-modal .hc-detalle-item {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .hc-incluye-tarjetas.sr .hc-tarjeta {
    opacity: 1 !important;
    transform: none !important;
  }
  .hc-modal .hc-detalle-item { opacity: 1 !important; transform: none !important; }
  .hc-tarjeta:hover { transform: none; }
}

/* Bloque de la IA: se despega de la grilla porque no es una función más de la
   lista, es el argumento distinto del producto. */
/* Entra desde la izquierda —reusando .sr-left, que ya existe en styles.css—
   para que no repita el mismo movimiento que las nueve tarjetas de arriba.
   Distinto movimiento, distinta jerarquía. */
.hc-incluye-ia {
  margin-top: 28px;
  padding: 32px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--verde-medio);
}

.hc-incluye-ia h3 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  line-height: 1.25;
  margin-bottom: 12px;
  max-width: 640px;
}

.hc-incluye-ia-texto > p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--gris-texto);
  max-width: 680px;
}

.hc-incluye-ia-lista {
  list-style: none;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.hc-incluye-ia-lista li {
  position: relative;
  padding-left: 22px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--gris-texto);
}

.hc-incluye-ia-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde-sage);
}

.hc-incluye-ia-lista strong { color: var(--verde-oscuro); font-weight: 700; }

@media (max-width: 560px) {
  .hc-incluye-ia { padding: 24px 20px; }
  .hc-incluye-ia h3 { font-size: 1.2rem; }
}

.hc-incluye-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--verde-oscuro);
  border-radius: 18px;
}

.hc-incluye-pie p {
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(242, 237, 226, .75);
  max-width: 520px;
}

.hc-incluye-pie strong { color: var(--crema); font-weight: 700; }

/* El sistema también se alquila solo, sin consultorio. Va como segunda línea
   y no como tarjeta: es otra propuesta comercial, no otra función. */
.hc-incluye-aparte {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(242, 237, 226, .18);
  font-size: .88rem;
  color: rgba(242, 237, 226, .6);
}

.hc-incluye-acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hc-incluye-link {
  font-size: .85rem;
  font-weight: 600;
  color: rgba(242, 237, 226, .7);
  text-decoration: underline;
  transition: color var(--trans);
}

.hc-incluye-link:hover { color: var(--crema); }

@media (max-width: 560px) {
  .hc-incluye-pie { flex-direction: column; align-items: flex-start; }
  .hc-incluye-acciones { width: 100%; align-items: stretch; }
  .hc-incluye-pie .btn { width: 100%; justify-content: center; }
  .hc-incluye-link { text-align: center; }
}

/* ═══ 6. CRÉDITO DEL PIE ════════════════════════════════════════════════════
   Discreto pero legible: vive en la misma fila que el año y la dirección.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Renglón propio y pegado a la izquierda.
   .footer-bottom es un flex con space-between: al meter un tercer párrafo, se
   iba al extremo derecho, que es justo donde flota la burbuja de WhatsApp y le
   quedaba encima. Con flex-basis:100% se lleva una fila entera para él y la
   esquina derecha queda libre. En las páginas donde el crédito no cae dentro de
   .footer-bottom, el flex-basis no aplica y el párrafo ya es de ancho completo:
   se ve igual. */
.footer-credito {
  flex-basis: 100%;
  order: 99;
  margin-top: 8px;
  font-size: .8rem;
  text-align: left;
  /* Seguro extra por si alguien vuelve a centrarlo: la esquina de abajo a la
     derecha es de la burbuja flotante. */
  padding-right: 96px;
}

/* Gana en especificidad a `.footer-bottom p`, que lo dejaba casi ilegible. */
.footer-bottom .footer-credito,
footer .footer-credito { color: rgba(245, 240, 232, .45); }

.footer-credito a {
  color: rgba(245, 240, 232, .75);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--trans);
}

.footer-credito a:hover { color: var(--crema); }

@media (max-width: 720px) {
  .footer-credito { padding-right: 0; }
}