/* ============================================================
   visual-polish.css · Capa de pulido visual (v3) · navy
   ------------------------------------------------------------
   Carga LA ÚLTIMA de todas (después de restyle-v2, visual-boost,
   visual-internas, mobile-fixes). Pule botones, cajas y añade un
   componente de banner reutilizable, SIN redefinir tokens --exa-*
   (hereda el navy oficial actual) y SIN tocar SEO ni HTML.

   GARANTÍAS DE SEGURIDAD MÓVIL (Ola 2 + D-090 intactos):
   · 0 media-queries `max-width` en este archivo → no altera ningún
     breakpoint afinado a mano.
   · Toda micro-interacción (transform/lift) va detrás de
     `@media (hover:hover) and (pointer:fine)` → en táctil no aplica.
   · Respeta SIEMPRE `prefers-reduced-motion: reduce`.

   Familias (guardas :has()):
   · body:has(.page-hero)  → home + city-landings + legales + servicios (117)
   · body:has(.post-hero)  → blog posts (30) — footprint reducido a propósito
   Namespace de clases nuevas: `vp-`.
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   1) BOTONES — look premium con states completos
   restyle-v2 los deja planos (transform:none, box-shadow:none);
   aquí reintroducimos lift + sombra + focus accesible.
   Color SOLO en primary/ghost; --whatsapp conserva su verde.
   ───────────────────────────────────────────────────────── */
.btn,
a.btn,
button.btn {
  border-radius: 10px !important;
  transition: transform .18s cubic-bezier(.2, .7, .2, 1),
              box-shadow .18s ease,
              background .18s ease,
              color .18s ease,
              border-color .18s ease !important;
}

/* Sombra de reposo sutil solo en el sólido (primary/whatsapp) */
.btn--primary { box-shadow: 0 2px 8px rgba(14, 26, 43, .12) !important; }
.btn--whatsapp { box-shadow: 0 2px 8px rgba(18, 140, 80, .18) !important; }

/* Lift en hover — solo en dispositivos con puntero fino (no táctil) */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover,
  .btn--ghost:hover,
  .btn--whatsapp:hover,
  .btn--accent:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(14, 26, 43, .20) !important;
  }
  .btn--whatsapp:hover {
    box-shadow: 0 8px 20px rgba(18, 140, 80, .28) !important;
  }
}

/* Active / pressed — feedback inmediato en todos los dispositivos */
.btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(14, 26, 43, .14) !important;
}

/* Focus accesible (WCAG 2.4.7) — anillo visible solo con teclado */
.btn:focus-visible {
  outline: 3px solid #1F3A5F !important;
  outline-offset: 3px !important;
}

/* Disabled */
.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────
   2) CAJAS — radius + sombra unificados en las ~15 variantes
   Solo clases inequívocamente "tarjeta" (evitamos `.box` a secas
   por ser demasiado genérico y poder ser un contenedor de layout).
   ───────────────────────────────────────────────────────── */
.card,
.related-card,
.region-card,
.price-card,
.contact-card,
.type-card,
.quote-card,
.author-card,
.box-c,
.infobox {
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(14, 26, 43, .06) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .related-card:hover,
  .region-card:hover,
  .price-card:hover,
  .type-card:hover,
  .quote-card:hover,
  .contact-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(14, 26, 43, .12) !important;
  }
}

/* ─────────────────────────────────────────────────────────
   3) TÍTULOS — jerarquía más clara SIN cambiar tamaños
   No tocamos font-size (protege el afinado mobile D-090 y las
   3 familias de layout). Solo `text-wrap: balance` (afecta al
   salto de línea, nunca al tamaño) + viudas/huérfanas en cuerpo.
   ───────────────────────────────────────────────────────── */
h1, h2, h3 {
  text-wrap: balance;
}
p, li {
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────
   4) BANNER / ANUNCIO destacado reutilizable (componente nuevo)
   Clase `vp-banner` (no se inyecta en HTML aquí; queda disponible
   para uso futuro sin riesgo de colisión). Navy, CTA prominente.
   ───────────────────────────────────────────────────────── */
.vp-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, #12035F 0%, #1F3A5F 55%, #1E40AF 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(14, 26, 43, .22);
}
.vp-banner__text {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  margin: 0;
}
.vp-banner__cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  background: #fff;
  color: #12035F;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .vp-banner__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  }
}

/* ─────────────────────────────────────────────────────────
   5) FOCO ACCESIBLE GLOBAL (enlaces e inputs) — WCAG AA
   ───────────────────────────────────────────────────────── */
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid #1F3A5F;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────
   6) GUARDA FAMILIA BLOG POST — footprint reducido
   En los 30 posts el hero es un gradiente cinemático y el cuerpo
   tiene su propio ritmo (visual-internas D-078). No tocamos sus
   títulos de cuerpo ni las tarjetas del hero; solo dejamos que el
   pulido de botones/related-card (zona "artículos relacionados")
   aplique, que es seguro y deseable.
   ───────────────────────────────────────────────────────── */
body:has(.post-hero) .post-hero h1,
body:has(.post-hero) .post-content h2,
body:has(.post-hero) .post-content h3 {
  text-wrap: balance; /* solo salto de línea, sin cambios de tamaño */
}

/* ─────────────────────────────────────────────────────────
   7) MOTION OFF — accesibilidad
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .card, .related-card, .region-card, .price-card, .contact-card,
  .type-card, .quote-card, .vp-banner__cta {
    transition: none !important;
  }
  .btn--primary:hover, .btn--ghost:hover, .btn--whatsapp:hover, .btn--accent:hover,
  .related-card:hover, .region-card:hover, .price-card:hover,
  .type-card:hover, .quote-card:hover, .contact-card:hover,
  .vp-banner__cta:hover {
    transform: none !important;
  }
}