/* ═══════════════════════════════════════════════════════════
   AL Estates — versión 2
   Marca personal inmobiliaria premium, estética editorial.
   Paleta y tipografías fijadas por el cliente.
   ═══════════════════════════════════════════════════════════ */

:root {
  --carbon:  #22211f;   /* color principal */
  --crema:   #f5f1e9;   /* fondo */
  --piedra:  #b7b0a5;   /* secundario: filetes, apoyos */
  --tierra:  #796653;   /* acento */
  --crema-2: #efe9dd;   /* banda alterna */
  --texto:   #4a4843;   /* cuerpo, 7.4:1 sobre crema */

  --titulo: "Cormorant Garamond", Garamond, Georgia, serif;
  --cuerpo: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --t-xs:  .78rem;
  --t-s:   .9rem;
  --t-m:   1.0625rem;
  --t-l:   1.3rem;
  --t-xl:  clamp(1.7rem, 2.6vw, 2.3rem);
  --t-2xl: clamp(2.2rem, 4.2vw, 3.4rem);
  --t-3xl: clamp(2.6rem, 5.6vw, 4.6rem);

  --ancho: 1200px;
  --gut: clamp(1.2rem, 5vw, 4rem);
  --aire: clamp(4.5rem, 9vw, 9rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* La barra pegajosa tapaba el inicio de cada sección al llegar por ancla. */
  scroll-padding-top: 6rem;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--piedra) var(--crema);
}

body {
  margin: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--tierra) 22%, transparent);
  background: var(--crema);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: var(--t-m);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* height:auto es obligatorio: sin él, el atributo height del HTML actúa
   como altura CSS y el aspect-ratio no se aplica nunca. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .22em; }

::selection { background: var(--tierra); color: var(--crema); }
:focus-visible { outline: 2px solid var(--tierra); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 400;
  color: var(--carbon);
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1rem; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--carbon); color: var(--crema);
  padding: .8rem 1.2rem; font-size: var(--t-s);
}
.saltar:focus { left: 0; }

/* ── botones ───────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  font-family: var(--cuerpo);
  font-size: var(--t-s); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  color: var(--carbon);
  padding: .85rem 1.7rem;
  border: 1px solid var(--carbon);
  background: none;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.boton:hover { background: var(--carbon); color: var(--crema); }

.boton--linea { border-color: var(--piedra); }
.boton--linea:hover { background: var(--tierra); border-color: var(--tierra); color: var(--crema); }

.boton--lleno { background: var(--tierra); border-color: var(--tierra); color: var(--crema); }
.boton--lleno:hover { background: var(--carbon); border-color: var(--carbon); }

.boton--sm { min-height: 44px; padding: .55rem 1.1rem; font-size: var(--t-xs); }

/* ── barra superior ────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: .9rem var(--gut);
  padding-top: calc(.9rem + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--crema) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--piedra) 50%, transparent);
}
.barra__marca { margin-right: auto; display: block; }
.barra__marca img { width: 7.5rem; height: auto; }
.barra__nav { display: flex; gap: clamp(1rem, 2.4vw, 2rem); }
.barra__nav a {
  position: relative;
  font-size: var(--t-s); letter-spacing: .04em;
  text-decoration: none; color: var(--texto);
  display: inline-flex; align-items: center;
  min-height: 44px;                /* objetivo cómodo también con ratón */
  transition: color .22s ease;
}
/* el filete crece desde el centro: un gesto, no un subrayado que aparece */
.barra__nav a::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: .35rem;
  height: 1px; background: var(--tierra);
  transition: left .28s cubic-bezier(.22,1,.36,1), right .28s cubic-bezier(.22,1,.36,1);
}
.barra__nav a:hover { color: var(--carbon); }
.barra__nav a:hover::after,
.barra__nav a:focus-visible::after,
.barra__nav a[aria-current="true"]::after { left: 0; right: 0; }
.barra__nav a[aria-current="true"] { color: var(--carbon); }

/* ── portada ───────────────────────────────────────────────── */

.portada {
  /* Un degradado apenas perceptible: la portada respira sin que se
     note un efecto. Cuatro niveles de diferencia, no más. */
  background:
    radial-gradient(120% 90% at 78% 18%,
      color-mix(in srgb, #fffdf7 70%, transparent) 0%, transparent 62%);
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6rem) var(--gut) var(--aire);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.firma-linea {
  font-size: var(--t-xs);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--tierra);
  margin: 0 0 1.5rem;
}
.portada h1 {
  font-size: var(--t-3xl);
  margin-bottom: 1.6rem;
}
/* una sola expresión en el acento, en cursiva: el gesto que comparten
   las dos referencias. Una por página, o deja de significar nada. */
.portada h1 em {
  font-style: italic;
  color: var(--tierra);
}
.entradilla {
  font-size: var(--t-l);
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: 2.4rem;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* la lámina montada sobre el retrato: profundidad y, de paso, Madrid
   entra ya en la primera pantalla */
.portada__lamina {
  position: absolute;
  left: -2.2rem; bottom: -1.8rem;
  width: clamp(9rem, 15vw, 12.5rem);
  margin: 0;
  background: var(--crema);
  padding: .55rem .55rem .7rem;
  box-shadow: 0 1px 2px rgba(34, 33, 31, .06),
              0 18px 36px -22px rgba(34, 33, 31, .45);
}
.portada__lamina img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.portada__lamina figcaption {
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--texto);
  margin-top: .6rem;
}
.portada__lamina figcaption span {
  display: block;
  font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tierra);
  margin-bottom: .2rem;
}

.portada__imagen { position: relative; }
.portada__retrato { margin: 0; }
/* El retrato llega ya en blanco y negro y en 4:5 exacto, así que a plena
   altura `cover` no recorta nada: enseña la fotografía entera. El tope en
   svh solo actúa en pantallas bajas, y entonces recorta por abajo —de ahí
   el 30% vertical: la coronilla empieza en el 13% y nunca se toca. Sin
   filtros: la imagen viene editada. */
.portada__retrato img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 72svh;
  object-fit: cover;
  object-position: 50% 30%;
}

/* ── sobre Alejandra ───────────────────────────────────────── */

.sobre {
  background: var(--crema-2);
  padding: var(--aire) 0;
}
.sobre h2,
.sobre__cuerpo {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.sobre h2 { font-size: var(--t-2xl); margin-bottom: clamp(2rem, 4vw, 3rem); }
.sobre__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: baseline;
}
.sobre__guia {
  font-family: var(--titulo);
  font-size: var(--t-xl);
  font-style: italic;
  color: var(--carbon);
  line-height: 1.3;
  margin: 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--tierra);
  text-wrap: balance;
}
.sobre__texto p:last-child { margin-bottom: 0; }

/* ── servicios ─────────────────────────────────────────────── */

.servicios {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--aire) var(--gut);
}
.servicios h2 { font-size: var(--t-2xl); margin-bottom: clamp(2rem, 4vw, 3rem); }

.servicios__par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.6rem, 4vw, 3.5rem);
  margin-bottom: var(--aire);
}
.servicio { border-top: 1px solid var(--piedra); }
.servicio__a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1.7rem 0 1.5rem;
  transition: border-color .25s ease;
  border-top: 1px solid transparent;
  margin-top: -1px;
}
.servicio__a:hover { border-top-color: var(--tierra); }
.servicio__n {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; color: var(--tierra);
  margin: 0 0 1.1rem;
}
.servicio h3 {
  font-size: var(--t-xl);
  margin-bottom: 1rem;
  transition: color .25s ease;
}
.servicio__a:hover h3 { color: var(--tierra); }
.servicio p { margin: 0; max-width: 40ch; }
/* la invitación aparece al pasar por encima; en táctil está siempre */
.servicio__pie {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tierra);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.servicio__a:hover .servicio__pie,
.servicio__a:focus-visible .servicio__pie { opacity: 1; transform: none; }
@media (hover: none) {
  .servicio__pie { opacity: 1; transform: none; }
}

.proceso__t {
  font-size: var(--t-xl);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.proceso {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.proceso li {
  border-top: 1px solid color-mix(in srgb, var(--piedra) 70%, transparent);
  padding-top: 1.2rem;
}
/* Entrada al scroll. El texto parte VISIBLE: si el observador no llega
   a disparar, la sección se lee igual. Solo se aligera 8px y un punto
   de opacidad, y únicamente si el sistema no pide movimiento reducido. */
@media (prefers-reduced-motion: no-preference) {
  .paso.entra {
    opacity: .001;
    transform: translateY(8px);
  }
  .paso.entra.dentro {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease-out, transform .55s cubic-bezier(.22,1,.36,1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
}
.proceso__n {
  display: block;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; color: var(--piedra);
  margin-bottom: .6rem;
}
.proceso h4 { font-size: var(--t-l); margin-bottom: .5rem; }
.proceso p { font-size: var(--t-s); margin: 0; }

/* ── Madrid ────────────────────────────────────────────────── */

.madrid {
  background: var(--crema-2);
  padding: var(--aire) 0;
}
.madrid__intro, .madrid__nota {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.madrid__intro { margin-bottom: clamp(2rem, 4vw, 3rem); }
.madrid__intro h2 { font-size: var(--t-2xl); margin-bottom: 1.1rem; }
.madrid__intro p { max-width: 52ch; margin: 0; }

.madrid__tira {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  align-items: start;
}
.lamina { margin: 0; }
.lamina img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.lamina--alta img { aspect-ratio: 3 / 4; }
.lamina figcaption {
  font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tierra);
  margin-top: .9rem;
}
.madrid__nota {
  font-size: var(--t-xs);
  color: var(--texto);
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
}

/* ── contacto ──────────────────────────────────────────────── */

.contacto {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--aire) var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contacto h2 { font-size: var(--t-2xl); margin-bottom: 1.3rem; }
.contacto__dicho p { max-width: 36ch; margin: 0; }

/* canales de contacto: se pintan desde JS y solo si tienen valor */
.canales {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  max-width: 24rem;
}
.canales li { border-top: 1px solid color-mix(in srgb, var(--piedra) 70%, transparent); }
.canales a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: .9rem 0 .4rem;
  text-decoration: none;
  color: var(--carbon);
  transition: color .22s ease;
}
.canales a:hover { color: var(--tierra); }
.canales__q {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tierra);
}
.canales__v { font-size: var(--t-m); }

.formulario { display: grid; gap: 1.3rem; }
.campo { display: grid; gap: .5rem; }
.campo > span {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tierra);
}
.campo input, .campo textarea {
  font-family: var(--cuerpo); font-size: var(--t-m);
  color: var(--carbon);
  caret-color: var(--tierra);
  background: #fffdf8;
  border: 1px solid var(--piedra);
  border-radius: 0;
  padding: .9rem 1rem;
  min-height: 52px;
  width: 100%;
}
.campo textarea { resize: vertical; line-height: 1.6; }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--tierra); outline-offset: 1px;
  border-color: var(--tierra);
}
.campo input::placeholder, .campo textarea::placeholder { color: #8d887f; }

.descolgado {
  margin: 0;
  font-size: var(--t-s); line-height: 1.6;
  color: var(--carbon);
  background: #fffdf8;
  border-left: 2px solid var(--tierra);
  padding: .9rem 1rem;
}
.error, .aviso { margin: 0; font-size: var(--t-s); min-height: 1.3em; }
.error { color: #8c2f1d; font-weight: 600; }
.aviso { color: var(--carbon); }
.formulario .boton { justify-self: start; }

/* ── línea directa ─────────────────────────────────────────── */

.linea {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 45;
}
.linea a {
  display: flex; align-items: center; gap: .75rem;
  min-height: 52px;
  padding: .7rem 1.2rem .7rem .9rem;
  background: var(--carbon);
  color: var(--crema);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(34, 33, 31, .14),
              0 16px 32px -18px rgba(34, 33, 31, .6);
  transition: background .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.linea a:hover { background: var(--tierra); transform: translateY(-2px); }
.linea a:focus-visible { outline: 2px solid var(--tierra); outline-offset: 3px; }
.linea__q {
  display: block;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--piedra);
}
.linea__v {
  display: block;
  font-family: var(--titulo);
  font-size: 1.05rem; font-style: italic;
}
.linea svg { width: 22px; height: 22px; flex: none; }

/* ── pie ───────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--piedra);
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gut);
  padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  align-items: end; justify-content: space-between;
}
.pie__marca img { width: 8rem; height: auto; margin-bottom: .9rem; }
.pie__marca p { font-size: var(--t-s); margin: 0; }
.pie__credito {
  font-size: var(--t-xs);
  color: #6f6a62;
  max-width: 34ch;
  margin: 0;
}

/* ── adaptación ────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* En columna, el aire de escritorio solo empuja el retrato fuera de
     la primera pantalla. Ajustado para que el rostro llegue a entrar. */
  .portada { grid-template-columns: 1fr; gap: 2.2rem; }
  .portada .entradilla { margin-bottom: 1.9rem; }
  /* En móvil el retrato conserva su 4:5: para que no se coma la pantalla
     se estrecha la columna, no se aplasta la foto. Un tope de alto la
     dejaba apaisada en pantallas bajas, que es justo lo contrario.
     Y va después del texto: con la foto delante, el titular caía al 77%
     de la pantalla y no se leía sin hacer scroll. Así se lee el titular
     y el rostro sigue entrando en la primera pantalla. */
  .portada__imagen {
    width: min(21rem, 100%, calc(52svh * 4 / 5));
    max-width: none;
  }
  .portada__retrato { max-width: none; }
  /* pegada al borde derecho del retrato, nunca al de la pantalla, y más
     pequeña que en escritorio: aquí tapaba el 40% de la fotografía */
  .portada__lamina { left: auto; right: 0; bottom: -2.2rem; width: 7.5rem; }
  .portada__retrato img { max-height: none; }
  .sobre__cuerpo { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: 1fr; }
  .madrid__tira { grid-template-columns: 1fr 1fr; }
  .lamina--alta { grid-column: 1 / -1; }
  .lamina--alta img { aspect-ratio: 16 / 10; }
  .barra__nav { display: none; }
}

@media (max-width: 560px) {
  /* Los saltos forzados valen en ancho; en estrecho estorban. Llevan
     espacios alrededor, así que al ocultarlos nada se pega. */
  .portada h1 br, .sobre h2 br, .contacto h2 br { display: none; }

  /* En columna única, tres fachadas a 3:4 eran media página de scroll.
     Recortadas a 4:3 siguen leyéndose como arquitectura y ocupan la mitad. */
  .madrid__tira { grid-template-columns: 1fr; }
  .lamina img, .lamina--alta img { aspect-ratio: 4 / 3; }
  .portada__acciones .boton { flex: 1 1 100%; }
  .formulario .boton { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}