/* ============================================================
   REPORT LANDING — shared styles for /reports/<slug>/ landings
   La portada del reporte va de fondo con una capa oscura +
   gradiente violeta para que quede sutil. Columna izquierda:
   kicker / título / párrafo. Columna derecha: form de HubSpot.
   Cada landing define su fondo con:  --rl-cover: url('portada.jpg')
   ============================================================ */

.rl-hero {
  position: relative;
  padding: 190px 0 130px;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(115deg,
      rgba(6,0,22,0.85) 0%,
      rgba(20,6,48,0.66) 40%,
      rgba(62,12,120,0.48) 72%,
      rgba(136,18,227,0.3) 100%),
    var(--rl-cover);
  background-size: cover;
  background-position: center;
}
/* Fade inferior para fundir con el fondo de la página */
.rl-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(18,18,18,0) 0%, #121212 100%);
  pointer-events: none;
}

.rl-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}

/* ── Columna de texto ──────────────────────────────────────── */
.rl-kicker {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kc-cyan-500, #4CCBFF);
  margin-bottom: 20px;
}
.rl-title {
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 22px;
}
.rl-desc {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0;
  max-width: 540px;
}

/* ── Card del formulario ───────────────────────────────────── */
.rl-form-card {
  background: rgba(10,4,26,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.rl-form-card__title {
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  margin: 0 0 6px;
}
.rl-form-card__sub {
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 22px;
}

/* ── HubSpot form overrides (scope: #report-form-target) ───── */
/* Mismo look que el form del footer (shared.css) pero con id propio
   para no chocar con #hs-form-target que inyecta footer-form.js. */
#report-form-target .hs-form { margin: 0; }
#report-form-target .hs-form fieldset {
  max-width: 100% !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  border: none;
  padding: 0;
}
#report-form-target .hs-form fieldset.form-columns-1 { grid-template-columns: 1fr; }
#report-form-target .hs-form-field { display: flex !important; flex-direction: column !important; gap: 6px !important; margin: 0 !important; width: 100% !important; float: none !important; }
#report-form-target .hs-form-field > label {
  font-family: "Montserrat", sans-serif;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.6; color: #fff; font-weight: 600;
}
#report-form-target .hs-form-required { display: none; }
#report-form-target .hs-form-field select option { background: #1a1a2e; color: #fff; }
#report-form-target .hs-input,
#report-form-target .hs-form-field input:not([type="checkbox"]),
#report-form-target .hs-form-field select,
#report-form-target .hs-form-field textarea {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px !important;
  line-height: normal !important;
  color: #fff !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .2s, background .2s;
  outline: none;
  -webkit-appearance: none;
}
#report-form-target .hs-form-field input[type="checkbox"] {
  -webkit-appearance: checkbox !important; appearance: checkbox !important;
  background: revert !important; border: revert !important;
  border-radius: revert !important; padding: revert !important;
  accent-color: #9F44FB; width: 16px !important; height: 16px !important;
  cursor: pointer; flex-shrink: 0;
}
#report-form-target .hs-form-field textarea { min-height: 90px !important; resize: vertical; }
#report-form-target .hs-input:focus,
#report-form-target .hs-form-field input:focus,
#report-form-target .hs-form-field select:focus,
#report-form-target .hs-form-field textarea:focus {
  border-color: var(--kc-cyan-500) !important;
  background: rgba(76,203,255,0.04) !important;
  box-shadow: 0 0 0 3px rgba(76,203,255,0.15) !important;
}
#report-form-target .input { margin: 0 !important; width: 100% !important; }
#report-form-target .hs-error-msgs { font-size: 11px; color: #ff6b6b; margin: 4px 0 0; padding: 0; list-style: none; }
#report-form-target .hs-button,
#report-form-target input[type="submit"] {
  width: 100% !important; margin-top: 12px !important;
  padding: 16px 20px !important; border-radius: 14px !important;
  background: #9F44FB !important; border: 0 !important;
  color: #fff !important; font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.06em !important; cursor: pointer !important;
  display: block !important; transition: box-shadow .2s, transform .2s !important;
  box-shadow: 0 12px 40px -10px rgba(159,68,251,0.6) !important;
  -webkit-appearance: none !important;
}
#report-form-target .hs-button:hover,
#report-form-target input[type="submit"]:hover {
  box-shadow: 0 18px 52px -8px rgba(219,30,250,0.9) !important;
  transform: translateY(-1px) !important;
}
#report-form-target .hs-richtext,
#report-form-target .legal-consent-container { font-size: 12px; opacity: 0.5; color: #fff; margin: 12px 0 0; }
#report-form-target .legal-consent-container,
#report-form-target .legal-consent-container .hs-form-field,
#report-form-target .inputs-list,
#report-form-target .hs-form-booleancheckbox,
#report-form-target .hs-form-booleancheckbox li { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#report-form-target .hs-form-booleancheckbox li > label,
#report-form-target .hs-form-booleancheckbox-display {
  display: flex !important; flex-direction: row !important;
  align-items: flex-start !important; gap: 8px !important;
  font-size: 12px !important; color: rgba(255,255,255,0.5) !important;
  padding: 0 !important; margin: 0 !important; cursor: pointer;
}
#report-form-target .hs-form-booleancheckbox li > label > span,
#report-form-target .hs-form-booleancheckbox-display > span { flex: 1; line-height: 1.4; }
#report-form-target .hs-form-booleancheckbox input[type="checkbox"] { margin: 2px 0 0 0 !important; }
#report-form-target .hs-form-booleancheckbox-display input[type="checkbox"] {
  width: 14px !important; min-width: 14px !important; height: 14px !important;
  margin-top: 2px !important; padding: 0 !important; border-radius: 3px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.05) !important;
  flex-shrink: 0; accent-color: #9F44FB; cursor: pointer;
}
#report-form-target .hs-submit { margin-top: 4px; display: block !important; width: 100% !important; justify-content: unset !important; }
#report-form-target .actions { padding: 0 !important; display: block !important; width: 100% !important; }
#report-form-target .hs-form .hubspot-link__container { display: none !important; }
#report-form-target .submitted-message {
  font-size: 15px; line-height: 1.5; color: #fff; text-align: center; padding: 20px 0;
}

/* ── Variante sin formulario: botones de descarga directa ──── */
/* Reportes que en vez de form gate tienen descarga por idioma
   (banderas en _shared/flags/, links = CTAs de HubSpot). */
.rl-downloads {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rl-download-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s;
}
.rl-download-btn:hover {
  border-color: var(--kc-fuchsia-400, #B23AF0);
  background: rgba(178,58,240,0.12);
  transform: translateY(-1px);
}
.rl-download-btn img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rl-download-btn__label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
.rl-download-btn__hint {
  margin-left: auto;
  display: inline-flex;
  color: rgba(255,255,255,0.45);
  transition: color .2s, transform .2s;
}
.rl-download-btn:hover .rl-download-btn__hint {
  color: #fff;
  transform: translateY(2px);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .rl-hero { padding: 140px 0 90px; min-height: 0; }
  .rl-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  #report-form-target .hs-form fieldset { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .rl-form-card { padding: 28px 22px; }
}