/* =========================================================
       RELFIII LANDING PAGE — V1
       Código isolado para facilitar uso no Elementor/WordPress.
       ================================================= */

    :root {
      --relfiii-ink: #1C1A19;
      --relfiii-blue-1: #3991C1;
      --relfiii-blue-2: #ACDCF3;
      --relfiii-blue-3: #0DA2DC;
      --relfiii-bg: #F6FAFC;
      --relfiii-surface: #FFFFFF;
      --relfiii-muted: #5E6B73;
      --relfiii-line: #DCEAF1;
      --relfiii-success: #147A55;
      --relfiii-error: #A83B3B;
      --relfiii-radius-sm: 14px;
      --relfiii-radius-md: 22px;
      --relfiii-radius-lg: 34px;
      --relfiii-shadow: 0 24px 70px rgba(28, 26, 25, .10);
      --relfiii-shadow-soft: 0 14px 40px rgba(28, 26, 25, .07);
      --relfiii-container: 1180px;
    }

    .relfiii-lp {
      overflow: hidden;
      background: var(--relfiii-bg);
      color: var(--relfiii-ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .relfiii-lp,
    .relfiii-lp *,
    .relfiii-lp *::before,
    .relfiii-lp *::after {
      box-sizing: border-box;
    }

    .relfiii-lp a {
      color: inherit;
    }

    .relfiii-lp button,
    .relfiii-lp input,
    .relfiii-lp select {
      font: inherit;
    }

    .relfiii-container {
      width: min(calc(100% - 40px), var(--relfiii-container));
      margin-inline: auto;
    }

    .relfiii-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 18px;
      padding: 8px 12px;
      border: 1px solid rgba(57, 145, 193, .25);
      border-radius: 999px;
      background: rgba(172, 220, 243, .28);
      color: #256B91;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .02em;
    }

    .relfiii-eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--relfiii-blue-3);
      box-shadow: 0 0 0 5px rgba(13, 162, 220, .12);
    }

    .relfiii-section-heading {
      max-width: 760px;
      margin-bottom: 46px;
    }

    .relfiii-section-heading h2 {
      margin: 0 0 16px;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.03;
      letter-spacing: -.045em;
    }

    .relfiii-section-heading p {
      margin: 0;
      max-width: 690px;
      color: var(--relfiii-muted);
      font-size: clamp(17px, 2vw, 20px);
      line-height: 1.65;
    }

    /* Cabeçalho */
    .relfiii-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 100;
      box-sizing: border-box;
      border-bottom: 1px solid transparent;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Arial, sans-serif;
      transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .relfiii-header *,
    .relfiii-header *::before,
    .relfiii-header *::after {
      box-sizing: border-box;
    }

    .relfiii-header.is-scrolled {
      background: rgba(255, 255, 255, .88);
      border-color: rgba(57, 145, 193, .16);
      box-shadow: 0 10px 34px rgba(28, 26, 25, .06);
      backdrop-filter: blur(16px);
    }

    .relfiii-nav {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .relfiii-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      font-weight: 900;
      letter-spacing: -.045em;
    }

    .relfiii-brand-mark {
      display: inline-flex;
      align-items: flex-end;
      gap: 4px;
      height: 28px;
    }

    .relfiii-brand-mark i {
      display: block;
      width: 7px;
      border-radius: 999px;
      transform-origin: bottom;
      animation: relfiii-bars 4.4s infinite ease-in-out;
    }

    .relfiii-brand-mark i:nth-child(1) {
      height: 20px;
      background: var(--relfiii-blue-1);
    }

    .relfiii-brand-mark i:nth-child(2) {
      height: 28px;
      background: var(--relfiii-blue-2);
      animation-delay: .15s;
    }

    .relfiii-brand-mark i:nth-child(3) {
      height: 24px;
      background: var(--relfiii-blue-3);
      animation-delay: .3s;
    }

    @keyframes relfiii-bars {
      0%, 70%, 100% { transform: translateY(0); }
      78% { transform: translateY(-5px); }
      86% { transform: translateY(0); }
    }

    .relfiii-brand-name {
      font-size: 25px;
    }

    .relfiii-menu {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .relfiii-menu a {
      color: #40515C;
      font-size: 14px;
      font-weight: 750;
      text-decoration: none;
    }

    .relfiii-menu a:hover {
      color: var(--relfiii-blue-1);
    }

    .relfiii-btn {
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 13px 20px;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      font-size: 15px;
      font-weight: 850;
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .relfiii-btn:hover {
      transform: translateY(-2px);
    }

    .relfiii-btn-primary {
      background: var(--relfiii-blue-3);
      color: #fff;
      box-shadow: 0 12px 26px rgba(13, 162, 220, .28);
    }

    .relfiii-btn-primary:hover {
      background: #078FC5;
      box-shadow: 0 16px 34px rgba(13, 162, 220, .35);
    }

    .relfiii-btn-secondary {
      background: #fff;
      color: var(--relfiii-ink);
      border: 1px solid var(--relfiii-line);
      box-shadow: var(--relfiii-shadow-soft);
    }

    /* Hero */
    .relfiii-hero {
      position: relative;
      min-height: 820px;
      display: flex;
      align-items: center;
      padding: 150px 0 90px;
      background:
        radial-gradient(circle at 88% 12%, rgba(172, 220, 243, .56), transparent 32%),
        radial-gradient(circle at 8% 70%, rgba(57, 145, 193, .12), transparent 28%),
        linear-gradient(180deg, #FFFFFF 0%, #F6FAFC 100%);
    }

    .relfiii-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(57,145,193,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,145,193,.055) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%);
    }

    .relfiii-hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.04fr .96fr;
      align-items: center;
      gap: 70px;
    }

    .relfiii-hero-copy h1 {
      max-width: 760px;
      margin: 0 0 24px;
      font-size: clamp(48px, 7.2vw, 86px);
      line-height: .98;
      letter-spacing: -.065em;
    }

    .relfiii-hero-copy h1 span {
      color: var(--relfiii-blue-1);
    }

    .relfiii-hero-copy > p {
      max-width: 650px;
      margin: 0;
      color: var(--relfiii-muted);
      font-size: clamp(18px, 2.2vw, 23px);
      line-height: 1.58;
    }

    .relfiii-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .relfiii-hero-note {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-top: 24px;
      color: #51636D;
      font-size: 13px;
      font-weight: 750;
    }

    .relfiii-hero-note span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .relfiii-hero-note span::before {
      content: "✓";
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(20, 122, 85, .12);
      color: var(--relfiii-success);
      font-size: 12px;
      font-weight: 950;
    }

    /* Ilustração hero */
    .relfiii-visual {
      position: relative;
      min-height: 540px;
    }

    .relfiii-orbit {
      position: absolute;
      inset: 50% auto auto 50%;
      width: 500px;
      height: 500px;
      border: 1px solid rgba(57, 145, 193, .18);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .relfiii-orbit::before,
    .relfiii-orbit::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(57, 145, 193, .13);
      border-radius: inherit;
    }

    .relfiii-orbit::before {
      inset: 55px;
    }

    .relfiii-orbit::after {
      inset: 115px;
    }

    .relfiii-center-card {
      position: absolute;
      inset: 50% auto auto 50%;
      width: min(82%, 360px);
      padding: 30px;
      border: 1px solid rgba(255,255,255,.9);
      border-radius: var(--relfiii-radius-lg);
      background: rgba(255, 255, 255, .86);
      box-shadow: var(--relfiii-shadow);
      transform: translate(-50%, -50%);
      backdrop-filter: blur(18px);
    }

    .relfiii-center-card-label {
      margin-bottom: 14px;
      color: var(--relfiii-blue-1);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .relfiii-center-card h3 {
      margin: 0 0 12px;
      font-size: 30px;
      line-height: 1.05;
      letter-spacing: -.035em;
    }

    .relfiii-center-card p {
      margin: 0;
      color: var(--relfiii-muted);
      line-height: 1.55;
    }

    .relfiii-mini-list {
      display: grid;
      gap: 10px;
      margin-top: 24px;
    }

    .relfiii-mini-list div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 14px;
      border-radius: 14px;
      background: #F4F9FC;
      color: #40515C;
      font-size: 13px;
      font-weight: 800;
    }

    .relfiii-mini-list b {
      color: var(--relfiii-blue-3);
    }

    .relfiii-floating-card {
      position: absolute;
      min-width: 180px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.95);
      border-radius: 20px;
      background: rgba(255,255,255,.90);
      box-shadow: var(--relfiii-shadow-soft);
      backdrop-filter: blur(14px);
      animation: relfiii-float 5s ease-in-out infinite;
    }

    .relfiii-floating-card strong {
      display: block;
      margin-bottom: 6px;
      font-size: 15px;
    }

    .relfiii-floating-card small {
      color: var(--relfiii-muted);
      line-height: 1.45;
    }

    .relfiii-floating-card.one {
      top: 45px;
      right: 0;
    }

    .relfiii-floating-card.two {
      left: 0;
      bottom: 70px;
      animation-delay: .9s;
    }

    .relfiii-floating-card.three {
      right: 16px;
      bottom: 28px;
      animation-delay: 1.6s;
    }

    @keyframes relfiii-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .relfiii-card-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      margin-bottom: 12px;
      border-radius: 12px;
      background: rgba(172, 220, 243, .36);
      color: var(--relfiii-blue-1);
      font-weight: 950;
    }

    /* Benefícios */
    .relfiii-benefits {
      padding: 110px 0;
      background: #fff;
    }

    .relfiii-benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .relfiii-benefit-card {
      padding: 30px;
      border: 1px solid var(--relfiii-line);
      border-radius: var(--relfiii-radius-md);
      background: linear-gradient(180deg, #FFFFFF, #FAFDFE);
      box-shadow: 0 10px 28px rgba(28, 26, 25, .045);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .relfiii-benefit-card:hover {
      transform: translateY(-6px);
      border-color: rgba(57,145,193,.36);
      box-shadow: var(--relfiii-shadow-soft);
    }

    .relfiii-benefit-card .relfiii-card-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      font-size: 20px;
    }

    .relfiii-benefit-card h3 {
      margin: 20px 0 12px;
      font-size: 23px;
      letter-spacing: -.025em;
    }

    .relfiii-benefit-card p {
      margin: 0;
      color: var(--relfiii-muted);
      line-height: 1.65;
    }

    /* Como funciona */
    .relfiii-how {
      padding: 110px 0;
      background:
        radial-gradient(circle at 10% 20%, rgba(172,220,243,.22), transparent 26%),
        var(--relfiii-bg);
    }

    .relfiii-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      counter-reset: relfiii-step;
    }

    .relfiii-step {
      counter-increment: relfiii-step;
      position: relative;
      padding: 30px;
      border-radius: var(--relfiii-radius-md);
      background: #fff;
      box-shadow: var(--relfiii-shadow-soft);
    }

    .relfiii-step::before {
      content: "0" counter(relfiii-step);
      display: inline-flex;
      margin-bottom: 54px;
      color: var(--relfiii-blue-3);
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .relfiii-step h3 {
      margin: 0 0 10px;
      font-size: 24px;
      letter-spacing: -.025em;
    }

    .relfiii-step p {
      margin: 0;
      color: var(--relfiii-muted);
      line-height: 1.62;
    }

    /* Propósito */
    .relfiii-purpose {
      padding: 120px 0;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(13,162,220,.95), rgba(57,145,193,.96)),
        var(--relfiii-blue-1);
    }

    .relfiii-purpose-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 70px;
      align-items: center;
    }

    .relfiii-purpose h2 {
      margin: 0;
      font-size: clamp(43px, 6vw, 76px);
      line-height: 1;
      letter-spacing: -.055em;
    }

    .relfiii-purpose-copy {
      max-width: 610px;
    }

    .relfiii-purpose-copy p {
      margin: 0;
      color: rgba(255,255,255,.86);
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.65;
    }

    .relfiii-purpose-phrase {
      display: inline-block;
      margin-top: 24px;
      padding-bottom: 6px;
      border-bottom: 2px solid rgba(255,255,255,.55);
      font-weight: 900;
    }

    /* Convite e formulário */
    .relfiii-invite {
      padding: 120px 0;
      background: #fff;
    }

    .relfiii-invite-shell {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 52px;
      align-items: stretch;
      padding: 34px;
      border: 1px solid var(--relfiii-line);
      border-radius: var(--relfiii-radius-lg);
      background: var(--relfiii-bg);
      box-shadow: var(--relfiii-shadow);
    }

    .relfiii-invite-copy {
      position: relative;
      overflow: hidden;
      min-height: 520px;
      padding: 44px;
      border-radius: 26px;
      color: #fff;
      background:
        radial-gradient(circle at 80% 20%, rgba(172,220,243,.33), transparent 25%),
        linear-gradient(145deg, #1C1A19 0%, #1E465C 100%);
    }

    .relfiii-invite-copy::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -80px;
      bottom: -100px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 50%;
      box-shadow:
        0 0 0 45px rgba(255,255,255,.025),
        0 0 0 90px rgba(255,255,255,.018);
    }

    .relfiii-invite-copy h2 {
      position: relative;
      z-index: 1;
      margin: 0 0 18px;
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1.02;
      letter-spacing: -.045em;
    }

    .relfiii-invite-copy p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: rgba(255,255,255,.76);
      font-size: 18px;
      line-height: 1.65;
    }

    .relfiii-invite-points {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 14px;
      margin-top: 34px;
    }

    .relfiii-invite-points div {
      display: flex;
      gap: 12px;
      color: rgba(255,255,255,.9);
      font-weight: 760;
    }

    .relfiii-invite-points div::before {
      content: "✓";
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(172,220,243,.18);
      color: var(--relfiii-blue-2);
      font-size: 12px;
      font-weight: 950;
    }

    .relfiii-form-wrap {
      display: flex;
      align-items: center;
      padding: 28px;
    }

    .relfiii-form {
      width: 100%;
    }

    .relfiii-form h3 {
      margin: 0 0 8px;
      font-size: 29px;
      letter-spacing: -.03em;
    }

    .relfiii-form-intro {
      margin: 0 0 28px;
      color: var(--relfiii-muted);
      line-height: 1.55;
    }

    .relfiii-field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .relfiii-field {
      display: grid;
      gap: 8px;
    }

    .relfiii-field.full {
      grid-column: 1 / -1;
    }

    .relfiii-field label {
      color: #31444F;
      font-size: 13px;
      font-weight: 850;
    }

    .relfiii-field input,
    .relfiii-field select {
      width: 100%;
      height: 54px;
      padding: 0 16px;
      border: 1px solid #CADDE7;
      border-radius: 14px;
      outline: none;
      background: #fff;
      color: var(--relfiii-ink);
      transition: border-color .18s ease, box-shadow .18s ease;
    }

    .relfiii-field input:focus,
    .relfiii-field select:focus {
      border-color: var(--relfiii-blue-3);
      box-shadow: 0 0 0 4px rgba(13, 162, 220, .12);
    }

    .relfiii-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 18px 0;
      color: var(--relfiii-muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .relfiii-consent input {
      width: 17px;
      height: 17px;
      margin: 2px 0 0;
      accent-color: var(--relfiii-blue-3);
    }

    .relfiii-submit {
      width: 100%;
      margin-top: 2px;
    }

    .relfiii-form-status {
      min-height: 24px;
      margin: 14px 0 0;
      font-size: 13px;
      font-weight: 750;
    }

    .relfiii-form-status.success {
      color: var(--relfiii-success);
    }

    .relfiii-form-status.error {
      color: var(--relfiii-error);
    }

    .relfiii-honeypot {
      position: absolute !important;
      left: -9999px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* Rodapé */
    .relfiii-footer {
      padding: 34px 0;
      border-top: 1px solid var(--relfiii-line);
      background: #fff;
    }

    .relfiii-footer-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      color: #61727C;
      font-size: 13px;
    }

    .relfiii-footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .relfiii-footer-links a {
      text-decoration: none;
    }

    .relfiii-footer-links a:hover {
      color: var(--relfiii-blue-1);
    }

    /* Entrada suave */
    [data-reveal] {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }

    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsividade */
    @media (max-width: 980px) {
      .relfiii-menu a:not(.relfiii-btn) {
        display: none;
      }

      .relfiii-hero {
        min-height: auto;
        padding-top: 130px;
      }

      .relfiii-hero-grid,
      .relfiii-purpose-grid,
      .relfiii-invite-shell {
        grid-template-columns: 1fr;
      }

      .relfiii-hero-grid {
        gap: 28px;
      }

      .relfiii-visual {
        min-height: 520px;
      }

      .relfiii-benefit-grid,
      .relfiii-steps {
        grid-template-columns: 1fr;
      }

      .relfiii-purpose-grid {
        gap: 28px;
      }

      .relfiii-invite-shell {
        gap: 20px;
      }

      .relfiii-invite-copy {
        min-height: 390px;
      }
    }

    @media (max-width: 680px) {
      .relfiii-container {
        width: min(calc(100% - 24px), var(--relfiii-container));
      }

      .relfiii-nav {
        min-height: 68px;
      }

      .relfiii-brand-name {
        font-size: 22px;
      }

      .relfiii-menu .relfiii-btn {
        min-height: 43px;
        padding: 10px 14px;
        font-size: 13px;
      }

      .relfiii-hero {
        padding: 112px 0 66px;
      }

      .relfiii-hero-copy h1 {
        font-size: clamp(44px, 14vw, 64px);
      }

      .relfiii-hero-actions {
        display: grid;
      }

      .relfiii-hero-actions .relfiii-btn {
        width: 100%;
      }

      .relfiii-visual {
        min-height: 450px;
      }

      .relfiii-orbit {
        width: 410px;
        height: 410px;
      }

      .relfiii-center-card {
        width: 82%;
        padding: 23px;
      }

      .relfiii-center-card h3 {
        font-size: 25px;
      }

      .relfiii-floating-card {
        min-width: 145px;
        padding: 14px;
      }

      .relfiii-floating-card.one {
        top: 18px;
      }

      .relfiii-floating-card.two {
        bottom: 38px;
      }

      .relfiii-floating-card.three {
        display: none;
      }

      .relfiii-benefits,
      .relfiii-how,
      .relfiii-purpose,
      .relfiii-invite {
        padding: 78px 0;
      }

      .relfiii-section-heading {
        margin-bottom: 30px;
      }

      .relfiii-benefit-card,
      .relfiii-step {
        padding: 24px;
      }

      .relfiii-invite-shell {
        padding: 12px;
        border-radius: 24px;
      }

      .relfiii-invite-copy {
        min-height: 360px;
        padding: 30px 24px;
      }

      .relfiii-form-wrap {
        padding: 18px 10px 24px;
      }

      .relfiii-field-grid {
        grid-template-columns: 1fr;
      }

      .relfiii-field.full {
        grid-column: auto;
      }

      .relfiii-footer-row {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .relfiii-lp,
      .relfiii-lp *,
      .relfiii-lp *::before,
      .relfiii-lp *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      [data-reveal] {
        opacity: 1;
        transform: none;
      }
    }


    /* =========================================================
       V2 — identidade oficial, contraste escuro e responsividade
       ========================================================= */
    :root {
      --relfiii-deep: #0B1720;
      --relfiii-deep-2: #102936;
      --relfiii-deep-3: #173B4D;
      --relfiii-light-on-dark: #EAF5FA;
      --relfiii-muted-on-dark: #AAC0CB;
    }

    .relfiii-lp {
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
      background: #F3F7F9;
    }

    .relfiii-lp img,
    .relfiii-lp svg {
      max-width: 100%;
      height: auto;
    }

    .relfiii-header {
      background: rgba(11, 23, 32, .78);
      border-bottom-color: rgba(255, 255, 255, .08);
      backdrop-filter: blur(16px);
    }

    .relfiii-header.is-scrolled {
      background: rgba(11, 23, 32, .95);
      border-color: rgba(172, 220, 243, .15);
      box-shadow: 0 12px 38px rgba(0, 0, 0, .22);
    }

    .relfiii-nav {
      min-height: 88px;
    }

    .relfiii-brand {
      flex: 0 0 auto;
      padding: 5px 11px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    }

    .relfiii-logo-header {
      display: block;
      width: 118px;
      aspect-ratio: 697.133 / 373.660;
      object-fit: contain;
    }

    .relfiii-menu a {
      color: #D9EAF1;
    }

    .relfiii-menu a:hover {
      color: var(--relfiii-blue-2);
    }

    .relfiii-hero {
      min-height: 860px;
      color: #FFFFFF;
      background:
        radial-gradient(circle at 82% 18%, rgba(13, 162, 220, .24), transparent 30%),
        radial-gradient(circle at 12% 72%, rgba(57, 145, 193, .20), transparent 29%),
        linear-gradient(135deg, #08131B 0%, #102936 54%, #0B1720 100%);
    }

    .relfiii-hero::before {
      background-image:
        linear-gradient(rgba(172,220,243,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(172,220,243,.045) 1px, transparent 1px);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 92%);
    }

    .relfiii-hero-copy > p {
      color: var(--relfiii-muted-on-dark);
    }

    .relfiii-hero-copy h1 span {
      color: #69C8ED;
    }

    .relfiii-hero .relfiii-eyebrow {
      border-color: rgba(172,220,243,.24);
      background: rgba(172,220,243,.10);
      color: #C8EAF7;
    }

    .relfiii-hero .relfiii-btn-secondary {
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      color: #FFFFFF;
      box-shadow: none;
      backdrop-filter: blur(10px);
    }

    .relfiii-hero .relfiii-btn-secondary:hover {
      background: rgba(255,255,255,.14);
    }

    .relfiii-hero-note {
      color: #BFD2DB;
    }

    .relfiii-logo-stage {
      min-height: 590px;
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    .relfiii-logo-aura {
      position: absolute;
      inset: 50% auto auto 50%;
      z-index: -1;
      width: min(78vw, 570px);
      aspect-ratio: 1;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(13,162,220,.22), rgba(13,162,220,.055) 48%, transparent 70%);
      filter: blur(2px);
    }

    .relfiii-logo-panel {
      position: relative;
      width: min(100%, 535px);
      min-height: 430px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 42px 44px 34px;
      border: 1px solid rgba(255,255,255,.92);
      border-radius: 34px;
      background:
        radial-gradient(circle at 90% 8%, rgba(172,220,243,.30), transparent 28%),
        linear-gradient(160deg, rgba(255,255,255,.98), rgba(239,247,250,.96));
      box-shadow: 0 34px 100px rgba(0,0,0,.36);
      overflow: hidden;
    }

    .relfiii-logo-panel::after {
      content: "";
      position: absolute;
      inset: auto -80px -140px auto;
      width: 280px;
      aspect-ratio: 1;
      border: 1px solid rgba(57,145,193,.15);
      border-radius: 50%;
      box-shadow: 0 0 0 42px rgba(57,145,193,.035), 0 0 0 84px rgba(57,145,193,.025);
      pointer-events: none;
    }

    .relfiii-logo-kicker {
      position: relative;
      z-index: 1;
      align-self: flex-start;
      margin-bottom: 18px;
      color: #346F8E;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .relfiii-animated-logo {
      position: relative;
      z-index: 1;
      display: block;
      width: min(100%, 460px);
      aspect-ratio: 697.133 / 373.660;
      object-fit: contain;
    }

    .relfiii-logo-panel p {
      position: relative;
      z-index: 1;
      max-width: 390px;
      margin: 18px 0 0;
      color: #536A76;
      font-size: 14px;
      line-height: 1.55;
      text-align: center;
    }

    .relfiii-logo-stage .relfiii-floating-card {
      color: var(--relfiii-ink);
      background: rgba(255,255,255,.95);
      border-color: rgba(255,255,255,.95);
      box-shadow: 0 18px 55px rgba(0,0,0,.28);
    }

    .relfiii-logo-stage .relfiii-floating-card.one {
      top: 30px;
      right: -18px;
    }

    .relfiii-logo-stage .relfiii-floating-card.two {
      left: -22px;
      bottom: 60px;
    }

    .relfiii-logo-stage .relfiii-floating-card.three {
      right: 8px;
      bottom: 18px;
    }

    .relfiii-benefits {
      background: #F4F8FA;
    }

    .relfiii-benefit-card {
      border-color: #D7E7EE;
      background: linear-gradient(180deg, #FFFFFF, #F8FCFD);
    }

    .relfiii-how {
      color: #FFFFFF;
      background:
        radial-gradient(circle at 10% 18%, rgba(13,162,220,.20), transparent 28%),
        linear-gradient(140deg, #0B1720 0%, #102936 100%);
    }

    .relfiii-how .relfiii-section-heading p {
      color: var(--relfiii-muted-on-dark);
    }

    .relfiii-how .relfiii-eyebrow {
      border-color: rgba(172,220,243,.24);
      background: rgba(172,220,243,.10);
      color: #C8EAF7;
    }

    .relfiii-how .relfiii-step {
      border: 1px solid rgba(172,220,243,.13);
      background: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
      box-shadow: 0 22px 60px rgba(0,0,0,.20);
      backdrop-filter: blur(12px);
    }

    .relfiii-how .relfiii-step p {
      color: #B9CBD4;
    }

    .relfiii-purpose {
      background:
        radial-gradient(circle at 82% 20%, rgba(172,220,243,.18), transparent 26%),
        linear-gradient(135deg, #123446 0%, #087EA9 55%, #0B6285 100%);
    }

    .relfiii-invite {
      background: #EDF4F7;
    }

    .relfiii-invite-shell {
      border-color: rgba(172,220,243,.16);
      background: #0D202A;
      box-shadow: 0 30px 90px rgba(11, 23, 32, .24);
    }

    .relfiii-invite-copy {
      background:
        radial-gradient(circle at 82% 16%, rgba(13,162,220,.25), transparent 25%),
        linear-gradient(145deg, #08131B 0%, #173B4D 100%);
    }

    .relfiii-form-wrap {
      border-radius: 26px;
      background: #FFFFFF;
    }

    .relfiii-footer {
      border-top-color: rgba(172,220,243,.12);
      background: #08131B;
    }

    .relfiii-footer-row {
      color: #AFC3CD;
    }

    .relfiii-footer-links a:hover {
      color: var(--relfiii-blue-2);
    }

    /* Tablet horizontal e telas intermediárias */
    @media (max-width: 1100px) {
      .relfiii-hero-grid {
        gap: 42px;
      }

      .relfiii-logo-stage .relfiii-floating-card.one {
        right: 0;
      }

      .relfiii-logo-stage .relfiii-floating-card.two {
        left: 0;
      }
    }

    @media (max-width: 980px) {
      .relfiii-nav {
        min-height: 82px;
      }

      .relfiii-hero {
        padding-top: 132px;
      }

      .relfiii-hero-copy {
        max-width: 760px;
      }

      .relfiii-logo-stage {
        width: min(100%, 650px);
        min-height: 560px;
        margin-inline: auto;
      }

      .relfiii-logo-panel {
        width: min(88%, 535px);
      }
    }

    @media (max-width: 680px) {
      .relfiii-header {
        background: rgba(11, 23, 32, .94);
      }

      .relfiii-nav {
        min-height: 72px;
        gap: 12px;
      }

      .relfiii-brand {
        padding: 3px 8px;
        border-radius: 11px;
      }

      .relfiii-logo-header {
        width: 88px;
      }

      .relfiii-menu {
        gap: 8px;
      }

      .relfiii-menu .relfiii-btn {
        white-space: nowrap;
      }

      .relfiii-hero {
        min-height: auto;
        padding-top: 105px;
      }

      .relfiii-hero-copy h1,
      .relfiii-section-heading h2,
      .relfiii-purpose h2,
      .relfiii-invite-copy h2 {
        overflow-wrap: anywhere;
      }

      .relfiii-logo-stage {
        min-height: 475px;
      }

      .relfiii-logo-aura {
        width: 440px;
      }

      .relfiii-logo-panel {
        width: 100%;
        min-height: 360px;
        padding: 30px 22px 26px;
        border-radius: 25px;
      }

      .relfiii-logo-kicker {
        margin-bottom: 10px;
      }

      .relfiii-animated-logo {
        width: min(100%, 390px);
      }

      .relfiii-logo-panel p {
        margin-top: 10px;
        font-size: 13px;
      }

      .relfiii-logo-stage .relfiii-floating-card {
        min-width: 138px;
        max-width: 155px;
        padding: 12px;
      }

      .relfiii-logo-stage .relfiii-floating-card.one {
        top: 4px;
        right: -4px;
      }

      .relfiii-logo-stage .relfiii-floating-card.two {
        left: -3px;
        bottom: 18px;
      }

      .relfiii-logo-stage .relfiii-floating-card.three {
        display: none;
      }

      .relfiii-invite-shell {
        background: #0D202A;
      }
    }

    @media (max-width: 420px) {
      .relfiii-container {
        width: min(calc(100% - 20px), var(--relfiii-container));
      }

      .relfiii-logo-header {
        width: 76px;
      }

      .relfiii-menu .relfiii-btn {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 12px;
      }

      .relfiii-hero-copy h1 {
        font-size: clamp(39px, 12.5vw, 52px);
      }

      .relfiii-logo-stage {
        min-height: 430px;
      }

      .relfiii-logo-panel {
        min-height: 330px;
        padding-inline: 16px;
      }

      .relfiii-logo-stage .relfiii-floating-card {
        min-width: 124px;
        max-width: 138px;
      }

      .relfiii-logo-stage .relfiii-floating-card small {
        display: none;
      }

      .relfiii-logo-stage .relfiii-floating-card.two {
        bottom: 6px;
      }
    }



    /* =========================================================
       RELFIII V3 — logo transparente e foco profissional
       ========================================================= */

    .relfiii-brand {
      padding: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .relfiii-logo-header {
      width: 96px;
      aspect-ratio: 697.133 / 260.922;
      object-fit: contain;
      filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .18));
    }

    .relfiii-logo-stage {
      min-height: 510px;
    }

    .relfiii-logo-panel {
      width: min(100%, 445px);
      min-height: 310px;
      padding: 28px 26px 22px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    .relfiii-logo-panel::after {
      display: none;
    }

    .relfiii-logo-kicker {
      align-self: center;
      margin-bottom: 18px;
      color: #C8EAF7;
      text-align: center;
    }

    .relfiii-animated-logo {
      width: min(100%, 360px);
      filter: drop-shadow(0 20px 36px rgba(0, 0, 0, .28));
    }

    .relfiii-logo-panel p {
      max-width: 390px;
      margin-top: 14px;
      color: #BFD2DB;
      font-size: 14px;
    }

    .relfiii-logo-stage .relfiii-floating-card {
      min-width: 172px;
      max-width: 190px;
    }

    .relfiii-benefit-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .relfiii-benefit-card {
      padding: 27px;
    }

    @media (max-width: 1100px) {
      .relfiii-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {
      .relfiii-logo-header {
        width: 84px;
      }

      .relfiii-logo-stage {
        min-height: 430px;
      }

      .relfiii-logo-panel {
        min-height: 270px;
        padding: 24px 18px 18px;
      }

      .relfiii-animated-logo {
        width: min(100%, 315px);
      }

      .relfiii-logo-stage .relfiii-floating-card {
        min-width: 132px;
        max-width: 148px;
      }

      .relfiii-benefit-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      .relfiii-logo-stage .relfiii-floating-card {
        display: none;
      }

      .relfiii-logo-stage {
        min-height: 340px;
      }
    }

    @media (max-width: 420px) {
      .relfiii-logo-header {
        width: 76px;
      }

      .relfiii-logo-stage {
        min-height: 395px;
      }

      .relfiii-logo-panel {
        min-height: 245px;
      }

      .relfiii-animated-logo {
        width: min(100%, 278px);
      }
    }



    /* =========================================================
       RELFIII V4 — limpeza visual e largura total
       Mantém a paleta e a identidade da versão anterior.
       ========================================================= */

    /* Rompe a largura limitada do container do Elementor. */
    .relfiii-lp {
      position: relative;
      left: 50%;
      width: 100vw;
      max-width: 100vw;
      margin-left: -50vw;
      overflow-x: clip;
    }

    /* Remove espaços do próprio widget/container quando :has estiver disponível. */
    .elementor-widget-html:has(.relfiii-lp),
    .elementor-widget-html:has(.relfiii-lp) > .elementor-widget-container {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0;
    }

    /* Cabeçalho mais baixo e discreto. */
    .relfiii-nav {
      min-height: 64px;
    }

    .relfiii-logo-header {
      width: 72px;
    }

    .relfiii-menu {
      gap: 24px;
    }

    .relfiii-menu .relfiii-btn {
      min-height: 44px;
      padding: 10px 18px;
    }

    /* Hero mais limpo: sem malha, sem logo grande e sem cards flutuantes. */
    .relfiii-hero {
      min-height: 720px;
      padding-top: 118px;
      padding-bottom: 86px;
    }

    .relfiii-hero::before {
      display: none;
      background-image: none;
    }

    .relfiii-hero-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    .relfiii-hero-copy {
      width: min(100%, 930px);
      max-width: 930px;
    }

    .relfiii-hero-copy h1 {
      max-width: 900px;
      font-size: clamp(48px, 6vw, 76px);
      line-height: 1.01;
    }

    .relfiii-hero-copy > p {
      max-width: 690px;
    }

    .relfiii-logo-stage {
      display: none !important;
    }

    /* Ajustes responsivos. */
    @media (max-width: 980px) {
      .relfiii-nav {
        min-height: 62px;
      }

      .relfiii-logo-header {
        width: 68px;
      }

      .relfiii-hero {
        min-height: auto;
        padding-top: 104px;
        padding-bottom: 74px;
      }

      .relfiii-hero-copy {
        width: 100%;
        max-width: 780px;
      }

      .relfiii-hero-copy h1 {
        max-width: 760px;
        font-size: clamp(46px, 8.5vw, 68px);
      }
    }

    @media (max-width: 680px) {
      .relfiii-nav {
        min-height: 58px;
      }

      .relfiii-logo-header {
        width: 62px;
      }

      .relfiii-menu .relfiii-btn {
        min-height: 40px;
        padding: 8px 13px;
      }

      .relfiii-hero {
        padding-top: 91px;
        padding-bottom: 62px;
      }

      .relfiii-hero-copy h1 {
        max-width: 100%;
        font-size: clamp(40px, 12.5vw, 57px);
        line-height: 1.03;
      }
    }

    @media (max-width: 420px) {
      .relfiii-logo-header {
        width: 58px;
      }

      .relfiii-menu .relfiii-btn {
        padding-inline: 11px;
        font-size: 11px;
      }

      .relfiii-hero {
        padding-top: 84px;
      }
    }



    /* =========================================================
       RELFIII V5 — cards de produto, acesso seletivo e contatos
       ========================================================= */

    .relfiii-hero-grid {
      grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
      gap: clamp(38px, 5vw, 72px);
      align-items: center;
    }

    .relfiii-hero-copy {
      width: 100%;
      max-width: 820px;
    }

    .relfiii-hero-copy h1 {
      max-width: 800px;
      font-size: clamp(48px, 5.35vw, 74px);
    }

    .relfiii-product-preview {
      position: relative;
      width: 100%;
      max-width: 500px;
      justify-self: end;
    }

    .relfiii-product-preview::before {
      content: "";
      position: absolute;
      inset: 14% 8% -8% 18%;
      border-radius: 50%;
      background: rgba(13, 162, 220, .16);
      filter: blur(55px);
      pointer-events: none;
    }

    .relfiii-preview-shell {
      position: relative;
      z-index: 1;
      padding: 18px;
      border: 1px solid rgba(172, 220, 243, .2);
      border-radius: 26px;
      background: rgba(8, 29, 40, .72);
      box-shadow: 0 30px 80px rgba(0, 0, 0, .24);
      backdrop-filter: blur(16px);
    }

    .relfiii-preview-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 5px 5px 17px;
    }

    .relfiii-preview-header > div {
      display: grid;
      gap: 4px;
    }

    .relfiii-preview-label {
      color: #8CCFEA;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .relfiii-preview-header strong {
      color: #fff;
      font-size: 17px;
      letter-spacing: -.02em;
    }

    .relfiii-preview-badge {
      flex: 0 0 auto;
      padding: 7px 9px;
      border: 1px solid rgba(172, 220, 243, .18);
      border-radius: 999px;
      color: #BFDCE8;
      font-size: 9px;
      font-weight: 800;
    }

    .relfiii-dashboard-card {
      border: 1px solid rgba(255, 255, 255, .86);
      border-radius: 18px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
    }

    .relfiii-finance-preview {
      padding: 20px;
      transform: translateX(-12px);
    }

    .relfiii-dashboard-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .relfiii-dashboard-card-top > div {
      display: grid;
      gap: 3px;
    }

    .relfiii-dashboard-card-top span {
      color: #69808C;
      font-size: 11px;
      font-weight: 800;
    }

    .relfiii-dashboard-card-top strong {
      color: #1C1A19;
      font-size: 15px;
      letter-spacing: -.02em;
    }

    .relfiii-trend {
      padding: 6px 9px;
      border-radius: 999px;
      background: rgba(20, 122, 85, .1);
      color: #147A55 !important;
      font-size: 10px !important;
    }

    .relfiii-finance-value {
      margin-top: 20px;
      color: #1C1A19;
      font-size: 30px;
      font-weight: 900;
      letter-spacing: -.045em;
    }

    .relfiii-finance-caption {
      margin-top: 2px;
      color: #758993;
      font-size: 11px;
    }

    .relfiii-chart {
      height: 74px;
      display: flex;
      align-items: flex-end;
      gap: 7px;
      margin-top: 18px;
      padding-top: 8px;
      border-bottom: 1px solid #D9E7ED;
    }

    .relfiii-chart span {
      flex: 1;
      height: var(--bar);
      min-height: 12px;
      border-radius: 5px 5px 1px 1px;
      background: linear-gradient(180deg, #58C0E8 0%, #0DA2DC 100%);
      opacity: .9;
    }

    .relfiii-preview-grid {
      display: grid;
      grid-template-columns: 1.06fr .94fr;
      gap: 12px;
      margin-top: 12px;
    }

    .relfiii-agenda-preview {
      padding: 17px;
      transform: translateY(7px);
    }

    .relfiii-preview-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: 0 0 34px;
      border-radius: 11px;
      background: #DFF2FA;
      color: #278DBB;
      font-size: 12px;
      font-weight: 950;
    }

    .relfiii-agenda-list {
      display: grid;
      gap: 8px;
      margin-top: 14px;
    }

    .relfiii-agenda-list > div {
      display: grid;
      grid-template-columns: 45px 1fr;
      gap: 8px;
      align-items: center;
      padding: 8px 9px;
      border-radius: 10px;
      background: #F2F8FB;
    }

    .relfiii-agenda-list time {
      color: #278DBB;
      font-size: 10px;
      font-weight: 900;
    }

    .relfiii-agenda-list span {
      color: #50646F;
      font-size: 10px;
      font-weight: 750;
    }

    .relfiii-preview-stack {
      display: grid;
      gap: 12px;
    }

    .relfiii-compact-preview {
      min-height: 91px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 14px;
    }

    .relfiii-compact-preview > div:nth-child(2) {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .relfiii-compact-preview strong {
      color: #1C1A19;
      font-size: 12px;
    }

    .relfiii-compact-preview span {
      color: #71858F;
      font-size: 9px;
      line-height: 1.3;
    }

    .relfiii-compact-preview b {
      color: #0DA2DC;
      font-size: 19px;
      letter-spacing: -.04em;
    }

    .relfiii-footer-contact {
      display: flex;
      flex: 1 1 760px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px 18px;
    }

    .relfiii-footer-contact a {
      display: inline-flex;
      align-items: center;
      min-height: 48px;
      gap: 9px;
      color: #D7E8EF;
      font-weight: 750;
      text-decoration: none;
    }

    .relfiii-footer-contact a::before {
      display: none;
    }

    .relfiii-footer-contact a:hover {
      color: #fff;
    }

    @media (max-width: 1080px) {
      .relfiii-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
        gap: 34px;
      }

      .relfiii-product-preview {
        max-width: 440px;
      }

      .relfiii-hero-copy h1 {
        font-size: clamp(46px, 5.7vw, 65px);
      }
    }

    @media (max-width: 900px) {
      .relfiii-hero-grid {
        grid-template-columns: 1fr;
        gap: 46px;
      }

      .relfiii-product-preview {
        width: min(100%, 680px);
        max-width: 680px;
        justify-self: start;
      }

      .relfiii-finance-preview {
        transform: none;
      }

      .relfiii-preview-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 680px) {
      .relfiii-product-preview {
        width: 100%;
      }

      .relfiii-preview-shell {
        padding: 13px;
        border-radius: 22px;
      }

      .relfiii-preview-header {
        align-items: center;
        padding-bottom: 13px;
      }

      .relfiii-preview-badge {
        display: none;
      }

      .relfiii-finance-preview {
        padding: 17px;
      }

      .relfiii-preview-grid {
        grid-template-columns: 1fr;
      }

      .relfiii-agenda-preview {
        transform: none;
      }

      .relfiii-preview-stack {
        grid-template-columns: 1fr 1fr;
      }

      .relfiii-compact-preview {
        min-height: 86px;
        grid-template-columns: 32px minmax(0, 1fr);
      }

      .relfiii-compact-preview b {
        display: none;
      }

      .relfiii-footer-contact {
        display: grid;
        width: 100%;
        justify-content: stretch;
      }

      .relfiii-footer-contact a {
        width: 100%;
      }
    }

    @media (max-width: 430px) {
      .relfiii-preview-stack {
        grid-template-columns: 1fr;
      }

      .relfiii-finance-value {
        font-size: 27px;
      }
    }



    /* =========================================================
       RELFIII V6 — representação inspirada na interface real
       Dados, nomes e avatares são inteiramente fictícios.
       ========================================================= */

    .relfiii-hero-grid {
      grid-template-columns: minmax(0, 1.04fr) minmax(410px, .96fr);
      gap: clamp(42px, 5vw, 76px);
      align-items: center;
    }

    .relfiii-hero-copy {
      width: 100%;
      max-width: 790px;
    }

    .relfiii-hero-copy h1 {
      max-width: 780px;
      font-size: clamp(48px, 5.15vw, 72px);
    }

    .relfiii-app-showcase {
      position: relative;
      width: 100%;
      max-width: 545px;
      min-height: 585px;
      justify-self: end;
    }

    .relfiii-showcase-glow {
      position: absolute;
      inset: 12% 4% 2% 18%;
      border-radius: 50%;
      background: rgba(13, 162, 220, .18);
      filter: blur(62px);
      pointer-events: none;
    }

    .relfiii-device {
      position: relative;
      z-index: 2;
      width: min(100%, 430px);
      margin-left: auto;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .82);
      border-radius: 32px;
      background: #E8F5FC;
      box-shadow:
        0 34px 90px rgba(0, 0, 0, .28),
        inset 0 0 0 5px rgba(255, 255, 255, .42);
      transform: rotate(1.1deg);
    }

    .relfiii-device-topbar {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 15px 18px;
      background: linear-gradient(125deg, #10121D 0%, #173C54 58%, #2D92AE 100%);
      color: #fff;
    }

    .relfiii-device-profile {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .relfiii-device-profile > div {
      display: grid;
      gap: 2px;
    }

    .relfiii-device-profile small {
      color: rgba(255, 255, 255, .68);
      font-size: 9px;
    }

    .relfiii-device-profile strong {
      color: #fff;
      font-size: 12px;
    }

    .relfiii-avatar {
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      flex: 0 0 31px;
      border-radius: 50%;
      background: linear-gradient(145deg, #65C8E9, #278AAF);
      color: #fff;
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .02em;
    }

    .relfiii-avatar-main {
      width: 40px;
      height: 40px;
      flex-basis: 40px;
      border: 2px solid rgba(255, 255, 255, .62);
      background: linear-gradient(145deg, #E9B286, #A45A42);
      font-size: 10px;
    }

    .relfiii-avatar-alt {
      background: linear-gradient(145deg, #806CC1, #51417D);
    }

    .relfiii-avatar-soft {
      background: linear-gradient(145deg, #49B8A8, #247C71);
    }

    .relfiii-device-actions {
      display: flex;
      gap: 7px;
    }

    .relfiii-device-actions span {
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-weight: 900;
    }

    .relfiii-device-tabs {
      display: flex;
      gap: 8px;
      padding: 11px 14px 2px;
      overflow: hidden;
      background: #E8F5FC;
    }

    .relfiii-device-tabs span {
      flex: 0 0 auto;
      padding: 7px 11px;
      border: 1px solid #D2E1E8;
      border-radius: 999px;
      background: #fff;
      color: #647A85;
      font-size: 8px;
      font-weight: 850;
    }

    .relfiii-device-tabs .is-active {
      border-color: #262036;
      background: #262036;
      color: #fff;
    }

    .relfiii-device-content {
      display: grid;
      gap: 10px;
      padding: 12px 14px 14px;
    }

    .relfiii-app-card {
      border: 1px solid #D0DEE5;
      border-radius: 17px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 8px 22px rgba(27, 62, 78, .07);
    }

    .relfiii-app-card-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .relfiii-app-card-heading > div {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .relfiii-app-card-heading strong {
      color: #1C1A19;
      font-size: 11px;
      letter-spacing: -.01em;
    }

    .relfiii-app-card-heading small {
      color: #7B8E97;
      font-size: 7px;
      font-weight: 750;
    }

    .relfiii-app-icon {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: #E2F3FA;
      color: #2A8EB8;
      font-size: 9px;
      font-weight: 950;
    }

    .relfiii-app-agenda {
      padding: 13px;
    }

    .relfiii-app-agenda-items {
      display: grid;
      gap: 6px;
      margin-top: 10px;
    }

    .relfiii-app-agenda-items > div {
      display: grid;
      grid-template-columns: 37px 31px 1fr;
      align-items: center;
      gap: 8px;
      padding: 7px 8px;
      border-radius: 10px;
      background: #F5FAFC;
    }

    .relfiii-app-agenda-items time {
      color: #2A8EB8;
      font-size: 8px;
      font-weight: 900;
    }

    .relfiii-app-agenda-items p,
    .relfiii-client-row p,
    .relfiii-goal-row p {
      min-width: 0;
      display: grid;
      gap: 2px;
      margin: 0;
    }

    .relfiii-app-agenda-items b,
    .relfiii-client-row b,
    .relfiii-goal-row b {
      overflow: hidden;
      color: #304955;
      font-size: 8px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .relfiii-app-agenda-items small,
    .relfiii-client-row small,
    .relfiii-goal-row small {
      color: #80919A;
      font-size: 7px;
    }

    .relfiii-app-finance {
      padding: 13px;
    }

    .relfiii-finance-summary {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
      margin-top: 12px;
    }

    .relfiii-finance-summary > div {
      display: grid;
      gap: 2px;
    }

    .relfiii-finance-summary small {
      color: #7C8E97;
      font-size: 7px;
    }

    .relfiii-finance-summary strong {
      color: #233D49;
      font-size: 18px;
      letter-spacing: -.04em;
    }

    .relfiii-growth {
      padding: 5px 7px;
      border-radius: 999px;
      background: rgba(42, 151, 91, .1);
      color: #24834E;
      font-size: 7px;
      font-weight: 900;
    }

    .relfiii-line-chart {
      width: 100%;
      height: 68px;
      display: block;
      margin-top: 6px;
    }

    .relfiii-finance-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-top: 5px;
    }

    .relfiii-finance-metrics > div {
      display: grid;
      gap: 2px;
      padding: 7px 8px;
      border: 1px solid #E2EBEF;
      border-radius: 9px;
    }

    .relfiii-finance-metrics small {
      color: #809099;
      font-size: 6px;
    }

    .relfiii-finance-metrics strong {
      color: #253D48;
      font-size: 8px;
    }

    .relfiii-app-bottom-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 10px;
    }

    .relfiii-app-goals,
    .relfiii-app-tasks {
      padding: 12px;
    }

    .relfiii-goal-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
    }

    .relfiii-goal-ring {
      --progress: 72;
      position: relative;
      width: 53px;
      height: 53px;
      display: grid;
      place-items: center;
      flex: 0 0 53px;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(#76529A calc(var(--progress) * 1%), #E7E9EB 0);
    }

    .relfiii-goal-ring span {
      color: #5F447C;
      font-size: 9px;
      font-weight: 950;
    }

    .relfiii-app-tasks ul {
      display: grid;
      gap: 6px;
      margin: 10px 0 0;
      padding: 0;
      list-style: none;
    }

    .relfiii-app-tasks li {
      display: flex;
      align-items: center;
      gap: 6px;
      padding-bottom: 5px;
      border-bottom: 1px solid #EDF1F3;
      color: #506570;
      font-size: 7px;
    }

    .relfiii-app-tasks li:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .relfiii-app-tasks i {
      width: 6px;
      height: 6px;
      flex: 0 0 6px;
      border-radius: 50%;
      background: #FF9E17;
    }

    .relfiii-device-nav {
      min-height: 48px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      border-top: 1px solid rgba(61, 88, 100, .12);
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 -8px 18px rgba(22, 53, 68, .07);
    }

    .relfiii-device-nav span {
      display: grid;
      place-items: center;
      gap: 2px;
      color: #53636A;
      font-size: 12px;
      font-weight: 850;
    }

    .relfiii-device-nav small {
      font-size: 6px;
      font-weight: 750;
    }

    .relfiii-device-nav .is-active {
      color: #1B1A19;
    }

    .relfiii-floating-ui {
      position: absolute;
      z-index: 3;
      width: 178px;
      padding: 13px;
      border: 1px solid rgba(255, 255, 255, .86);
      border-radius: 18px;
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 20px 45px rgba(0, 0, 0, .20);
      backdrop-filter: blur(14px);
    }

    .relfiii-calendar-ui {
      top: 65px;
      left: -14px;
      transform: rotate(-3deg);
    }

    .relfiii-clients-ui {
      right: -20px;
      bottom: 52px;
      transform: rotate(2.6deg);
    }

    .relfiii-floating-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .relfiii-floating-heading span {
      color: #7B8D96;
      font-size: 7px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .09em;
    }

    .relfiii-floating-heading strong {
      color: #233D49;
      font-size: 10px;
    }

    .relfiii-mini-calendar {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 5px;
    }

    .relfiii-mini-calendar b {
      color: #8A999F;
      font-size: 6px;
      text-align: center;
    }

    .relfiii-mini-calendar span {
      min-height: 22px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      color: #50636D;
      font-size: 7px;
      font-weight: 800;
    }

    .relfiii-mini-calendar .has-event {
      background: #EAF8F7;
      color: #209D8E;
    }

    .relfiii-mini-calendar .is-today {
      background: #269D91;
      color: #fff;
    }

    .relfiii-client-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 0;
      border-top: 1px solid #EDF1F3;
    }

    .relfiii-client-row:first-of-type {
      border-top: 0;
    }

    .relfiii-visual-disclaimer {
      position: absolute;
      z-index: 4;
      right: 14px;
      bottom: 8px;
      padding: 6px 9px;
      border: 1px solid rgba(172, 220, 243, .18);
      border-radius: 999px;
      background: rgba(8, 29, 40, .76);
      color: #B9D7E3;
      font-size: 7px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    @media (max-width: 1120px) {
      .relfiii-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(370px, .88fr);
        gap: 35px;
      }

      .relfiii-app-showcase {
        max-width: 490px;
        transform: scale(.94);
        transform-origin: right center;
      }

      .relfiii-hero-copy h1 {
        font-size: clamp(46px, 5.5vw, 65px);
      }
    }

    @media (max-width: 920px) {
      .relfiii-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
      }

      .relfiii-app-showcase {
        width: min(100%, 650px);
        max-width: 650px;
        min-height: 575px;
        justify-self: start;
        transform: none;
      }

      .relfiii-device {
        width: min(100%, 440px);
        margin: 0 auto;
      }

      .relfiii-calendar-ui {
        left: 2%;
      }

      .relfiii-clients-ui {
        right: 2%;
      }
    }

    @media (max-width: 680px) {
      .relfiii-app-showcase {
        min-height: auto;
        padding-bottom: 28px;
      }

      .relfiii-device {
        width: 100%;
        border-radius: 25px;
        transform: none;
      }

      .relfiii-floating-ui {
        display: none;
      }

      .relfiii-visual-disclaimer {
        position: static;
        display: table;
        margin: 10px auto 0;
      }

      .relfiii-device-topbar {
        min-height: 66px;
        padding: 13px 15px;
      }

      .relfiii-device-content {
        padding: 10px 11px 12px;
      }

      .relfiii-app-bottom-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 430px) {
      .relfiii-app-bottom-grid {
        grid-template-columns: 1fr;
      }

      .relfiii-device-tabs span {
        padding-inline: 9px;
      }

      .relfiii-app-agenda-items > div {
        grid-template-columns: 34px 29px 1fr;
      }
    }



    /* =========================================================
       RELFIII V7 — ajustes finais de ícones
       ========================================================= */

    .relfiii-device-nav {
      min-height: 56px;
      padding: 5px 4px 4px;
    }

    .relfiii-device-nav span {
      gap: 4px;
      line-height: 1;
    }

    .relfiii-device-nav svg {
      width: 20px;
      height: 20px;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .relfiii-device-nav small {
      font-size: 7px;
      line-height: 1;
    }

    .relfiii-device-nav .is-active svg {
      width: 21px;
      height: 21px;
      stroke-width: 2.1;
    }

    .relfiii-footer-channel {
      transition: color .2s ease, transform .2s ease;
    }

    .relfiii-footer-channel:hover {
      transform: translateY(-1px);
    }

    .relfiii-footer-channel:focus-visible {
      border-radius: 10px;
      outline: 3px solid rgba(172, 220, 243, .72);
      outline-offset: 3px;
    }

    .relfiii-footer-channel-icon {
      width: 32px;
      height: 32px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 32px;
      border-radius: 50%;
      background: linear-gradient(145deg, #3991C1 0%, #0DA2DC 100%);
      box-shadow: 0 7px 18px rgba(13, 162, 220, .25);
    }

    .relfiii-footer-channel-icon svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: #FFFFFF;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .relfiii-footer-channel-icon .relfiii-footer-icon-dot {
      fill: #FFFFFF;
      stroke: none;
    }

    @media (max-width: 680px) {
      .relfiii-device-nav {
        min-height: 59px;
      }

      .relfiii-device-nav svg {
        width: 22px;
        height: 22px;
      }

      .relfiii-device-nav .is-active svg {
        width: 23px;
        height: 23px;
      }

      .relfiii-device-nav small {
        font-size: 7.5px;
      }
    }


    /* RELFIII V8 — mobile com minicards proporcionais ao desktop */
    @media (max-width: 680px) {
      .relfiii-app-showcase {
        position: relative;
        width: 100%;
        min-height: 690px;
        padding: 0 0 34px;
        overflow: visible;
      }

      .relfiii-device {
        width: 86%;
        max-width: 430px;
        margin: 0 auto;
        border-radius: 25px;
        transform: none;
      }

      .relfiii-floating-ui {
        display: block;
        width: clamp(136px, 38vw, 164px);
        padding: 11px;
        border-radius: 16px;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
      }

      .relfiii-calendar-ui {
        top: 74px;
        left: 0;
        transform: rotate(-2.5deg);
      }

      .relfiii-clients-ui {
        right: 0;
        bottom: 88px;
        transform: rotate(2.2deg);
      }

      .relfiii-floating-heading {
        margin-bottom: 8px;
      }

      .relfiii-floating-heading span {
        font-size: 6.5px;
      }

      .relfiii-floating-heading strong {
        font-size: 9px;
      }

      .relfiii-mini-calendar {
        gap: 4px;
      }

      .relfiii-mini-calendar b {
        font-size: 5.5px;
      }

      .relfiii-mini-calendar span {
        min-height: 20px;
        font-size: 6.5px;
      }

      .relfiii-client-row {
        gap: 7px;
        padding: 6px 0;
      }

      .relfiii-clients-ui .relfiii-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 8px;
      }

      .relfiii-client-row b {
        font-size: 7.5px;
      }

      .relfiii-client-row small {
        font-size: 6.5px;
      }

      .relfiii-visual-disclaimer {
        position: static;
        display: table;
        margin: 12px auto 0;
      }
    }

    @media (max-width: 430px) {
      .relfiii-app-showcase {
        min-height: 650px;
      }

      .relfiii-device {
        width: 88%;
      }

      .relfiii-floating-ui {
        width: 132px;
        padding: 9px;
        border-radius: 14px;
      }

      .relfiii-calendar-ui {
        top: 66px;
        left: -2px;
      }

      .relfiii-clients-ui {
        right: -2px;
        bottom: 78px;
      }

      .relfiii-mini-calendar span {
        min-height: 18px;
      }
    }

    @media (max-width: 360px) {
      .relfiii-app-showcase {
        min-height: 620px;
      }

      .relfiii-device {
        width: 90%;
      }

      .relfiii-floating-ui {
        width: 122px;
      }

      .relfiii-calendar-ui {
        top: 62px;
      }

      .relfiii-clients-ui {
        bottom: 72px;
      }
    }



    /* =========================================================
       RELFIII V9 — correção de rolagem horizontal
       ========================================================= */

    html,
    body {
      max-width: 100%;
      overflow-x: clip;
    }

    .relfiii-lp {
      position: relative;
      left: auto;
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      overflow-x: clip;
    }

    .elementor,
    .elementor-section-wrap,
    .elementor-widget-html,
    .elementor-widget-html > .elementor-widget-container {
      max-width: 100%;
      overflow-x: clip;
    }

    .relfiii-header,
    .relfiii-hero,
    .relfiii-benefits,
    .relfiii-how,
    .relfiii-purpose,
    .relfiii-invite,
    .relfiii-footer {
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
    }

    .relfiii-hero-grid,
    .relfiii-app-showcase {
      min-width: 0;
    }

    .relfiii-hero-hex-background {
      position: absolute;
      inset: 72px 0 auto;
      z-index: 0;
      width: 100%;
      height: clamp(260px, 17.5vw, 300px);
      color: #75C7E7;
      pointer-events: none;
      -webkit-mask-image: radial-gradient(
        ellipse 48% 72% at 22% 72%,
        rgba(0, 0, 0, .18) 0%,
        rgba(0, 0, 0, .34) 48%,
        #000 100%
      );
      mask-image: radial-gradient(
        ellipse 48% 72% at 22% 72%,
        rgba(0, 0, 0, .18) 0%,
        rgba(0, 0, 0, .34) 48%,
        #000 100%
      );
    }

    .relfiii-ambient-cell-outline {
      fill: rgba(13, 162, 220, .012);
      stroke: var(--relfiii-blue-2);
      stroke-width: 1.5;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
      opacity: .10;
    }

    .relfiii-ambient-hex-filled-accent {
      fill: url(#relfiii-ambient-fill);
      stroke: var(--relfiii-blue-3);
      stroke-width: 1.2;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
      opacity: .20;
    }

    .relfiii-ambient-hex-glow {
      fill: rgba(117, 199, 231, .035);
      stroke: var(--relfiii-blue-2);
      stroke-width: 1.6;
      stroke-linejoin: round;
      filter:
        drop-shadow(0 0 3px rgba(172, 220, 243, .34))
        drop-shadow(0 0 9px rgba(13, 162, 220, .20));
      opacity: .28;
    }

    .relfiii-ambient-hex-glow use {
      vector-effect: non-scaling-stroke;
    }

    .relfiii-device {
      min-width: 0;
      max-width: 100%;
    }

    /* Mantém os minicards dentro da área útil em todas as larguras. */
    .relfiii-calendar-ui {
      left: 0;
    }

    .relfiii-clients-ui {
      left: 0;
      right: auto;
    }

    @media (min-width: 681px) {
      .relfiii-clients-ui {
        top: 235px;
        bottom: auto;
      }
    }

    @supports not (overflow: clip) {
      html,
      body,
      .relfiii-lp,
      .elementor,
      .elementor-section-wrap,
      .elementor-widget-html,
      .elementor-widget-html > .elementor-widget-container,
      .relfiii-header,
      .relfiii-hero,
      .relfiii-benefits,
      .relfiii-how,
      .relfiii-purpose,
      .relfiii-invite,
      .relfiii-footer {
        overflow-x: hidden;
      }
    }



    /* =========================================================
       RELFIII V10 — largura total responsiva sem scroll horizontal
       ========================================================= */

    :root {
      --relfiii-viewport-width: 100%;
      --relfiii-content-max: 1680px;
      --relfiii-page-gutter: clamp(18px, 3vw, 54px);
    }

    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
    }

    /*
      O bloco rompe o container estreito do Elementor usando a largura
      útil real do navegador, calculada via JavaScript sem incluir a
      barra de rolagem vertical.
    */
    .relfiii-lp {
      position: relative;
      left: 50%;
      width: var(--relfiii-viewport-width);
      max-width: none;
      margin-left: 0;
      transform: translateX(-50%);
      overflow-x: clip;
    }

    /*
      Até aproximadamente 1680 px o conteúdo aproveita quase toda a tela.
      Em monitores ultrawide, a largura é limitada para preservar leitura.
    */
    .relfiii-container {
      width: min(
        calc(100% - (var(--relfiii-page-gutter) * 2)),
        var(--relfiii-content-max)
      );
      max-width: none;
      margin-inline: auto;
    }

    .relfiii-header,
    .relfiii-hero,
    .relfiii-benefits,
    .relfiii-how,
    .relfiii-purpose,
    .relfiii-invite,
    .relfiii-footer {
      width: 100%;
      max-width: none;
    }

    .relfiii-hero-grid {
      width: 100%;
    }

    @media (min-width: 1500px) and (max-width: 1920px) {
      :root {
        --relfiii-content-max: 1760px;
        --relfiii-page-gutter: clamp(38px, 4vw, 72px);
      }
    }

    @media (min-width: 1921px) {
      :root {
        --relfiii-content-max: 1760px;
        --relfiii-page-gutter: 72px;
      }
    }

    @media (max-width: 980px) {
      :root {
        --relfiii-page-gutter: clamp(16px, 3vw, 28px);
      }
    }

    @media (max-width: 680px) {
      :root {
        --relfiii-page-gutter: 12px;
      }

      .relfiii-lp {
        width: var(--relfiii-viewport-width);
      }
    }

    @supports not (overflow: clip) {
      html,
      body,
      .relfiii-lp {
        overflow-x: hidden;
      }
    }



    /* =========================================================
       RELFIII V11 — respiro interno responsivo
       Mantém fundos em largura total e afasta o conteúdo das bordas.
       ========================================================= */

    :root {
      --relfiii-inner-padding: clamp(32px, 4vw, 72px);
    }

    .relfiii-container {
      width: 100%;
      max-width: var(--relfiii-content-max, 1760px);
      padding-left: var(--relfiii-inner-padding);
      padding-right: var(--relfiii-inner-padding);
      margin-left: auto;
      margin-right: auto;
    }

    /* Um pouco mais de proteção nas áreas visualmente mais densas. */
    .relfiii-hero-grid,
    .relfiii-purpose-grid,
    .relfiii-invite-shell {
      min-width: 0;
    }

    @media (max-width: 1180px) {
      :root {
        --relfiii-inner-padding: clamp(26px, 3.5vw, 48px);
      }
    }

    @media (max-width: 980px) {
      :root {
        --relfiii-inner-padding: clamp(22px, 4vw, 36px);
      }
    }

    @media (max-width: 680px) {
      :root {
        --relfiii-inner-padding: 18px;
      }
    }

    @media (max-width: 390px) {
      :root {
        --relfiii-inner-padding: 14px;
      }
    }



    /* =========================================================
       RELFIII V12 — sequência do logo e área do profissional
       ========================================================= */

    .relfiii-btn-login {
      min-height: 44px;
      padding: 10px 17px;
      border: 1px solid rgba(172, 220, 243, .34);
      background: rgba(255, 255, 255, .06);
      color: #EAF5FA !important;
      box-shadow: none;
    }

    .relfiii-btn-login:hover {
      border-color: rgba(172, 220, 243, .62);
      background: rgba(172, 220, 243, .13);
      color: #FFFFFF !important;
    }

    .relfiii-login-access {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: -8px 0 20px;
      padding: 12px 14px;
      border: 1px solid #D7EAF3;
      border-radius: 13px;
      background: #F0F8FC;
    }

    .relfiii-login-access > span {
      color: #607781;
      font-size: 12px;
      font-weight: 750;
    }

    .relfiii-login-access a {
      color: #087EA9;
      font-size: 12px;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
    }

    .relfiii-login-access a:hover {
      color: #0DA2DC;
    }

    @media (max-width: 680px) {
      .relfiii-menu {
        gap: 7px;
      }

      .relfiii-btn-login {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 12px;
      }

      .relfiii-login-access {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }
    }

    @media (max-width: 420px) {
      .relfiii-btn-login {
        padding-inline: 10px;
        font-size: 11px;
      }

      .relfiii-menu .relfiii-btn-primary {
        padding-inline: 10px;
      }
    }



    /* =========================================================
       RELFIII V13 — login destacado e aviso de privacidade
       ========================================================= */

    .relfiii-btn-hero-login {
      border: 1px solid rgba(105, 200, 237, .48);
      background: rgba(13, 162, 220, .12);
      color: #DDF4FC !important;
      box-shadow: none;
      backdrop-filter: blur(10px);
    }

    .relfiii-btn-hero-login:hover {
      border-color: rgba(105, 200, 237, .82);
      background: rgba(13, 162, 220, .22);
      color: #FFFFFF !important;
    }

    .relfiii-login-access {
      margin: -8px 0 24px;
      padding: 18px;
      border: 1px solid rgba(105, 200, 237, .42);
      border-radius: 18px;
      background:
        radial-gradient(circle at 86% 10%, rgba(13, 162, 220, .22), transparent 32%),
        linear-gradient(135deg, #0B1720 0%, #173B4D 100%);
      box-shadow: 0 16px 38px rgba(11, 23, 32, .17);
    }

    .relfiii-login-access-copy {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .relfiii-login-access-copy > span:last-child {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .relfiii-login-access-copy strong {
      color: #FFFFFF;
      font-size: 14px;
      line-height: 1.25;
    }

    .relfiii-login-access-copy small {
      color: #B8CFDA;
      font-size: 11px;
      line-height: 1.4;
    }

    .relfiii-login-access-icon {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      flex: 0 0 40px;
      border-radius: 13px;
      background: rgba(13, 162, 220, .16);
      color: #69C8ED;
    }

    .relfiii-login-access-icon svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .relfiii-login-access a {
      min-height: 43px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex: 0 0 auto;
      padding: 10px 15px;
      border-radius: 999px;
      background: #0DA2DC;
      color: #FFFFFF !important;
      font-size: 12px;
      font-weight: 900;
      text-decoration: none;
      box-shadow: 0 10px 24px rgba(13, 162, 220, .25);
      transition: transform .2s ease, background .2s ease;
    }

    .relfiii-login-access a:hover {
      transform: translateY(-1px);
      background: #078FC5;
      color: #FFFFFF !important;
    }

    .relfiii-privacy-notice {
      margin: 17px 0 12px;
      border: 1px solid #D6E7EF;
      border-radius: 14px;
      background: #F7FBFD;
      overflow: hidden;
    }

    .relfiii-privacy-notice summary {
      position: relative;
      padding: 13px 42px 13px 15px;
      cursor: pointer;
      color: #294854;
      font-size: 12px;
      font-weight: 850;
      list-style: none;
    }

    .relfiii-privacy-notice summary::-webkit-details-marker {
      display: none;
    }

    .relfiii-privacy-notice summary::after {
      content: "+";
      position: absolute;
      top: 50%;
      right: 15px;
      color: #0DA2DC;
      font-size: 19px;
      font-weight: 800;
      transform: translateY(-50%);
    }

    .relfiii-privacy-notice[open] summary::after {
      content: "−";
    }

    .relfiii-privacy-notice-body {
      display: grid;
      gap: 9px;
      padding: 0 15px 14px;
      border-top: 1px solid #E3EEF3;
    }

    .relfiii-privacy-notice-body p {
      margin: 11px 0 0;
      color: #617680;
      font-size: 11px;
      line-height: 1.55;
    }

    .relfiii-privacy-notice-body p + p {
      margin-top: 0;
    }

    .relfiii-privacy-notice-body a {
      color: #087EA9;
      font-weight: 800;
    }

    .relfiii-consent-highlight {
      margin: 12px 0 18px;
      padding: 13px;
      border: 1px solid rgba(13, 162, 220, .28);
      border-radius: 13px;
      background: rgba(172, 220, 243, .18);
    }

    .relfiii-consent-highlight span {
      color: #4D6570;
    }

    @media (max-width: 760px) {
      .relfiii-login-access {
        align-items: stretch;
        flex-direction: column;
      }

      .relfiii-login-access a {
        width: 100%;
      }
    }

    @media (max-width: 680px) {
      .relfiii-hero-actions {
        grid-template-columns: 1fr;
      }

      .relfiii-login-access {
        gap: 14px;
        padding: 16px;
      }

      .relfiii-login-access-copy {
        align-items: flex-start;
      }
    }



    /* =========================================================
       RELFIII V14 — seção Para quem é a plataforma
       ========================================================= */

    .relfiii-audience {
      position: relative;
      scroll-margin-top: 88px;
      padding: 108px 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 88% 10%, rgba(172, 220, 243, .24), transparent 26%),
        linear-gradient(180deg, #FFFFFF 0%, #F3F8FA 100%);
    }

    .relfiii-audience::before {
      content: "";
      position: absolute;
      width: 360px;
      height: 360px;
      left: -170px;
      bottom: -190px;
      border: 1px solid rgba(57, 145, 193, .12);
      border-radius: 50%;
      box-shadow:
        0 0 0 55px rgba(57, 145, 193, .026),
        0 0 0 110px rgba(57, 145, 193, .018);
      pointer-events: none;
    }

    .relfiii-audience-heading {
      position: relative;
      z-index: 1;
      max-width: 850px;
    }

    .relfiii-profession-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .relfiii-profession-card {
      min-width: 0;
      min-height: 230px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      padding: 27px;
      border: 1px solid #D7E7EE;
      border-radius: 22px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 12px 34px rgba(28, 26, 25, .055);
      transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
    }

    .relfiii-profession-card:hover {
      transform: translateY(-5px);
      border-color: rgba(57, 145, 193, .42);
      box-shadow: 0 20px 46px rgba(28, 26, 25, .09);
    }

    .relfiii-profession-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      flex: 0 0 58px;
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(172, 220, 243, .45), rgba(13, 162, 220, .10));
      color: #167FA9;
    }

    .relfiii-profession-icon svg {
      width: 34px;
      height: 34px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.1;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .relfiii-profession-card h3 {
      margin: 0 0 9px;
      color: #17313F;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -.025em;
    }

    .relfiii-profession-card p {
      margin: 0;
      color: #647983;
      font-size: 14px;
      line-height: 1.58;
    }

    .relfiii-audience-note {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 13px;
      max-width: 760px;
      margin: 25px auto 0;
      padding: 15px 18px;
      border: 1px solid rgba(57, 145, 193, .18);
      border-radius: 17px;
      background: rgba(172, 220, 243, .18);
    }

    .relfiii-audience-note > span {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      flex: 0 0 32px;
      border-radius: 50%;
      background: #0DA2DC;
      color: #FFFFFF;
      font-size: 19px;
      font-weight: 800;
    }

    .relfiii-audience-note p {
      margin: 0;
      color: #46616E;
      font-size: 13px;
      line-height: 1.5;
    }

    @media (max-width: 1180px) {
      .relfiii-profession-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .relfiii-profession-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .relfiii-profession-card {
        min-height: 215px;
      }
    }

    @media (max-width: 680px) {
      .relfiii-audience {
        padding: 78px 0;
      }

      .relfiii-profession-grid {
        grid-template-columns: 1fr;
        gap: 13px;
      }

      .relfiii-profession-card {
        min-height: 0;
        flex-direction: row;
        align-items: flex-start;
        gap: 17px;
        padding: 20px;
        border-radius: 18px;
      }

      .relfiii-profession-icon {
        width: 51px;
        height: 51px;
        flex-basis: 51px;
        border-radius: 15px;
      }

      .relfiii-profession-icon svg {
        width: 30px;
        height: 30px;
      }

      .relfiii-profession-card h3 {
        font-size: 18px;
      }

      .relfiii-profession-card p {
        font-size: 13px;
      }

      .relfiii-audience-note {
        align-items: flex-start;
        margin-top: 18px;
        padding: 14px;
      }
    }



    /* =========================================================
       RELFIII V16 — informativo profissional no hero
       Ilustração vetorial original, sem uso direto do arquivo externo.
       ========================================================= */

    .relfiii-health-banner {
      width: min(100%, 860px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      margin: 0 0 30px;
      padding: 18px 20px;
      border: 1px solid rgba(172, 220, 243, .22);
      border-radius: 22px;
      background:
        radial-gradient(circle at 84% 18%, rgba(13, 162, 220, .18), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
      box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
      backdrop-filter: blur(14px);
    }

    .relfiii-health-banner-copy {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .relfiii-health-banner-copy > span {
      color: #69C8ED;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .relfiii-health-banner-copy strong {
      max-width: 570px;
      color: #FFFFFF;
      font-size: clamp(17px, 1.45vw, 22px);
      line-height: 1.2;
      letter-spacing: -.025em;
    }

    .relfiii-health-banner-copy p {
      max-width: 620px;
      margin: 0;
      color: #AFC7D2;
      font-size: 12px;
      line-height: 1.5;
    }

    .relfiii-health-honeycomb {
      width: 228px;
      display: grid;
      grid-template-columns: repeat(4, 48px);
      grid-auto-rows: 52px;
      justify-content: end;
      gap: 5px 7px;
      flex: 0 0 228px;
    }

    .relfiii-health-role {
      width: 48px;
      height: 52px;
      display: grid;
      place-items: center;
      clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
      border: 1px solid rgba(255, 255, 255, .25);
      background:
        linear-gradient(145deg, rgba(105, 200, 237, .31), rgba(13, 162, 220, .11));
      color: #DDF6FF;
      filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .16));
      transition: transform .2s ease, background .2s ease;
    }

    .relfiii-health-role:nth-child(n + 5) {
      transform: translateX(27px);
    }

    .relfiii-health-role:hover {
      background:
        linear-gradient(145deg, rgba(105, 200, 237, .48), rgba(13, 162, 220, .21));
    }

    .relfiii-health-role:nth-child(n + 5):hover {
      transform: translateX(27px) translateY(-2px);
    }

    .relfiii-health-role:nth-child(-n + 4):hover {
      transform: translateY(-2px);
    }

    .relfiii-health-role svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media (max-width: 1180px) {
      .relfiii-health-banner {
        gap: 18px;
        padding: 17px;
      }

      .relfiii-health-honeycomb {
        width: 205px;
        grid-template-columns: repeat(4, 43px);
        grid-auto-rows: 47px;
        flex-basis: 205px;
      }

      .relfiii-health-role {
        width: 43px;
        height: 47px;
      }

      .relfiii-health-role svg {
        width: 22px;
        height: 22px;
      }

      .relfiii-health-role:nth-child(n + 5) {
        transform: translateX(24px);
      }

      .relfiii-health-role:nth-child(n + 5):hover {
        transform: translateX(24px) translateY(-2px);
      }
    }

    @media (max-width: 920px) {
      .relfiii-health-banner {
        width: min(100%, 760px);
      }
    }

    @media (max-width: 680px) {
      .relfiii-health-banner {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 23px;
        padding: 17px;
        border-radius: 18px;
      }

      .relfiii-health-banner-copy strong {
        font-size: 18px;
      }

      .relfiii-health-banner-copy p {
        font-size: 11px;
      }

      .relfiii-health-honeycomb {
        width: 100%;
        grid-template-columns: repeat(7, minmax(34px, 44px));
        grid-auto-rows: 46px;
        justify-content: center;
        gap: 5px;
        flex-basis: auto;
      }

      .relfiii-health-role {
        width: 42px;
        height: 46px;
        justify-self: center;
      }

      .relfiii-health-role:nth-child(n + 5) {
        transform: none;
      }

      .relfiii-health-role:nth-child(n + 5):hover,
      .relfiii-health-role:nth-child(-n + 4):hover {
        transform: translateY(-2px);
      }
    }

    @media (max-width: 500px) {
      .relfiii-health-honeycomb {
        grid-template-columns: repeat(4, 43px);
        grid-auto-rows: 47px;
      }

      .relfiii-health-role:nth-child(n + 5) {
        transform: translateX(24px);
      }

      .relfiii-health-role:nth-child(n + 5):hover {
        transform: translateX(24px) translateY(-2px);
      }
    }

    @media (max-width: 360px) {
      .relfiii-health-banner {
        padding: 15px;
      }

      .relfiii-health-banner-copy strong {
        font-size: 17px;
      }

      .relfiii-health-honeycomb {
        grid-template-columns: repeat(4, 39px);
        grid-auto-rows: 43px;
      }

      .relfiii-health-role {
        width: 39px;
        height: 43px;
      }

      .relfiii-health-role:nth-child(n + 5) {
        transform: translateX(22px);
      }

      .relfiii-health-role:nth-child(n + 5):hover {
        transform: translateX(22px) translateY(-2px);
      }
    }