/*
  Banner flotante que invita a agendar el diagnóstico.

  Panel en blanco: el verde a pantalla completa resultaba demasiado pesado
  para algo que aparece sin que te lo pidan. El contraste se reserva para
  donde hace falta: el botón en verde profundo y la etiqueta en dorado
  oscuro, que es el que se usa sobre fondos claros.
*/

.cita {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 180;
  width: min(380px, calc(100vw - 2rem));
  background: #FFFFFF;
  color: var(--negro, #0C3362);
  /* Borde dorado: sobre fondo claro el panel se perdia contra la pagina.
     El dorado lo despega sin recurrir a un color estridente. */
  border: 2px solid var(--oro, #D3AE37);
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.4rem;
  box-shadow: 0 20px 56px rgba(12, 51, 98, .22);
  /* oculto hasta que el JS lo pida */
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}

.cita.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cita-cerrar {
  position: absolute;
  top: .6rem;
  right: .7rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: rgba(12, 51, 98, .45);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.cita-cerrar:hover { color: var(--verde, #0C3362); background: rgba(12, 51, 98, .06); }

.cita-kicker {
  display: block;
  font-size: .68rem;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--oro-deep, #0C3362);
  margin-bottom: .55rem;
}

.cita-titulo {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 .5rem;
  color: var(--verde, #0C3362);
}

.cita-texto {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--gris, #0C3362);
  margin: 0 0 1rem;
}

.cita-campo { margin-bottom: .6rem; }

.cita input[type="text"],
.cita input[type="email"] {
  width: 100%;
  padding: .7rem .85rem;
  font-family: inherit;
  font-size: .9rem;
  color: var(--negro, #0C3362);
  background: var(--cream, #F7F5F1);
  border: 1px solid rgba(12, 51, 98, .16);
  border-radius: 10px;
}
.cita input::placeholder { color: rgba(12, 51, 98, .42); }
.cita input:focus {
  outline: none;
  border-color: var(--verde-3, #6EA6CD);
  background: #FFFFFF;
}

.cita-consent {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin: .75rem 0 .9rem;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--gris, #0C3362);
}
.cita-consent input { margin-top: .15rem; flex-shrink: 0; }
.cita-consent a { color: var(--oro-deep, #0C3362); text-decoration: underline; }

.cita-enviar {
  width: 100%;
  padding: .8rem 1rem;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--cream, #F7F5F1);
  background: var(--verde, #0C3362);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background .2s ease;
}
.cita-enviar:hover { background: var(--verde-2, #0C3362); }
.cita-enviar[disabled] { opacity: .6; cursor: default; }

.cita-aviso { margin: .7rem 0 0; font-size: .78rem; line-height: 1.45; }
.cita-aviso.error { color: #B3261E; }
.cita-aviso.ok { color: #0C3362; font-weight: 600; }

/* La trampa antispam: invisible para las personas. */
.cita-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
  En el telefono el panel llegaba a tapar el 78% de la pantalla: dejaba de ser
  una invitacion y pasaba a ser un muro. Aqui se reduce a una tarjeta corta.

  Las cuatro opciones de servicio son lo que mas crecia, asi que no se
  muestran: en el movil se pide lo minimo y el servicio se decide hablando.
  El JS marca "Quiero orientacion" cuando no estan a la vista, para que el
  correo no diga un servicio que la persona nunca eligio.
*/
@media (max-width: 719px) {
  .cita {
    left: 1rem;
    right: 1rem;
    width: auto;
    bottom: 1rem;
    padding: 1.15rem 1.2rem 1.1rem;
    /* Red de seguridad: pase lo que pase, nunca es un intersticial. */
    max-height: 62vh;
    overflow-y: auto;
  }
  .cita-titulo { font-size: 1.25rem; }
  .cita-texto { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cita { transition: opacity .2s ease, visibility .2s; transform: none; }
}

/* ---------- Elegir servicio dentro del banner ---------- */
/*
  Conecta el banner con los dos métodos propios. Quien ya sabe qué necesita
  lo dice en un clic, y la solicitud llega al correo con el servicio marcado,
  así se sabe de qué hablar antes de la llamada.
*/
.cita-servicios {
  margin: 0 0 1rem;
  display: grid;
  gap: .4rem;
}

.cita-servicios-tit {
  display: block;
  font-size: .68rem;
  letter-spacing: .01em;
  text-transform: none;
  font-weight: 600;
  color: var(--oro-deep, #0C3362);
  margin-bottom: .2rem;
}

.cita-opcion {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(12, 51, 98, .16);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.cita-opcion:hover { border-color: var(--verde-3, #6EA6CD); }

.cita-opcion input { accent-color: var(--verde, #0C3362); flex-shrink: 0; }

/* La opción marcada se distingue sin gritar. */
.cita-opcion:has(input:checked) {
  border-color: var(--verde, #0C3362);
  background: var(--panel, #C3D3E0);
}

.cita-opcion span { display: flex; flex-direction: column; line-height: 1.25; }
.cita-opcion strong { font-size: .86rem; font-weight: 600; color: var(--verde, #0C3362); }
.cita-opcion small { font-size: .72rem; color: var(--gris, #0C3362); }

/* Con cuatro opciones conviene apretar un poco para que el panel no crezca. */
.cita-servicios { gap: .35rem; }
.cita-opcion { padding: .5rem .65rem; }
.cita-opcion small { font-size: .68rem; }

/* ---------- Cierre: el movil manda ----------
   Este bloque va al final a proposito. Las reglas de ".cita-servicios" que
   hay mas arriba tienen la misma especificidad, asi que la unica forma de
   que el telefono gane es llegar despues.

   Con las cuatro opciones fuera y los campos apretados, el panel baja de
   713px a algo que cabe en un tercio de pantalla: vuelve a ser una
   invitacion y deja de ser un muro. */
@media (max-width: 719px) {
  .cita-servicios { display: none; }
  .cita-texto { display: none; }
  .cita-titulo { font-size: 1.2rem; margin-bottom: .7rem; }
  .cita-campo input { padding: .7rem .85rem; font-size: .92rem; }
  .cita-campo + .cita-campo { margin-top: .5rem; }
  .cita-consent { font-size: .72rem; line-height: 1.35; }
  .cita-enviar { padding: .8rem 1rem; }
}