/* Original Mordidela CTA styling, matching mordidela.com.br.
   Keep this after styles.css so every CTA uses the same brand treatment. */
.button.button:not([data-cookie]) {
  --button-arrow-size: 1.95rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.2rem;
  padding: 0.15rem calc(var(--button-arrow-size) + 1.2rem) 0.15rem 1.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  background: #0ba10e;
  box-shadow: 0 14px 32px rgba(11, 161, 14, 0.22);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Replace the previous text arrows with the official arrow, once per CTA. */
.button.button:not([data-cookie]) > span[aria-hidden="true"] {
  display: none;
}

.button.button:not([data-cookie])::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.46rem;
  transform: translateY(-50%);
  width: var(--button-arrow-size);
  height: var(--button-arrow-size);
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 247, 233, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.button.button:not([data-cookie])::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.46rem;
  z-index: 1;
  width: var(--button-arrow-size);
  height: var(--button-arrow-size);
  background: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11.5H17M12.1 5.8L17.8 11.5L12.1 17.2' stroke='%230ba10e' stroke-width='2.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.34rem 1.34rem no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.button.button:not([data-cookie]):hover {
  box-shadow: 0 18px 42px rgba(11, 161, 14, 0.28);
  transform: translateY(-1px);
}

.button.button:not([data-cookie]):hover::after { transform: translateY(-50%) scale(1.04); }
.button.button:not([data-cookie]):hover::before { transform: translateY(-50%) translateX(0.18rem); }

@media (max-width: 820px) {
  .button.button:not([data-cookie]) {
    max-width: 100%;
    min-width: 0;
    padding: 0.65rem calc(var(--button-arrow-size) + 0.78rem) 0.65rem 1.05rem;
    gap: 0.65rem;
    white-space: normal;
    text-align: center;
    line-height: 1.12;
    overflow-wrap: break-word;
  }
  .button.button:not([data-cookie])::after {
    position: absolute;
    top: 50%;
    right: 0.42rem;
    transform: translateY(-50%);
  }
  .button.button:not([data-cookie]):hover::after { transform: translateY(-50%) scale(1.04); }
}

@media (max-width: 540px) {
  .nav { gap: 10px; }
  .nav .logo { width: clamp(100px, 28vw, 145px); }
  .nav > .button.button:not([data-cookie]) {
    flex-shrink: 0;
    font-size: 0.875rem;
    min-height: 3rem;
    --button-arrow-size: 1.8rem;
    padding-left: 1.05rem;
    white-space: nowrap;
  }
  .mobile-cta .button.button:not([data-cookie]) { font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button.button:not([data-cookie]),
  .button.button:not([data-cookie])::before,
  .button.button:not([data-cookie])::after { transition: none; }
}

.hero .button.whatsapp-button:not([data-cookie])::before {
  background-image: url("assets/whatsapp.svg?v=3");
  background-size: 1.45rem 1.45rem;
}
.hero .button.whatsapp-button:not([data-cookie]):hover::before {
  transform: translateY(-50%);
}

/* Shared button color, including secondary actions and hover states. */
.button.button,.button.button:hover,.back-button,.back-button:hover{background:#0ba10e;color:#fff;border-color:#0ba10e}