:root {
  --bg: #f7f4ef;
  --text: #4a4542;
  --muted: #8a8580;
  --copper: #a8733f;
  --line: #8a8580;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 16px;
  animation: fade-in 1.2s ease-out both;
}

.logo {
  width: min(260px, 60vw);
  height: auto;
  margin-bottom: 40px;
}

.logo circle { stroke: var(--line); }
.logo text { fill: var(--copper); }

.tagline {
  /* Woord onder woord: elk Spaans/Nederlands woordpaar is exact even breed.
     Het langste woord van elk paar houdt de standaard letterafstand (--ls);
     het kortste krijgt meer, berekend op de letterbreedtes van Montserrat Light. */
  --ls: 0.35em;
  color: var(--copper);
  /* Een regel is 37,5 em breed (letters + letterafstand + puntjes). De lettergrootte
     wordt daarom zo gekozen dat de regel altijd binnen het scherm past, met 24px marge per kant. */
  font-size: min(0.8rem, calc((100vw - 48px) / 37.5));
  text-transform: uppercase;
  line-height: 2;
  margin-bottom: 48px;
}

.tagline .row {
  display: block;
  white-space: nowrap;
}

.tagline .w {
  display: inline-block;
  letter-spacing: var(--ls);
  /* geen extra ruimte na de laatste letter, zodat alleen de letters zelf meetellen */
  margin-right: calc(-1 * var(--ls));
}

.tagline .w--inversion { --ls: 0.5822em; }
.tagline .w--promocion { --ls: 0.6594em; }
.tagline .w--vastgoed  { --ls: 0.7847em; }

.tagline .dot {
  display: inline-block;
  width: 2em;
  text-align: center;
}

.tagline .es { opacity: 0.75; }

/* Spaans blok: los onder het Nederlandse, in een lichtere letter (Montserrat ExtraLight). */
.bericht--es { margin-top: 36px; }

.title-es {
  /* Altijd 0,775 x de grootte van de h1, met letterafstand afgestemd zodat
     "Próximamente en línea" exact even breed is als "Binnenkort online". */
  font-size: clamp(0.96875rem, 2.325vw, 1.24rem);
  font-weight: 200;
  font-style: italic;
  letter-spacing: 0.0431em;
  padding-left: 0.0431em; /* compenseert de letterafstand na de laatste letter */
  color: var(--muted);
  margin-bottom: 12px;
}

.bericht--es .lead {
  font-weight: 200;
  font-style: italic;
}

@media (max-width: 600px) {
  /* Smalle schermen: minder letterafstand, zodat de letters groter kunnen blijven (regel = 32 em). */
  .tagline { --ls: 0.2em; font-size: min(0.8rem, calc((100vw - 48px) / 32)); }
  .tagline .w--inversion { --ls: 0.3947em; }
  .tagline .w--promocion { --ls: 0.4532em; }
  .tagline .w--vastgoed  { --ls: 0.5489em; }
  .tagline .dot { width: 1.6em; }
}

.divider {
  width: 48px;
  height: 1px;
  background: var(--copper);
  opacity: 0.6;
  margin: 0 auto 40px;
}

h1 {
  font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  letter-spacing: 0.04em;
  padding-left: 0.04em; /* compenseert de letterafstand na de laatste letter */
  margin-bottom: 16px;
}

.lead {
  white-space: nowrap; /* op één regel; op smalle schermen mag hij afbreken (zie onderaan) */
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

footer {
  text-align: center;
  padding: 24px 16px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
}

@media (max-width: 600px) {
  .lead { white-space: normal; max-width: 340px; }
}


/* ---------- Contact ---------- */

.contact {
  margin-top: 56px;
  width: 100%;
  max-width: 520px;
}

.contact summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

.contact summary::-webkit-details-marker { display: none; }

.contact__vraag {
  color: var(--copper);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding-left: 0.02em; /* compenseert de letterafstand na de laatste letter */
  white-space: nowrap;
}

/* Grootte afgestemd zodat de Spaanse vraag exact even breed is als de Nederlandse. */
.contact__vraag--es {
  color: var(--muted);
  font-size: 0.8676rem;
  font-style: italic;
  font-weight: 300;
}

/* Op smalle schermen passen de vragen niet op één regel: dan gewoon laten afbreken. */
@media (max-width: 560px) {
  .contact__vraag { white-space: normal; max-width: 300px; }
}

.contact__pijl {
  width: 22px;
  height: 22px;
  margin-top: 10px;
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
  animation: zweef 2.4s ease-in-out infinite;
}

.contact details[open] .contact__pijl {
  transform: rotate(180deg);
  animation: none;
}

.contact summary:focus-visible {
  outline: 1px solid var(--copper);
  outline-offset: 6px;
}

@keyframes zweef {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.formulier {
  margin-top: 32px;
  text-align: left;
  display: grid;
  gap: 20px;
  animation: fade-in 0.5s ease-out both;
}

.veld { display: grid; gap: 6px; }

.veld label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}

.veld label [lang="es"] { color: var(--muted); }

.veld small {
  font-size: 1.1em;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.veld input,
.veld textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid #cfc8bf;
  border-radius: 0;
  padding: 8px 0;
  width: 100%;
  transition: border-color 0.2s;
}

.veld textarea { resize: vertical; min-height: 120px; }

.veld input:focus,
.veld textarea:focus {
  outline: none;
  border-bottom-color: var(--copper);
}

.veld [aria-invalid="true"] { border-bottom-color: #b5533c; }

.veld__fout {
  font-size: 0.8rem;
  color: #b5533c;
}

.formulier__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier__privacy {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
}

.formulier__privacy [lang="es"] { font-style: italic; }

.formulier button {
  justify-self: center;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
  background: transparent;
  border: 1px solid var(--copper);
  border-radius: 999px;
  padding: 14px 36px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.formulier button:hover,
.formulier button:focus-visible {
  background: var(--copper);
  color: var(--bg);
  outline: none;
}

.melding {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid;
  font-size: 0.9rem;
  line-height: 1.7;
}

.melding [lang="es"] { font-style: italic; }

.melding--ok   { border-color: var(--copper); color: var(--text); }
.melding--fout { border-color: #b5533c; color: #b5533c; }

@media (prefers-reduced-motion: reduce) {
  .contact__pijl { animation: none; transition: none; }
}