/* ==========================================================
   CSS extraido de frentes-de-atuacao.html (antes inline no HTML)
   ========================================================== */

/* ----- bloco 1 ----- */
    @font-face {
      font-family: 'Unbounded';
      src: url('../../Unbounded/Unbounded-VariableFont_wght.ttf') format('truetype');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    h1, h2, h3, h4, h5, h6 { font-family: 'Unbounded', sans-serif; }
    .vl-main-menu nav ul li a,
    .vl-main-menu nav ul li .sub-menu li a { font-size: 15px !important; }
    *, *::before, *::after { box-sizing: border-box; }
    body { background: #080808; }

    /* ── HERO ── */
    .fa-hero {
      position: relative;
      overflow: hidden;
      min-height: 62vh;
      display: flex;
      align-items: flex-end;
      padding: 160px 70px 90px;
      background: #080808;
    }
    .fa-hero::after {
      content: '';
      position: absolute;
      top: -10%; right: -5%;
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(237,120,163,0.22) 0%, transparent 62%);
      pointer-events: none;
      z-index: 0;
    }
    .fa-hero::before {
      content: '';
      position: absolute;
      bottom: -5%; left: -8%;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(90,53,253,0.20) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }
    .fa-hero-content { position: relative; z-index: 1; }
    .fa-hero-eyebrow {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #a8f962;
      display: block;
      margin-bottom: 16px;
      font-family: sans-serif;
    }
    .fa-hero-title {
      font-size: clamp(3.2rem, 8.5vw, 8rem);
      font-weight: 900;
      color: #fff;
      text-transform: uppercase;
      line-height: 0.92;
      letter-spacing: -3px;
      margin: 0;
      font-family: 'Unbounded', sans-serif;
    }
    .fa-hero-title .hl { color: #a8f962; }
    .fa-hero-sub {
      margin-top: 28px;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.45);
      max-width: 520px;
      line-height: 1.75;
      font-family: sans-serif;
    }
    .fa-hero-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 32px;
    }
    .fa-hero-nav a {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.38);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50px;
      padding: 6px 14px;
      text-decoration: none;
      transition: color 0.25s, border-color 0.25s;
      font-family: sans-serif;
    }
    .fa-hero-nav a:hover { color: #a8f962; border-color: rgba(168,249,98,0.4); }

    /* ── FRENTES LIST ── */
    .frentes-list { background: #080808; }

    .frente-item {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      border-top: 1px solid rgba(255,255,255,0.07);
    }

    .frente-left {
      padding: 80px 70px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-right: 1px solid rgba(255,255,255,0.07);
      position: relative;
      overflow: hidden;
      min-height: 360px;
    }

    .frente-num {
      position: absolute;
      bottom: -30px; left: 30px;
      font-size: clamp(7rem, 13vw, 11rem);
      font-weight: 900;
      color: rgba(255,255,255,0.025);
      font-family: 'Unbounded', sans-serif;
      line-height: 1;
      pointer-events: none;
      user-select: none;
      letter-spacing: -4px;
    }

    .frente-index {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-family: sans-serif;
      position: relative;
      z-index: 1;
    }

    .frente-title-wrap {
      position: relative;
      z-index: 1;
    }

    .frente-title {
      font-size: clamp(1.6rem, 3vw, 2.6rem);
      font-weight: 900;
      color: #fff;
      text-transform: uppercase;
      line-height: 1.0;
      letter-spacing: -1px;
      margin: 0 0 20px;
    }

    .frente-accent {
      width: 36px;
      height: 3px;
      border-radius: 2px;
    }

    .frente-right {
      padding: 80px 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 28px;
    }

    .frente-desc {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.58);
      line-height: 1.85;
      margin: 0;
      max-width: 600px;
      font-family: sans-serif;
    }

    .frente-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .frente-tag {
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 50px;
      font-family: sans-serif;
      white-space: nowrap;
    }

    .frente-cta {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 13px 26px;
      border-radius: 50px;
      font-family: 'Unbounded', sans-serif;
      transition: opacity 0.2s, transform 0.2s;
      align-self: flex-start;
    }
    .frente-cta:hover { opacity: 0.82; transform: translateY(-2px); }
    .frente-cta i { font-size: 0.65rem; }

    /* ── COLOR VARIANTS ── */
    .fa-green .frente-index  { color: #a8f962; }
    .fa-green .frente-accent { background: #a8f962; }
    .fa-green .frente-tag    { background: rgba(168,249,98,0.07); color: #a8f962; border: 1px solid rgba(168,249,98,0.2); }
    .fa-green .frente-cta    { background: #a8f962; color: #000; }

    .fa-pink .frente-index   { color: #ed78a3; }
    .fa-pink .frente-accent  { background: #ed78a3; }
    .fa-pink .frente-tag     { background: rgba(237,120,163,0.07); color: #ed78a3; border: 1px solid rgba(237,120,163,0.22); }
    .fa-pink .frente-cta     { background: #ed78a3; color: #fff; }

    .fa-purple .frente-index  { color: #a388fd; }
    .fa-purple .frente-accent { background: linear-gradient(90deg, #ed78a3, #5a35fd); }
    .fa-purple .frente-tag    { background: rgba(90,53,253,0.09); color: #a388fd; border: 1px solid rgba(90,53,253,0.28); }
    .fa-purple .frente-cta    { background: linear-gradient(110deg, #ed78a3, #5a35fd); color: #fff; }

    /* ── BOTTOM CTA ── */
    .frentes-cta-section {
      background: #060606;
      padding: 110px 70px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
      position: relative;
      overflow: hidden;
    }
    .frentes-cta-section::after {
      content: '';
      position: absolute;
      top: -40%; left: 50%;
      transform: translateX(-50%);
      width: 800px; height: 500px;
      background: radial-gradient(ellipse, rgba(90,53,253,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .frentes-cta-eyebrow {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #a8f962;
      font-family: sans-serif;
      position: relative;
      z-index: 1;
    }
    .frentes-cta-title {
      font-size: clamp(2rem, 4.5vw, 4rem);
      font-weight: 900;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: -2px;
      line-height: 1.0;
      margin: 0;
      position: relative;
      z-index: 1;
    }
    .frentes-cta-title span {
      background: linear-gradient(110deg, #ed78a3, #5a35fd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .frentes-cta-sub {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.42);
      max-width: 460px;
      line-height: 1.75;
      font-family: sans-serif;
      margin: 4px 0 0;
      position: relative;
      z-index: 1;
    }
    .frentes-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #a8f962;
      color: #000;
      font-weight: 900;
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 17px 34px;
      border-radius: 50px;
      text-decoration: none;
      font-family: 'Unbounded', sans-serif;
      transition: opacity 0.2s, transform 0.2s;
      margin-top: 12px;
      position: relative;
      z-index: 1;
    }
    .frentes-cta-btn:hover { opacity: 0.85; transform: translateY(-2px); color: #000; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1100px) {
      .frente-left  { padding: 60px 50px; }
      .frente-right { padding: 60px 50px; }
    }
    @media (max-width: 991px) {
      .fa-hero { padding: 130px 40px 70px; }
      .frente-item { grid-template-columns: 1fr; }
      .frente-left  { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 50px 40px; min-height: auto; }
      .frente-right { padding: 40px 40px 60px; }
      .frentes-cta-section { padding: 80px 40px; }
    }
    @media (max-width: 767px) {
      .fa-hero { padding: 120px 24px 60px; }
      .fa-hero-title { letter-spacing: -1.5px; }
      .frente-left  { padding: 44px 24px; }
      .frente-right { padding: 32px 24px 50px; }
      .frente-num   { font-size: 6rem; }
      .frentes-cta-section { padding: 70px 24px; }
    }