/* Base look & feel (Tailwind utility classes handle the rest via the CDN). */
:root {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  color: #434343;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   ANIMATIONS (scroll reveal + hover interactions)
   Effect classes are applied automatically by assets/js/main.js, so the
   HTML structure is never touched. Elements only start hidden once JS runs,
   which keeps the page fully visible if JavaScript is disabled.
   ========================================================================== */

/* Shared timing so transform-based effects never conflict with each other. */
.vt-reveal,
.vt-card,
a.vt-lift,
button.vt-lift,
img.vt-zoomable {
  transition: transform .45s ease, opacity .6s ease, box-shadow .25s ease, filter .2s ease;
  will-change: transform, opacity;
}

/* Scroll reveal: fade + slide up. */
.vt-reveal { opacity: 0; transform: translateY(20px); }
.vt-reveal.vt-on { opacity: 1; transform: none; }

/* Button / CTA hover lift. */
a.vt-lift:hover,
button.vt-lift:hover { transform: translateY(-2px); }

/* Card hover: lift + soft shadow. */
.vt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .18);
}

/* Photographic image hover zoom. */
img.vt-zoomable:hover { transform: scale(1.05); }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vt-reveal { opacity: 1 !important; transform: none !important; }
  .vt-reveal,
  .vt-card,
  a.vt-lift,
  button.vt-lift,
  img.vt-zoomable { transition: none !important; }
}

/* ==========================================================================
   FLUENT FORMS — match the theme design (contact section + newsletter)
   Applied only when a Fluent Form is rendered in these areas.
   ========================================================================== */
#proposta .ff-el-group,
footer .ff-el-group { margin-bottom: 1rem; }

#proposta .ff-el-input--label label,
#proposta .frm-fluent-form label { color: #ffffff; font-weight: 500; }

/* Inputs / selects / textareas */
#proposta .ff-el-form-control,
footer .ff-el-form-control {
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  background: #ffffff;
  color: #333333;
  border: none;
  border-radius: .5rem;
  box-shadow: none;
  outline: none;
}
#proposta textarea.ff-el-form-control,
footer textarea.ff-el-form-control {
  min-height: 120px;
  padding: .75rem 1rem;
}
footer .ff-el-form-control {
  border: 1px solid rgba(0, 0, 0, .1);
  text-align: center;
}
#proposta .ff-el-form-control:focus,
footer .ff-el-form-control:focus {
  box-shadow: 0 0 0 2px #00F05B;
}

/* Two-column layout for the contact form on wider screens */
@media (min-width: 640px) {
  #proposta .frm-fluent-form .ff-t-container { gap: 1rem; }
}

/* Submit buttons */
#proposta .ff-btn-submit,
footer .ff-btn-submit {
  width: 100%;
  min-height: 52px;
  background: #00F05B;
  color: #0a3d1c;
  font-weight: 700;
  border: none;
  border-radius: .5rem;
  cursor: pointer;
  transition: filter .15s ease;
}
#proposta .ff-btn-submit:hover,
footer .ff-btn-submit:hover { filter: brightness(.95); }

/* Validation + success messaging stays readable on the green section */
#proposta .ff-el-is-error .text-danger,
#proposta .error { color: #ffe08a; }
#proposta .ff-message-success,
footer .ff-message-success { color: inherit; }