:root {
      --citrino: #fbf3e3;
      --roxo: #511361;
      --amarelo: #fbdb5c;
      --vermelho: #c0392b;
      --font-body: "Inter", Arial, sans-serif;
      --font-heading: "Poppins", "Inter", sans-serif;
      --space-md: 16px;
      --space-lg: 24px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    body {
      overflow-x: hidden;
    }

    body {
      font-family: var(--font-body);
      background-color: var(--citrino);
      color: var(--roxo);
      line-height: 1.6;
      overflow-x: hidden;
    }

    a,
    a:visited,
    a:hover,
    a:active {
      text-decoration: none;
    }

    a {
      color: inherit;
    }

    h1,
    h2 {
      font-family: var(--font-heading);
      margin-bottom: var(--space-md);
    }

    p {
      margin-bottom: var(--space-md);
      line-height: 1.7;
    }

    /* =========================
     CONTAINERS
  ========================= */

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .container-text {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* =========================
     HERO
  ========================= */

    .hero {
      text-align: center;
      margin-bottom: 24px;
      padding-top: 30px;
    }

    .hero h1 {
      font-size: clamp(1.8rem, 5vw, 2.8rem);
      line-height: 1.15;
      max-width: 950px;
      margin: 0 auto 18px auto;
    }

    .hero .sub {
      font-size: clamp(1rem, 2.5vw, 1.2rem);
      max-width: 850px;
      margin: 0 auto;
    }

    /* =========================
     BANNER
  ========================= */

    .banner-wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .hero-banner-full {
      width: 100%;
      max-width: 1600px;
      height: auto;
      display: block;
    }

    /* =========================
     BOXES
  ========================= */

    .box {
      background: #fff;
      max-width: 1100px;
      width: calc(100% - 24px);
      margin: 0 auto 28px auto;
      padding: 32px;
      border-radius: 18px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    }

    .box h2 {
      font-size: clamp(1.5rem, 4vw, 2rem);
      line-height: 1.2;
      margin-bottom: 22px;
    }

    .box p {
      font-size: 1.05rem;
    }

    .box ul {
      padding-left: 22px;
      margin-top: 18px;
      margin-bottom: var(--space-md);
    }

    .box li {
      margin-bottom: 10px;
    }

    /* =========================
     TEXTOS
  ========================= */

    .sub {
      font-size: 1.1rem;
    }

    .highlight {
      font-weight: 600;
      color: var(--vermelho);
    }

    .center {
      text-align: center;
    }

    /* =========================
     BOTÕES
  ========================= */

    .cta {
      display: inline-block;
      margin-top: var(--space-md);
      padding: 14px 24px;
      background: var(--roxo);
      color: #fff;
      border-radius: 10px;
      font-weight: bold;
      font-size: 1.1rem;
      transition: all 0.3s ease;
    }

    .cta:hover {
      background: var(--amarelo);
      color: var(--roxo);
      transform: translateY(-2px);
    }

    .old {
      text-decoration: line-through;
      opacity: 0.7;
    }

    .new {
      font-size: 2rem;
      font-weight: bold;
      color: var(--vermelho);
    }

    .price-box {
      text-align: center;
      margin-top: var(--space-md);
      margin-bottom: var(--space-md);
      background: #fff8e5;
      padding: 24px;
      border-radius: 14px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .price-box p {
      margin: 6px 0;
    }

    /* =========================
     TESTIMONIAL
  ========================= */

    .testimonial {
      border-left: 4px solid var(--roxo);
      padding: 18px 20px;
      margin-top: 16px;
      background: #fdf9f3;
      border-radius: 10px;
      line-height: 1.7;
      font-style: italic;
    }

    .testimonial strong {
      color: var(--roxo);
      font-weight: 600;
    }

    /* =========================
     WHATSAPP
  ========================= */

    .whatsapp-button {
      position: fixed;
      bottom: 18px;
      right: 18px;

      background: #25d366;
      color: #fff;

      padding: 10px 14px;
      border-radius: 40px;

      display: flex;
      align-items: center;
      gap: 6px;

      font-weight: 600;
      font-size: 13px;

      max-width: 90vw;

      z-index: 9999;

      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

      transition: all 0.25s ease;

      animation: pulseWhats 2s infinite;
    }

    .whatsapp-button:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    }

    .whatsapp-button img {
      width: 22px;
      height: auto;
    }

    @keyframes pulseWhats {
      0% {
        transform: scale(1);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
      }

      50% {
        transform: scale(1.07);
        box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
      }
    }

    /* =========================
     FOOTER
  ========================= */

    .footer {
      background: var(--roxo);
      color: #fff;

      padding: 14px 16px;
      font-size: 14px;

      display: flex;
      flex-direction: column;

      justify-content: flex-start;
      align-items: center;
      text-align: center;

      line-height: 1.35;
    }

    .footer p {
      margin: 2px 0 !important;
      padding: 0;
      line-height: 1.35;
    }

    .footer .titulo-footer {
      font-size: 16px;
      color: var(--amarelo);
      font-weight: 600;
    }

    .footer .descricao-footer {
      font-size: 14px;
      opacity: 0.9;
    }

    .footer .seguranca {
      font-size: 14px;
      font-weight: 600;
      color: var(--amarelo);
      margin-top: 4px;
    }

    .footer .aviso {
      font-size: 12.5px;
      opacity: 0.75;
    }

    .footer .links-footer {
      margin-top: 4px;
      font-size: 12.5px;
    }

    .footer .links-footer a {
      color: #fff;
      opacity: 0.8;
      margin: 0 4px;
      text-decoration: none;
    }

    .footer .links-footer a:hover {
      opacity: 1;
      text-decoration: underline;
    }

    /* =========================
     RESPONSIVO
  ========================= */

    @media (max-width: 768px) {
      .hero {
        padding-top: 20px;
      }

      .hero h1 {
        font-size: 2rem;
      }

      .hero .sub {
        font-size: 1rem;
      }

      .container {
        padding: 24px 14px;
      }

      .container-text {
        padding: 0 14px;
      }

      .price-box {
        padding: 20px 16px;
      }

      .new {
        font-size: 1.8rem;
      }

      .box {
        width: calc(100% - 20px);
        padding: 24px 16px;
        border-radius: 14px;
      }

      .box h2 {
        font-size: 1.5rem;
      }

      .box p,
      .box li {
        font-size: 1rem;
      }

      .cta {
        width: 100%;
        text-align: center;
      }

      .whatsapp-button {
        bottom: 14px;
        right: 14px;
        font-size: 12px;
        padding: 9px 12px;
      }
    }