/* Revisión visual y tipográfica — agosto de 2026 */

/* Controla mejor los saltos de línea sin forzar <br> rígidos. */
.hero h1,
.page-hero h1,
.section h2,
.prose h2,
.card h3,
.plan h3,
.cta h2 {
  text-wrap: balance;
}

.lead,
.section-title p,
.card p,
.step p,
.quote,
.prose p,
.cta p {
  text-wrap: pretty;
}

/* Tarjetas equilibradas y llamadas a la acción alineadas. */
.card {
  display: flex;
  flex-direction: column;
}

.card .link {
  margin-top: auto;
  padding-top: 20px;
}

/* Evita que el footer de la página contamine el footer semántico de las citas. */
.quote {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.quote footer,
.section-dark .quote footer {
  margin-top: 18px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #5f6f82;
  font-size: 0.9rem;
  line-height: 1.45;
}

@media (max-width: 620px) {
  /* Mensaje breve: la barra ya no ocupa dos líneas. */
  .topbar .container {
    font-size: 0;
    white-space: nowrap;
  }

  .topbar .container::after {
    content: "Respuesta en ≤ 2 horas · Solo empresas";
    font-size: 0.76rem;
  }

  .topbar .dot {
    margin-top: 5px;
  }

  /* Dos acciones simétricas; en pantallas muy estrechas pasan a una columna. */
  .hero .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hero .actions .btn {
    width: 100%;
    padding-inline: 12px;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .section-title {
    margin-bottom: 34px;
  }

  .card {
    padding: 26px;
  }

  /* Las acciones principales ya están dentro del contenido: evitamos duplicar
     WhatsApp y tapar textos durante el desplazamiento. */
  .floating,
  .floating.btn {
    display: none;
  }

  .privacy-settings {
    right: auto;
    bottom: 14px;
    left: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
  }

  .privacy-settings::after {
    content: "Cookies";
    font-size: 0.6rem;
  }

  .consent-box {
    max-height: calc(100dvh - 20px);
    overflow: auto;
  }
}

@media (max-width: 370px) {
  .hero .actions {
    grid-template-columns: 1fr;
  }

}