/* Colores y tipografía de brand-tokens.json (Immobiliària Medina Gómez). */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/Poppins-Regular.09acac7457bd.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/Poppins-Medium.20aaac2ef92c.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/Poppins-SemiBold.2c63e05091c7.ttf") format("truetype"); }

:root {
  --noir: #14110E;
  --noir-raised: #1B1710;
  --gold: #C8A54E;
  --gold-lite: #E8D9A8;
  --gold-soft: #9A8A60;
  --cream: #F4EFE4;
  --champagne: #EFE7D6;
  --error: #F2B8A8;
  --gold-metallic: linear-gradient(135deg, #E8D9A8 0%, #C8A54E 48%, #9A8A60 100%);
  --ambient-top: radial-gradient(120% 60% at 50% 4%, rgba(200,165,78,.11) 0%, rgba(200,165,78,0) 52%);
  --radio: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ambient-top), var(--noir);
  color: var(--cream);
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}
h1 { color: var(--champagne); font-weight: 500; font-size: 1.25rem; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }

/* Entrada */
.entrada { max-width: 420px; margin: 0 auto; padding: 12vh 0 32px; }
.marca { text-align: center; margin-bottom: 32px; }
.monograma { display: block; margin: 0 auto 16px; }
.wordmark {
  font-weight: 500; text-transform: uppercase; letter-spacing: .32em;
  font-size: clamp(.95rem, 4vw, 1.2rem); line-height: 1.7; color: var(--champagne);
  margin: 0; padding-left: .32em;
}

.tarjeta {
  background: var(--noir-raised);
  border: 1px solid rgba(200,165,78,.25);
  border-radius: var(--radio);
  padding: 24px 20px;
}
label { display: block; font-size: .9rem; color: var(--gold-soft); margin: 0 0 6px; }
input[type="text"], input[type="password"] {
  display: block; width: 100%; min-height: 54px; margin: 0 0 18px;
  padding: 12px 14px; font: inherit; font-size: 17px; color: var(--cream);
  background: var(--noir); border: 1px solid rgba(200,165,78,.35); border-radius: 10px;
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--gold-lite); outline-offset: 2px; }

.boton-principal {
  display: block; width: 100%; min-height: 56px; margin-top: 6px;
  font: inherit; font-weight: 600; font-size: 1.05rem; letter-spacing: .02em;
  color: var(--noir-raised); background: var(--gold-metallic);
  border: 0; border-radius: 10px; cursor: pointer;
}
.boton-discreto {
  min-height: 44px; padding: 0 14px; font: inherit; font-size: .95rem;
  color: var(--gold); background: transparent;
  border: 1px solid rgba(200,165,78,.4); border-radius: 10px; cursor: pointer;
}
.aviso { color: var(--error); font-weight: 500; }

/* Pantallas de dentro */
.barra {
  display: flex; align-items: center; gap: 12px;
  max-width: 720px; margin: 0 auto; padding: 16px 0;
  border-bottom: 1px solid rgba(200,165,78,.2);
}
.saludo { flex: 1; margin: 0; color: var(--champagne); font-weight: 500; }
.contenido { max-width: 720px; margin: 24px auto; }