/*
 * BFF Gourmet Club — Pré-inscrição
 * Réplica da página Wix: https://muranandrey.wixsite.com/bff-gourmet-club/pre-inscricao
 * Medidas de desktop tiradas do original a 1280px (contentor Wix de 980px).
 * No mobile o Wix desenha a 320px e escala com a largura do ecrã; aqui isso é
 * reproduzido com a unidade --u (1/320 da largura da janela).
 */

:root {
  --gold-strip: #9e6215;
  --brown: #5b3d16;
  --ink: #0e0b07;
  --panel: #17130d;
  --cream: #f5eddc;
  --cream-soft: #dcd2bc;
  --gold: #d4ae5c;
  --muted: #ada28c;
  --muted-2: #8f8571;
  --line: #5a4c33;
  --footer-ink: #16181d;
  --footer-muted: #8b8c8e;
  --error: #df3229;

  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  /* Futura (Wix) → Jost; Avenir Light (Wix) → Nunito Sans 300 */
  --font-futura: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --font-avenir: 'Nunito Sans', 'Avenir', 'Avenir Next', sans-serif;
  --font-open: 'Open Sans', Arial, sans-serif;
  --font-mono: 'Azeret Mono', 'Courier New', monospace;
  --font-script: 'Yellowtail', 'Brush Script MT', cursive;

  --container: 980px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--cream);
  font-family: var(--font-avenir);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, fieldset, legend {
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0;
  min-width: 0;
}

img {
  display: block;
}

.container {
  position: relative;
  width: var(--container);
  max-width: 100%;
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -200%);
  z-index: 100;
  padding: 0 24px;
  line-height: 40px;
  border-radius: 24px;
  background: #fff;
  color: #116dff;
  font: 14px Helvetica, Arial, sans-serif;
  text-decoration: none;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ---------- Cabeçalho ---------- */

.site-header {
  position: relative;
  z-index: 10;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

.header-strip {
  height: 4px;
  background: var(--gold-strip);
}

.header-inner {
  height: 143px;
}

.brand-logo {
  position: absolute;
  top: 41px;
  left: 0;
  width: 152px;
  height: 79px;
  object-fit: cover;
}

.header-nav {
  position: absolute;
  top: 66px;
  right: 5px;
}

.nav-link {
  display: inline-block;
  padding: 0 10px;
  font-family: var(--font-open);
  font-size: 16px;
  line-height: 28px;
  color: var(--brown);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--gold-strip);
}

.menu-toggle,
.mobile-menu {
  display: none;
}

/* ---------- Hero ---------- */

.hero {
  height: 375px;
  background-color: var(--ink);
  /* Foto "Restaurante Parceiro" (retrato 1024x1280): no desktop fica inteira
     à direita, a fundir com o fundo escuro, para o selo e o prato ficarem à vista. */
  background-image:
    linear-gradient(90deg, var(--ink) 0, var(--ink) calc(100% - 300px), rgba(14, 11, 7, 0) calc(100% - 160px)),
    url('assets/hero-parceiro.jpg');
  background-size: 100% 100%, auto 100%;
  background-position: 0 0, 100% 50%;
  background-repeat: no-repeat;
}

.hero-inner {
  height: 100%;
  padding: 91px 20px 0;
}

.hero-title {
  max-width: 800px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 62px;
  line-height: 76px;
  color: var(--cream);
}

.hero-title em {
  font-style: italic;
  color: var(--gold);
}

.hero-subtitle {
  margin-top: 38px;
  font-family: var(--font-futura);
  font-size: 19px;
  line-height: 34.2px;
  color: var(--cream-soft);
}

/* ---------- Secção da pré-inscrição ---------- */

.signup {
  background: var(--ink);
  padding: 0 40px 40px;
}

.signup-panel {
  background: var(--panel);
}

.signup-inner {
  padding: 81px 0 47px;
}

.signup-title {
  margin-left: 27px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 61.6px;
  color: var(--cream);
}

.steps {
  display: grid;
  grid-template-columns: 260px 261px 270px;
  column-gap: 59px;
  margin: 50px 0 0 28px;
}

.step-title {
  min-height: 33.6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 33.6px;
  color: var(--gold);
}

.step-text {
  margin-top: 16px;
  font-family: var(--font-futura);
  font-size: 15px;
  line-height: 27px;
  color: var(--muted);
}

/* ---------- Formulário ---------- */

.bff-form {
  margin: 83px 0 0 24px;
  width: 790px;
  max-width: calc(100% - 48px);
}

.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 250px);
  justify-content: space-between;
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.field-label {
  display: block;
  font-family: var(--font-avenir);
  font-weight: 300;
  font-size: 14px;
  line-height: 14px;
  color: var(--cream);
}

.field-label.is-required::after,
.req {
  content: ' *';
  color: var(--gold);
}

.field-input {
  width: 100%;
  margin-top: 9px;
  height: 37px;
  padding: 3px 3px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-avenir);
  font-weight: 300;
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}

.field-input::placeholder {
  color: var(--muted-2);
  opacity: 1;
}

.field-input:hover,
.field-input:focus {
  border-color: var(--gold);
}

.field-textarea {
  height: 86px;
  padding: 10.5px 10px 3px;
  resize: none;
}

.field-full {
  margin-top: 10px;
}

/* Erros (o Wix só marca a borda e mostra uma mensagem curta) */

/* Campo isca contra bots (fica fora do ecrã) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-error {
  display: block;
  min-height: 0;
  font-family: var(--font-avenir);
  font-size: 12px;
  line-height: 16px;
  color: var(--error);
}

.field-error:empty {
  display: none;
}

.field.has-error .field-input,
.field.has-error .radio-circle,
.field.has-error .checkbox-box {
  border-color: var(--error);
}

/* Botões de opção */

.field-radio {
  margin-top: 24px;
}

.field-radio legend {
  margin-bottom: 4px;
}

.radio-option {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  height: 27px;
  cursor: pointer;
}

.radio-option input,
.checkbox-option input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.radio-circle {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ink);
}

.radio-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--muted-2);
  opacity: 0;
}

.radio-option input:checked + .radio-circle::after {
  opacity: 1;
}

.radio-option:hover .radio-circle,
.radio-option input:focus-visible + .radio-circle {
  border-color: var(--gold);
}

.radio-text {
  margin-left: 11px;
  font-family: var(--font-avenir);
  font-weight: 300;
  font-size: 14px;
  line-height: 14px;
  color: var(--cream);
}

.field-restaurante {
  margin-top: 28px;
  width: 250px;
}

.field-restaurante .field-label {
  max-width: 225px;
}

/* Consentimento + botão */

.form-bottom {
  margin-top: 30px;
}

.field-checkbox {
  width: 240px;
}

.checkbox-option {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--cream);
}

.checkbox-box svg {
  opacity: 0;
}

.checkbox-option input:checked + .checkbox-box svg {
  opacity: 1;
}

.checkbox-option:hover .checkbox-box,
.checkbox-option input:focus-visible + .checkbox-box {
  border-color: var(--gold);
}

.checkbox-text {
  margin-left: 11px;
  width: 210px;
  font-family: var(--font-avenir);
  font-weight: 300;
  font-size: 14px;
  line-height: 14.75px;
  color: var(--cream);
}

.submit-wrap {
  margin: 15px 0 0 auto;
  width: 250px;
}

.submit-btn {
  display: block;
  width: 100%;
  height: 36px;
  border: 1px solid var(--brown);
  border-radius: 0;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-avenir);
  font-weight: 300;
  font-size: 14px;
  line-height: 19.6px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.submit-btn:hover {
  background: var(--brown);
  color: var(--cream);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.form-status {
  margin-top: 8px;
  font-family: var(--font-avenir);
  font-size: 13px;
  line-height: 17px;
  color: var(--cream);
}

.form-status.is-error {
  color: var(--error);
}

.privacy-notice {
  margin: 65px 0 0 24px;
  width: 258px;
  font-family: var(--font-futura);
  font-size: 13px;
  line-height: 18.2px;
  color: var(--muted-2);
}

/* ---------- Rodapé ---------- */

.site-footer {
  position: relative;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

.footer-inner {
  height: 288px;
}

.footer-brand {
  position: absolute;
  top: 75px;
  left: 20px;
}

.footer-title {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 26px;
  color: var(--footer-ink);
}

.footer-copy {
  margin-top: 10px;
  font-family: var(--font-open);
  font-size: 12px;
  line-height: 16.8px;
  color: var(--footer-muted);
}

.footer-contact {
  position: absolute;
  top: 75px;
  left: 676px;
}

.footer-partners {
  position: absolute;
  top: 172px;
  left: 20px;
  font-family: var(--font-script);
  font-size: 22px;
  line-height: 36px;
  color: var(--footer-ink);
}

.footer-social {
  position: absolute;
  top: 218px;
  left: 489px;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social img {
  width: 22px;
  height: 22px;
}

/* ---------- Janela de confirmação (sem alert/confirm) ---------- */

.custom-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(14, 11, 7, 0.72);
}

.custom-modal-backdrop[hidden] {
  display: none;
}

.custom-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 40px 32px 32px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: center;
}

.custom-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.custom-modal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  color: var(--gold);
}

.custom-modal-description {
  margin-top: 14px;
  font-family: var(--font-futura);
  font-size: 15px;
  line-height: 24px;
  color: var(--cream-soft);
}

.custom-modal-action {
  margin-top: 24px;
  min-width: 160px;
  height: 36px;
  border: 1px solid var(--brown);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-avenir);
  font-size: 14px;
  cursor: pointer;
}

/* ---------- Ecrãs entre 768px e 1059px: o contentor encolhe ---------- */

@media (max-width: 1059px) and (min-width: 768px) {
  .container {
    width: calc(100% - 40px);
  }

  .signup .container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    margin-right: 20px;
  }

  .bff-form {
    width: auto;
    max-width: none;
    margin-right: 24px;
  }

  .form-row-3 {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
  }

  .footer-contact {
    left: auto;
    right: 140px;
  }

  .footer-social {
    left: 50%;
  }
}

/* ---------- Mobile: escala proporcional como o Wix (base 320px) ---------- */

@media (max-width: 767px) {
  :root {
    --u: calc(100vw / 320);
  }

  .container {
    width: 100%;
  }

  .header-strip {
    display: none;
  }

  .header-inner {
    height: calc(88 * var(--u));
  }

  .brand-logo {
    top: calc(18 * var(--u));
    left: calc(20 * var(--u));
    width: calc(110 * var(--u));
    height: calc(57 * var(--u));
  }

  .header-nav {
    display: none;
  }

  .menu-toggle {
    position: absolute;
    top: calc(19 * var(--u));
    right: calc(20 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(7 * var(--u));
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    height: 2px;
    background: #16181d;
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu-close {
    position: absolute;
    top: calc(14 * var(--u));
    right: calc(16 * var(--u));
    border: 0;
    background: none;
    font-size: calc(36 * var(--u));
    line-height: 1;
    color: #16181d;
    cursor: pointer;
  }

  .mobile-menu-link {
    font-family: var(--font-open);
    font-size: calc(18 * var(--u));
    color: var(--brown);
    text-decoration: none;
  }

  .hero {
    height: auto;
    min-height: calc(383 * var(--u));
    background-image:
      linear-gradient(180deg, rgba(14, 11, 7, 0.35) 0%, rgba(14, 11, 7, 0.7) 40%, rgba(14, 11, 7, 0.85) 100%),
      url('assets/hero-parceiro.jpg');
    background-size: cover;
    background-position: 50% 0;
  }

  /* Texto mais abaixo para o selo "Restaurante Parceiro" da foto ficar à vista. */
  .hero-inner {
    padding: calc(118 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));
  }

  .hero-title {
    max-width: none;
    font-size: calc(32 * var(--u));
    line-height: calc(39 * var(--u));
  }

  .hero-subtitle {
    margin-top: calc(25 * var(--u));
    font-size: calc(17 * var(--u));
    line-height: calc(30.6 * var(--u));
  }

  .signup {
    padding: 0;
  }

  .signup-inner {
    padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(53 * var(--u));
  }

  .signup-title {
    margin: 0;
    font-size: calc(32 * var(--u));
    line-height: calc(44.8 * var(--u));
  }

  .steps {
    display: block;
    margin: 0;
  }

  .step-title,
  .step:nth-child(3) .step-title {
    min-height: 0;
    max-width: none;
    margin-top: calc(12 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: calc(33.6 * var(--u));
  }

  .step-text {
    max-width: calc(250 * var(--u));
    margin-top: calc(9 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .bff-form {
    width: 100%;
    max-width: none;
    margin: calc(32 * var(--u)) 0 0;
  }

  .form-row-3 {
    display: block;
  }

  .form-row-3 .field + .field {
    margin-top: calc(10 * var(--u));
  }

  .field-label {
    font-size: calc(16 * var(--u));
    line-height: calc(16 * var(--u));
  }

  .field-input {
    margin-top: calc(9 * var(--u));
    height: calc(45 * var(--u));
    padding-left: calc(10 * var(--u));
    font-size: calc(16 * var(--u));
  }

  .field-textarea {
    height: calc(75 * var(--u));
  }

  .field-full {
    margin-top: calc(10 * var(--u));
  }

  .field-radio {
    margin-top: calc(10 * var(--u));
  }

  .field-radio legend {
    margin-bottom: calc(4 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .radio-option {
    height: calc(27 * var(--u));
  }

  .radio-circle,
  .checkbox-box {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
  }

  .radio-text {
    font-size: calc(15 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .field-restaurante {
    width: 100%;
    margin-top: calc(6 * var(--u));
  }

  .field-restaurante .field-label {
    max-width: calc(248 * var(--u));
  }

  .form-bottom {
    margin-top: calc(8 * var(--u));
  }

  .field-checkbox {
    width: 100%;
  }

  .checkbox-text {
    width: calc(228 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(15.75 * var(--u));
  }

  .submit-wrap {
    width: 100%;
    margin-top: calc(9 * var(--u));
  }

  .submit-btn {
    height: calc(42 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .privacy-notice {
    width: calc(239 * var(--u));
    margin: calc(67 * var(--u)) 0 0;
    font-size: calc(15 * var(--u));
    line-height: calc(21 * var(--u));
  }

  .footer-inner {
    height: calc(118 * var(--u));
  }

  .footer-social {
    top: calc(37 * var(--u));
    left: calc(10 * var(--u));
    gap: calc(32 * var(--u));
  }

  .footer-social img {
    width: calc(22 * var(--u));
    height: calc(22 * var(--u));
  }

  .footer-brand {
    position: static;
  }

  .footer-brand .footer-title {
    position: absolute;
    top: calc(37 * var(--u));
    left: calc(125 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: calc(21 * var(--u));
  }

  .footer-copy {
    position: absolute;
    top: calc(85 * var(--u));
    left: calc(10 * var(--u));
    margin: 0;
    font-size: calc(14 * var(--u));
    line-height: calc(19.6 * var(--u));
  }

  .footer-contact,
  .footer-partners {
    display: none;
  }
}