/* Inmobiliaria Álvarez · base de la portada «de lujo» (copiada de alvarez-lujo/assets/css/lujo.css, 23-10) */
@font-face { font-family: 'Ibarra Real Nova'; src: url('../fonts/ibarra-real-nova-var.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('../fonts/urbanist-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --noche: #00003C;
  --noche-2: #06064A;
  --magenta: #FE00ED;
  --papel: #F5F2EC;
  --tinta: #0B0B2E;
  --serif: 'Ibarra Real Nova', Georgia, serif;
  --sans: 'Urbanist', system-ui, -apple-system, sans-serif;
  --borde: clamp(16px, 4vw, 60px);
  --max: 1400px;
  --sec: clamp(90px, 11vw, 170px);
  --hoja: clamp(28px, 4vw, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --lento: cubic-bezier(.65, 0, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noche); color: #fff; font: 400 1rem/1.65 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.js [data-entra] { opacity: 0; transform: translateY(30px); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); }
.js [data-entra].ok { opacity: 1; transform: none; }

/* ---------- Piezas ---------- */
.etiqueta { display: flex; align-items: center; gap: 14px; font: 600 .7rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.etiqueta i { width: 34px; height: 2px; background: var(--magenta); }
.t2 { font: 400 clamp(2.6rem, 1rem + 4.4vw, 6.2rem)/1 var(--serif); letter-spacing: -.02em; }
.t2 b { font-weight: 400; color: rgba(255, 255, 255, .55); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 28px; border-radius: 999px; background: var(--noche); color: #fff; font: 600 .82rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: gap .6s var(--ease), background .4s, color .4s; }
.boton:hover { gap: 18px; }
.boton--blanco { background: #fff; color: var(--noche); }
.boton--borde { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); padding: 13px 22px; font-size: .74rem; }
.boton--borde:hover { background: #fff; color: var(--noche); }
.boton--ancho { width: 100%; }