/* =============================================================================
   WAL Partners — capa de mejoras sobre el sitio estático
   Cada bloque cita el hallazgo que arregla.
   Reporte: clientes/wal-partners/auditorias/landing-2026-08-21.md  (2026-08-21)
   Se carga última, después de los CSS del build, para poder sobrescribir.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1 · 🔴 El hero no puede depender de la hidratación para verse.
   La foto termina de descargarse a los 133 ms, pero React la apagaba al hidratar
   y volvía a subirla con una transición de 1500 ms. Resultado: el visitante veía
   un rectángulo azul liso donde va la promesa. Verificado 3 veces en vivo.

   ⚠️ El hero NO es una imagen fija: es un carrusel de 2 slides que rota cada ~7 s
   intercambiando z-index y haciendo crossfade (medido). Por eso NO se fuerza
   `opacity:1` en la slide 1 — eso mata el crossfade y lo convierte en corte seco.
   La solución que no toca el comportamiento: pintar la primera foto como fondo
   de la sección. Si las dos slides están en 0, se ve el fondo; el carrusel sigue
   funcionando arriba, idéntico. Nunca hay hueco.
   --------------------------------------------------------------------------- */
body section:first-of-type {
  background-image: url("/_next/image/5edb6289d89707f0.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------------
   2 · 🔴 Header pegajoso.
   La home mide 8,2 pantallas en desktop y 12,2 en mobile. El header era
   `position: relative`: pasada la primera pantalla, la única vía de conversión
   permanente era la burbuja de WhatsApp.
   --------------------------------------------------------------------------- */
header {
  position: sticky !important;
  top: 0;
  z-index: 60;
  box-shadow: 0 1px 0 rgb(0 0 0 / 6%), 0 6px 20px -12px rgb(0 0 0 / 25%);
}
/* el header original tiene py-4; al fijarlo conviene que ocupe menos alto */
@media (min-width: 768px) { header { padding-top: .6rem; padding-bottom: .6rem; } }

/* ---------------------------------------------------------------------------
   3 · 🔴 Targets táctiles por debajo del mínimo.
   Medido: los CTA de conversión miden 40px de alto (mínimo accesible: 44px).
   Los botones del sitio se marcan con `border-radius:50px` inline.
   --------------------------------------------------------------------------- */
/* ⚠️ Hay que cubrir las DOS formas del atributo: el HTML del servidor escribe
   `border-radius:50px` (sin espacio) y React lo re-serializa al hidratar como
   `border-radius: 50px;` (con espacio y punto y coma). Con una sola de las dos,
   la regla se aplica antes de hidratar y se cae después. */
a[style*="border-radius:50px"],  a[style*="border-radius: 50px"],
button[style*="border-radius:50px"], button[style*="border-radius: 50px"] {
  min-height: 48px;
  padding-top: .7rem;
  padding-bottom: .7rem;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   4 · 🔴 Contraste del formulario de contacto.
   Los 4 labels usan `oklch(.21 .034 264.665)` (gris 900) sobre el azul de marca
   `rgb(30,70,143)` → 1,1:1 (mínimo AA: 4,5). Incluye el aviso de consentimiento,
   que además es legalmente relevante: consentimiento ilegible no es consentimiento.
   Se resuelve con un panel sólido detrás del formulario en vez de retocar color
   por color — así el contraste deja de depender de la foto que haya atrás.
   --------------------------------------------------------------------------- */
form.flex.flex-wrap {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 2rem 1.75rem;
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 45%);
}
@media (max-width: 640px) { form.flex.flex-wrap { padding: 1.5rem 1.1rem; } }

/* ---------------------------------------------------------------------------
   5 · 🟡 Largo de línea.
   Medido: hasta 165 caracteres por línea en desktop (umbral de legibilidad: 75).
   --------------------------------------------------------------------------- */
section p, section li { max-width: 58ch; }
/* En bloques centrados hay que devolver los márgenes automáticos, si no el texto
   queda centrado dentro de una caja pegada a la izquierda. */
section .text-center p,
section .text-center h5,
section .text-center h6 { max-width: 58ch; margin-inline: auto; }
footer p { max-width: 60ch; }

/* ---------------------------------------------------------------------------
   6 · 🟡 Interacción.
   Medido: 11 de 28 elementos clicables no tenían ninguna transición.
   --------------------------------------------------------------------------- */
a, button, [role="button"] {
  transition: color .18s ease, background-color .18s ease,
              opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
a[style*="border-radius:50px"]:hover,  a[style*="border-radius: 50px"]:hover,
button[style*="border-radius:50px"]:hover, button[style*="border-radius: 50px"]:hover {
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   7 · 🟡 Radios de borde.
   Medido: 6 valores distintos conviviendo (4px, 6.4px, 8px, 50px, 50%, y un
   `3.35544e+07px` que es basura de `rounded-full`). Se unifican los chicos.
   --------------------------------------------------------------------------- */
/* Un solo valor propio (12px) para todo lo que no es píldora. Si se usan dos
   —uno para imágenes y otro para el panel— la cuenta de radios SUBE en vez de bajar,
   que es justo lo que el hallazgo pedía arreglar. */
img:not([style*="border-radius"]), figure,
.rounded-sm, .rounded, .rounded-md, .rounded-lg, .rounded-xl,
input, textarea, select { border-radius: 12px; }
/* el widget de WhatsApp trae 24px y un `20px 20px 20px 2px`: se alinean también */
[class*="whatsappChatBox"], [class*="chatHeader"], [class*="chatBody"] { border-radius: 12px !important; }

/* ---------------------------------------------------------------------------
   8 · 🟡 Banner de cookies.
   En mobile ocupaba ~40% de la primera pantalla, justo debajo del CTA del hero,
   y sus botones eran gris carbón, fuera de la paleta.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .cm.cm--box { max-height: 42vh; overflow-y: auto; font-size: .92rem; }
  .cm.cm--box .cm__desc { font-size: .85rem; }
}
.cm__btn--primary, .cm__btn--secondary {
  background: var(--color-tint-light-buttonBackgroundColor-medium, #1E468F) !important;
  border-color: var(--color-tint-light-buttonBackgroundColor-medium, #1E468F) !important;
  color: #fff !important;
}
.cm__btn--secondary { background: transparent !important; color: #1E468F !important; }

/* ---------------------------------------------------------------------------
   9 · Foco visible (no estaba en el reporte, pero es lo mínimo accesible
   cuando se agranda el área clicable de los CTA).
   --------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid #1E468F;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   10 · 🔴 Hueco sin CTA — barra de conversión fija en mobile.
   Medido: 4,9 pantallas seguidas sin ningún CTA en mobile (umbral: 4).
   En desktop lo cubre el header sticky (lleva "Contacto"); en mobile ese link
   queda dentro de la hamburguesa, así que hace falta una superficie propia.
   El markup lo monta _v2/mejoras.js.
   --------------------------------------------------------------------------- */
#wal-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, #FCFBFB 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 -1px 0 rgb(0 0 0 / 8%), 0 -10px 30px -18px rgb(0 0 0 / 40%);
  transform: translateY(110%);
  transition: transform .25s ease;
}
#wal-cta-bar.is-visible { transform: translateY(0); }
#wal-cta-bar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px;
  border-radius: 50px;
  background: linear-gradient(to bottom right,
              var(--color-tint-light-buttonBackgroundColor-low, #2250a4),
              var(--color-tint-light-buttonBackgroundColor-high, #1a3c7a));
  color: var(--color-tint-light-buttonTextColor-medium, #fff);
  font-size: 1.02rem; font-weight: 600; text-decoration: none;
}
#wal-cta-bar svg { width: 18px; height: 18px; }

@media (max-width: 767px) {
  #wal-cta-bar { display: block; }
  /* que la barra no tape el final del footer */
  body { padding-bottom: 76px; }
  /* ni se pise con la burbuja de WhatsApp */
  .FloatingWhatsApp_whatsappButton__qj9EM,
  [class*="whatsappButton"] { bottom: 92px !important; }
}

/* ---------------------------------------------------------------------------
   11 · 🔴 Prueba social (BORRADOR — ver _v2/prueba-social.js).
   Hallazgo: 1/10. Cero testimonios, cero casos, cero cifras, en una página que
   promete protección durante 8,2 pantallas. El avatar tiene como miedo #1 al
   "Estafador Con Título" y el Libro dice que ese miedo se destruye MOSTRANDO.
   El bloque va dentro del hueco de 4,9 pantallas sin CTA: resuelve las dos cosas.
   --------------------------------------------------------------------------- */
#wal-prueba-social {
  background: var(--color-default-light-backgroundColor-medium, #FCFBFB);
  padding: clamp(3rem, 7vw, 5.5rem) 1rem;
}
.wal-ps__wrap { max-width: 72rem; margin: 0 auto; text-align: center; }

/* el aviso desaparece solo cuando se saque data-borrador del <section> */
#wal-prueba-social:not([data-borrador]) .wal-ps__aviso { display: none; }
.wal-ps__aviso {
  display: inline-block; margin-bottom: 1.5rem;
  padding: .5rem .9rem; border-radius: 12px;
  background: #FEF3C7; color: #7C2D12;
  border: 1px dashed #B45309;
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
}
#wal-prueba-social[data-borrador] .wal-ps__grid { outline: 2px dashed #B45309; outline-offset: 14px; }

.wal-ps__kicker {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-tint-light-backgroundColor-medium, #1E468F);
  margin-bottom: .5rem;
}
.wal-ps__titulo {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1.15;
  color: var(--color-default-light-headlineColor-medium, #0b1020);
  max-width: 22ch; margin: 0 auto 2.5rem;
}
.wal-ps__grid {
  display: grid; gap: 1.25rem; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.wal-ps__caso {
  background: #fff; border: 1px solid rgb(15 23 42 / 8%);
  border-radius: 12px; padding: 1.5rem 1.35rem;
  box-shadow: 0 18px 40px -28px rgb(15 23 42 / 45%);
  display: flex; flex-direction: column; gap: .9rem;
}
.wal-ps__paso { margin: 0; font-size: .97rem; line-height: 1.5; color: #1f2937; }
.wal-ps__paso span {
  display: block; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #64748b; margin-bottom: .2rem;
}
.wal-ps__paso--res {
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid rgb(15 23 42 / 8%);
  font-weight: 600; color: var(--color-tint-light-backgroundColor-medium, #1E468F);
}
.wal-ps__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 2.5rem; min-height: 48px; padding: .7rem 1.6rem; border-radius: 50px;
  background: linear-gradient(to bottom right,
              var(--color-tint-light-buttonBackgroundColor-low, #2250a4),
              var(--color-tint-light-buttonBackgroundColor-high, #1a3c7a));
  color: #fff; font-weight: 600; text-decoration: none;
}
.wal-ps__cta svg { width: 18px; height: 18px; }