/* ============================================================
   GONFIXIT · Patch 003 · Botón "Reserva tu consulta" respira
   Se anexa al final de styles.css (después del patch 002).
   ============================================================ */

/* ===== CTA principal de la cabecera ===== */
.nav-cta {
  font-size: 14px;
  font-weight: 600;
  padding: 13px 24px;            /* antes 12px 22px — más aire arriba/abajo */
  border-radius: 12px;           /* más redondeado, look pill suave */
  letter-spacing: -0.005em;
  line-height: 1.2;              /* fuerza altura legible */
  min-height: 44px;              /* altura tap-target accesible */
  display: inline-flex;
  align-items: center;
  gap: 8px;                      /* texto y flecha con separación */
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* El span de la flecha (".arrow") respira y se mueve en hover */
.nav-cta .arrow,
.nav-cta::after {
  display: inline-block;
  transition: transform 200ms ease;
}
.nav-cta:hover {
  background: #FF6E4A;
  transform: translateY(-1px);
}

/* En cabecera, garantiza que el botón no se aplaste */
.nav-inner .nav-cta {
  flex-shrink: 0;
}

/* ===== Botones móviles del drawer ===== */
.nav-mobile-cta {
  padding: 16px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ===== Selector de idiomas (un poco menos apretado) ===== */
.nav-lang {
  padding: 4px;
  border-radius: 999px;
}
.nav-lang button {
  font-size: 11.5px;
  padding: 8px 13px;
  letter-spacing: 0.08em;
  border-radius: 999px;
}

/* ===== Gap general de la cabecera ===== */
.nav-inner {
  gap: clamp(24px, 3.2vw, 44px);
}

/* ===== En pantallas medianas-pequeñas el CTA conserva la forma ===== */
@media (max-width: 1180px) {
  .nav-cta { padding: 12px 20px; font-size: 13.5px; }
}

/* ===== Botones principales (.btn-primary) refinados ===== */
.btn-primary {
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  line-height: 1.2;
  min-height: 52px;
  gap: 10px;
  letter-spacing: -0.005em;
}
.btn-ghost {
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  line-height: 1.2;
  min-height: 52px;
  gap: 10px;
  letter-spacing: -0.005em;
}

/* ===== Iconos sociales: corregir tamaño óptico WhatsApp ===== */
.social-icons a {
  width: 44px;
  height: 44px;
}
.social-icons svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* El SVG de WhatsApp es silueta sólida con más aire en el viewBox.
   Lo escalamos +30% para igualarlo visualmente al email e Instagram. */
.social-icons a[href*="wa.me"] svg {
  width: 28px;
  height: 28px;
}