:root {
  --page-bg: #f2f2f2;
  --surface-green: #2ab775;
  --surface-blue: #173348;
  --text-dark: #153448;
  --text-light: #f6f4ef;
  --input-line: rgba(19, 52, 72, 0.9);
  --success: #0f7a4c;
  --error: #b42318;
  --container-max: 1240px;
  --page-gutter: clamp(18px, 3vw, 40px);
  --hero-height: 100vh;
  --fade-duration: 1200ms;
  --fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --overlay-duration: 1000ms;
  --coming-soon-bottom: clamp(30px, 4vw, 52px);
  --radius-card: 8px;
  --radius-button: 999px;
  --shadow-card: 0 28px 70px rgba(12, 27, 39, 0.08);
  --font-regular: 'safiroregular', Arial, Helvetica, sans-serif;
  --font-bold: 'safirobold', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--page-bg); }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-regular);
  background: var(--page-bg);
  color: var(--text-dark);
  overflow-x: hidden;
  transition: background-color calc(var(--fade-duration) + 120ms) var(--fade-ease);
}
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.page { width: 100%; }

.hero {
  position: relative;
  isolation: isolate;
  height: var(--hero-height);
  display: grid;
  place-items: center;
  padding: max(var(--page-gutter), env(safe-area-inset-top)) var(--page-gutter) max(calc(var(--page-gutter) + 120px), calc(var(--page-gutter) + env(safe-area-inset-bottom)));
  background: var(--page-bg);

}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity var(--fade-duration) var(--fade-ease), transform calc(var(--fade-duration) + 180ms) var(--fade-ease);
  will-change: opacity, transform;
}
.hero-bg-layer.is-active { opacity: 1; transform: scale(1); }
.hero-bg-layer.bg-1 { background: #f2f2f2; }
.hero-bg-layer.bg-2 { background: #2ab775; }
.hero-bg-layer.bg-3 { background: #173348; }
.hero-shell {
  width: min(100%, var(--container-max));
  min-height: var(--hero-min-height);
  display: grid;
  place-items: center;
  padding-top: clamp(24px, 5svh, 72px);
  padding-bottom: clamp(118px, 16svh, 172px);
}
.hero-stage {
  position: relative;
  width: 100%;
  min-height: 0;
  height: min(58svh, 620px);
  display: grid;
  place-items: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--overlay-duration) var(--fade-ease);
  will-change: opacity;
  pointer-events: none;
  padding: clamp(20px, 4vw, 48px);
}
.hero-overlay.is-active { opacity: 1; }
.hero-logo-wrap {
  width: min(100%, clamp(320px, 54vw, 920px));
  display: grid;
  place-items: center;
}
.hero-logo {
  width: 100%;
  height: auto;
  max-height: min(44svh, 330px);
  object-fit: contain;
  object-position: center center;
}
.hero-bottom-cta {
  position: absolute;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 28px));
  transform: translateX(-50%);
  z-index: 5;
  width: min(300px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.8svh, 28px);
  color: var(--surface-green);
  text-align: center;
  pointer-events: none;
  transition: color var(--overlay-duration) var(--fade-ease), opacity 220ms ease;
}
body[data-slide="0"] .hero-bottom-cta { color: var(--surface-green); }
body[data-slide="1"] .hero-bottom-cta { color: var(--text-light); }
body[data-slide="2"] .hero-bottom-cta { color: var(--surface-green); }
.coming-soon {
  position: static;
  z-index: 1;
  display: inline-flex;
  width: auto;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-align: center;
  pointer-events: auto;
  transition: opacity 220ms ease;
}
.coming-soon:hover { opacity: 0.78; }
.coming-soon-label {
  display: block;
  width: 100%;
  font-family: var(--font-regular);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.scroll-indicator {
  position: static;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 220ms ease, transform 220ms ease;
}
.scroll-indicator:hover {
  opacity: 0.78;
  transform: translateY(2px);
}
.scroll-indicator span {
  width: 18px;
  height: 18px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}


.contact-section {
  padding: clamp(40px, 6vw, 82px) var(--page-gutter) clamp(28px, 5vw, 44px);
}
.contact-card {
  width: min(100%, 1068px);
  margin: 0 auto;
  background: var(--surface-green);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(34px, 4.5vw, 72px) clamp(22px, 5vw, 74px);
}

/* Quando o fundo activo é verde, o cartão de contacto não cria um segundo tom de verde. */
body[data-slide="1"] .contact-card {
  background: transparent;
  box-shadow: none;
}
.contact-intro {

  margin: 0 auto;
  text-align: center;
}
.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(246, 244, 239, 0.96);
}
.contact-intro h1 {
  margin: 0;
  font-family: var(--font-regular);
  font-weight: normal;
  font-size: 74px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--text-light);
}
.lead {
  margin: 24px auto 0;
  max-width: 760px;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(246, 244, 239, 0.96);
}
.contact-form {
  margin-top: clamp(36px, 5vw, 64px);
}
.form-grid {
  display: grid;
  gap: 24px;
}
.form-grid + .form-grid { margin-top: 16px; }
.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.single-col { grid-template-columns: 1fr; }
.field {
  display: flex;
  flex-direction: column;
}
.field label {
  margin-bottom: 10px;
  font-family: var(--font-bold);
  font-weight: normal;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dark);
}
.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--input-line);
  border-radius: 0;
  background: transparent;
  color: var(--text-dark);
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 1.45;
  padding: 0 0 10px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field input { min-height: 46px; }
.field textarea {
  min-height: 156px;
  resize: vertical;
  padding-top: 4px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(19, 52, 72, 0.58);
  font-family: var(--font-regular);
  font-size: 16px;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--surface-blue);
}
.field-error {
  min-height: 18px;
  margin: 7px 0 0;
  font-family: var(--font-regular);
  font-size: 12px;
  color: var(--error);
}
.field.has-error input,
.field.has-error textarea { border-color: var(--error); }
.form-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(26px, 4vw, 40px);
}
.submit-button {
  position: relative;
  min-width: 150px;
  min-height: 50px;
  border: 0;
  border-radius: var(--radius-button);
  padding: 0 32px;
  background: var(--surface-blue);
  color: var(--text-light);
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 1;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.submit-button:hover { transform: translateY(-1px); }
.submit-button:disabled {
  opacity: 0.72;
  cursor: wait;
}
.button-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(246, 244, 239, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  opacity: 0;
  animation: spin 0.8s linear infinite;
}
.submit-button.is-loading .button-label { opacity: 0; }
.submit-button.is-loading .button-loader { opacity: 1; }
.form-status {
  max-width: 680px;
  margin: 18px auto 0;
  text-align: center;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dark);
}
.form-status.is-success { color: var(--success); }
.form-status.is-error { color: var(--error); }
.site-footer {
  width: min(100%, 1068px);
  margin: 22px auto 0;
  text-align: center;
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.35;
  color: var(--surface-green);
  transition: color var(--overlay-duration) var(--fade-ease);
}

body[data-slide="0"] .site-footer,
body[data-slide="2"] .site-footer {
  color: var(--surface-green);
}

body[data-slide="1"] .site-footer {
  color: var(--text-light);
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  :root { --hero-min-height: 100svh; }
  .hero { min-height: var(--hero-min-height); }
  .hero-shell { min-height: var(--hero-min-height); padding-bottom: clamp(108px, 15svh, 148px); }
  .hero-stage { min-height: 0; height: min(56svh, 600px); }
  .hero-logo-wrap { width: min(100%, 90vw); }
  .hero-logo { max-height: min(42svh, 460px); }
  .contact-card { padding-inline: clamp(20px, 5vw, 40px); }
  .contact-intro h1 { font-size: clamp(46px, 9vw, 68px); }
  .two-cols { grid-template-columns: 1fr; gap: 18px; }
}


@media (max-width: 560px) {
  :root { --coming-soon-bottom: 24px; }
  .hero {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 0;
  }
  .hero-shell { padding-bottom: clamp(104px, 17svh, 136px); }
  .hero-stage { min-height: 0; height: min(54svh, 520px); }
  .hero-logo-wrap { width: min(100%, 92vw); }
  .hero-logo { max-height: min(36svh, 390px); }
  .hero-bottom-cta { bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px)); gap: 16px; }
  .coming-soon-label { font-size: 15px; }
  .contact-section { padding-inline: 16px; }
  .contact-card {
    border-radius: 8px;
    padding: 28px 18px 30px;
  }
  .contact-intro h1 { font-size: clamp(38px, 12vw, 52px); }
  .lead { font-size: 16px; }
  .field input { min-height: 44px; }
  .field textarea { min-height: 138px; }
  .submit-button { width: 100%; max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .hero-bg-layer, .hero-overlay, .hero-bottom-cta, .coming-soon, .submit-button {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .button-loader { animation: none; }
}

/* Success state: substitui o formulário de forma limpa, sem caixa/border extra. */
.form-success-panel {
  max-width: 680px;
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  color: var(--text-dark);
}
.form-success-panel h2 {
  margin: 0 0 10px;
  font-family: var(--font-bold);
  font-weight: normal;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text-dark);
}
.form-success-panel p {
  margin: 0 auto;
  max-width: 580px;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 1.45;
  color: rgba(19, 52, 72, 0.58);
}
.form-success-panel p + p { margin-top: 6px; }
.form-success-panel .success-meta { opacity: 1; }

@media (max-width: 560px) {
  .form-success-panel { margin-top: 34px; }
}

/* ==========================================================================
   Autofill fix — impede Chrome/Safari de pintar os campos preenchidos
   ========================================================================== */

.field input,
.field textarea {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-dark) !important;
  caret-color: var(--text-dark);
}

/*
 * O Chrome/Safari aplica uma cor própria ao autofill.
 * Como os campos estão sobre o cartão verde, forçamos o fundo do autofill
 * a usar exactamente o mesmo verde da superfície para não criar manchas.
 */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active,
.field textarea:-webkit-autofill,
.field textarea:-webkit-autofill:hover,
.field textarea:-webkit-autofill:focus,
.field textarea:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-dark) !important;
  caret-color: var(--text-dark);
  background-color: var(--surface-green) !important;
  background-image: none !important;
  box-shadow: 0 0 0 1000px var(--surface-green) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface-green) inset !important;
  transition: background-color 999999s ease-in-out 0s;
}

/* Mantém o mesmo comportamento quando o cartão fica transparente no slide verde. */
body[data-slide="1"] .field input:-webkit-autofill,
body[data-slide="1"] .field input:-webkit-autofill:hover,
body[data-slide="1"] .field input:-webkit-autofill:focus,
body[data-slide="1"] .field input:-webkit-autofill:active,
body[data-slide="1"] .field textarea:-webkit-autofill,
body[data-slide="1"] .field textarea:-webkit-autofill:hover,
body[data-slide="1"] .field textarea:-webkit-autofill:focus,
body[data-slide="1"] .field textarea:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-dark) !important;
  background-color: var(--surface-green) !important;
  box-shadow: 0 0 0 1000px var(--surface-green) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface-green) inset !important;
}