/* ============================================================
   RHA Landings · estilos propios
   Complementa rha.css (ya cargado). Usa sus variables:
   --rha-rojo, --rha-rojo-oscuro, --rha-blanco, --rha-marfil,
   --rha-gris, --rha-tinta, --rha-borde, --rha-serif, --rha-display
   NO carga fuentes nuevas (performance).
   ============================================================ */

/* ============================================================
   Full-bleed de la landing.
   El tema Hello Elementor restringe el ancho del contenido (main /
   page-content). Neutralizamos ese límite SOLO en la landing usando la
   clase de body rhal-page (estable, la agrega el plugin), sin tocar el
   tema ni afectar otras páginas del sitio.
   ============================================================ */
body.rhal-page .site-main,
body.rhal-page .page-content,
body.rhal-page .entry-content,
body.rhal-page.rha-doc .site-main,
body.rhal-page.rha-doc .page-content,
body.rhal-page.rha-doc .entry-content{
  max-width:none !important;
  width:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}
/* Hello Elementor separa los bloques con margin-block; lo anulamos en la landing */
body.rhal-page .site-main > *,
body.rhal-page .page-content > *,
body.rhal-page .entry-content > *{margin-top:0 !important;margin-bottom:0 !important}
body.rhal-page{overflow-x:clip}
/* El tema suele meter padding en el contenedor del sitio; lo neutralizamos */
body.rhal-page .site-main{border:0 !important}

/* Cada sección ocupa el ancho completo del viewport; el contenido interno
   se re-centra con .rha-wrap (max-width 1180px), igual que el resto del sitio. */
.rhal > section{
  width:100%;max-width:100%;position:relative;
}

/* ---------- 1 · HERO ---------- */
.rhal-hero{background:var(--rha-blanco);border-bottom:1px solid var(--rha-borde);padding:52px 0 48px}
.rhal-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.rhal-hero-copy h1{
  font-family:var(--rha-serif);font-weight:400;
  font-size:clamp(32px,3.8vw,50px);line-height:1.06;letter-spacing:-.01em;
  margin:0 0 6px;color:var(--rha-tinta);
}
.rhal-hero-copy .rha-lead{margin-top:14px}
.rhal-hero-bullets{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.rhal-hero-bullets li{position:relative;padding-left:28px;color:var(--rha-tinta);font-size:15.5px;line-height:1.5}
.rhal-hero-bullets li::before{
  content:"";position:absolute;left:0;top:9px;width:12px;height:12px;
  background:var(--rha-rojo);border-radius:2px;
}

/* Tarjeta de formulario */
.rhal-form-card{
  background:var(--rha-blanco);border:1px solid var(--rha-borde);
  padding:30px;box-shadow:0 14px 40px rgba(42,42,44,.07);
}
.rhal-hero-form{position:sticky;top:24px}
.rhal-form-title{
  font-family:var(--rha-serif);font-weight:400;font-size:23px;line-height:1.2;
  margin:0 0 6px;color:var(--rha-tinta);
}
.rhal-form-sub{font-size:14px;color:var(--rha-gris);margin:0 0 20px;line-height:1.5}

/* ---------- Formulario CF7 ---------- */
.rhal-cf7 .rhal-f{margin:0 0 12px !important}
.rhal-cf7 .rhal-f label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--rha-tinta);margin-bottom:3px;line-height:1.2}
/* CF7 inserta <br> y <p> automáticos: los neutralizamos para que el label
   quede pegado a su campo, sin afectar el espaciado entre campos. */
.rhal-cf7 br{display:none !important}
.rhal-cf7 > p:empty,.rhal-cf7 p:not(.rhal-f){margin:0 !important}
.rhal-cf7 .rhal-f2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 12px}
.rhal-cf7 .rhal-f2 .rhal-f{margin:0 !important}
.rhal-cf7 .wpcf7-form-control-wrap{display:block}
.rhal-cf7 input[type=text],
.rhal-cf7 input[type=email],
.rhal-cf7 input[type=tel],
.rhal-cf7 select,
.rhal-cf7 textarea{
  width:100%;box-sizing:border-box;padding:11px 13px;
  border:1px solid var(--rha-borde);background:#fff;color:var(--rha-tinta);
  font-family:inherit;font-size:14.5px;border-radius:0;transition:border-color .2s;
}
.rhal-cf7 input:focus,.rhal-cf7 select:focus,.rhal-cf7 textarea:focus{
  outline:none;border-color:var(--rha-rojo);
}
.rhal-cf7 textarea{min-height:46px;resize:vertical}
.rhal-cf7 .wpcf7-submit{width:100%;margin-top:4px}
.rhal-cf7 .wpcf7-spinner{display:block;margin:12px auto 0}
.rhal-cf7 .wpcf7-not-valid-tip{font-size:12px;color:var(--rha-rojo);margin-top:3px}
.rhal-cf7 .wpcf7-response-output{
  margin:16px 0 0;padding:12px 14px;font-size:13.5px;border:1px solid var(--rha-borde);
}

/* ---------- 2 · Clientes ---------- */
.rhal-clientes{background:var(--rha-blanco);border-bottom:1px solid var(--rha-borde);padding:0}
/* El shortcode [rha_clientes] trae su propio borde superior y padding.
   Los anulamos acá para no duplicar la línea con el borde del hero. */
.rhal-clientes .rha-clientes{border-top:0 !important;padding:32px 0 28px !important}
.rhal-clientes .rha-eyebrow{margin-bottom:6px}

/* ---------- 3 · Autodescarte ---------- */
.rhal-descarte{background:var(--rha-marfil);border-bottom:1px solid var(--rha-borde);padding:44px 0}
.rhal-descarte .rha-wrap{max-width:820px;text-align:center}
.rhal-descarte-fuerte{
  font-family:var(--rha-serif);font-weight:400;font-size:clamp(22px,2.6vw,30px);
  line-height:1.25;color:var(--rha-tinta);margin:0 0 12px;
}
.rhal-descarte-sub{font-size:16px;color:var(--rha-gris);line-height:1.6;margin:0 auto;max-width:60ch}

/* ---------- Títulos de sección comunes ---------- */
.rhal-h2{
  font-family:var(--rha-serif);font-weight:400;font-size:clamp(26px,3.2vw,38px);
  line-height:1.15;letter-spacing:-.01em;color:var(--rha-tinta);margin:6px 0 0;
}

/* ---------- 4 · Cursos ---------- */
.rhal-cursos{background:var(--rha-blanco);padding:60px 0 40px}
.rhal-cursos-intro{font-size:16px;color:var(--rha-gris);line-height:1.6;max-width:720px;margin:14px 0 0}
.rhal-cursos .rha-grid-cursos{margin-top:32px}

/* ---------- 5 · Proceso ---------- */
.rhal-proceso{background:var(--rha-blanco);padding:20px 0 60px}
.rhal-pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:34px}
.rhal-paso{background:var(--rha-blanco);border:1px solid var(--rha-borde);padding:26px 22px;position:relative;transition:box-shadow .3s}
.rhal-paso:hover{box-shadow:0 12px 30px rgba(42,42,44,.07)}
.rhal-paso-num{
  font-family:var(--rha-display,var(--rha-serif));font-size:14px;font-weight:700;
  letter-spacing:.1em;color:var(--rha-rojo);display:block;margin-bottom:12px;
}
.rhal-paso h3{font-size:17px;font-weight:700;margin:0 0 8px;color:var(--rha-tinta)}
.rhal-paso p{font-size:14px;color:var(--rha-gris);line-height:1.55;margin:0}

/* ---------- 6 · Cierre ---------- */
.rhal-cierre{background:var(--rha-marfil);border-top:1px solid var(--rha-borde);padding:56px 0}
.rhal-cierre-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.rhal-cierre-sub{font-size:16px;color:var(--rha-gris);line-height:1.6;margin:14px 0 0}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .rhal-hero-grid{grid-template-columns:1fr;gap:24px}
  .rhal-hero-form{position:static}
  /* En móvil: primero el título y la bajada (dan contexto a quien llega de un
     anuncio), después el formulario, y los bullets de refuerzo al final.
     display:contents deja que los hijos del copy participen del mismo flujo,
     para poder intercalar el formulario entre ellos. */
  .rhal-hero-copy{display:contents}
  .rhal-hero-copy .rha-eyebrow{order:1}
  .rhal-hero-copy h1{order:2}
  .rhal-hero-copy .rha-lead{order:3;margin-bottom:4px}
  .rhal-hero-form{order:4}
  .rhal-hero-bullets{order:5;margin-top:4px}
  .rhal-pasos{grid-template-columns:1fr 1fr}
  .rhal-cierre-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .rhal-cf7 .rhal-f2{grid-template-columns:1fr}
  .rhal-pasos{grid-template-columns:1fr}
  .rhal-hero{padding:36px 0 34px}
}

/* Refuerzo: si algún filtro externo vuelve a insertar párrafos vacíos entre
   secciones, no deben ocupar espacio. */
.rhal > p:empty,
.rhal p:empty{display:none !important;margin:0 !important;height:0 !important}