/* ============================================================
   AYLAND — Sistema de diseño «Almagro · Atardecer»
   Blanco y negro dominantes. El atardecer es detalle, no fondo.
   Todos los contrastes verificados según WCAG 2.1.
   ============================================================ */

:root{
  /* ---------- fondos: el 95% de la web ---------- */
  --ayl-blanco:      #FFFFFF;   /* fondo principal */
  --ayl-hueso:       #F7F4EF;   /* superficie alterna. Con moderación */

  /* ---------- negros: las secciones ancla ---------- */
  --ayl-tinta:       #121110;   /* 18,9:1 sobre blanco */
  --ayl-tinta-2:     #0A0908;   /* negro profundo */

  /* ---------- atardecer: solo detalle ---------- */
  --ayl-oro:         #A88461;   /* filete, icono, hover, foco · 3,4:1 (UI) */
  --ayl-oro-texto:   #866546;   /* cuando el detalle es texto · 5,3:1 */
  --ayl-oro-claro:   #E1D6CC;   /* detalle sobre negro · 13,2:1 */
  --ayl-oro-medio:   #CFBCAA;   /* etiqueta sobre negro */

  /* ---------- neutros ---------- */
  --ayl-gris:        #6B665F;   /* texto secundario · 5,7:1 */
  --ayl-gris-2:      #9C958C;   /* secundario sobre negro · 6,4:1 */
  --ayl-linea:       #E8E3DA;
  --ayl-linea-osc:   #2A2724;

  /* ---------- tipografía ---------- */
  --ayl-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ayl-texto:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- escala: discreta a propósito ---------- */
  --ayl-h1: clamp(2rem, 1.4rem + 2.4vw, 2.875rem);   /* 32 → 46 px */
  --ayl-h2: clamp(1.6rem, 1.25rem + 1.4vw, 2.0625rem); /* 26 → 33 px */
  --ayl-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.5rem);   /* 21 → 24 px */
  --ayl-h4: 1.1875rem;                                /* 19 px */
  --ayl-base: 1rem;                                   /* 16 px */

  /* ---------- ritmo ---------- */
  --ayl-sp-1: .5rem;  --ayl-sp-2: 1rem;   --ayl-sp-3: 1.5rem;
  --ayl-sp-4: 2rem;   --ayl-sp-5: 3rem;   --ayl-sp-6: 4.5rem;
  --ayl-borde: 0;     /* radio cero en TODA foto de inmueble. Sin excepción. */
}

/* ---------- base ---------- */
body{
  font-family: var(--ayl-texto);
  font-size: var(--ayl-base);
  line-height: 1.6;
  letter-spacing: -.011em;
  color: var(--ayl-tinta);
  background: var(--ayl-blanco);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.ayl-display{
  font-family: var(--ayl-display);
  font-weight: 300;
  letter-spacing: -.018em;
  line-height: 1.1;
}
h1{ font-size: var(--ayl-h1); }
h2{ font-size: var(--ayl-h2); }
h3{ font-size: var(--ayl-h3); }
h4{ font-size: var(--ayl-h4); font-family: var(--ayl-texto); font-weight: 600; letter-spacing: -.011em; }

/* Newsreader por debajo de 28px pierde peso óptico. Ahí, Inter. */
.ayl-display--peq{ font-family: var(--ayl-texto); font-weight: 600; letter-spacing: -.011em; }

em, .ayl-acento{ font-style: italic; color: var(--ayl-oro-texto); }

/* ---------- eyebrow: la etiqueta sobre el titular ---------- */
.ayl-eyebrow{
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--ayl-texto);
  font-size: .6875rem;      /* 11 px */
  font-weight: 600;
  letter-spacing: .167em;   /* ninguna mayúscula por debajo de .08em */
  text-transform: uppercase;
  color: var(--ayl-oro-texto);
}
.ayl-eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--ayl-oro); }

/* ---------- secciones ---------- */
.ayl-sec{ padding: var(--ayl-sp-6) 0; background: var(--ayl-blanco); }
.ayl-sec--hueso{ background: var(--ayl-hueso); border-block: 1px solid var(--ayl-linea); }
.ayl-sec--tinta{ background: var(--ayl-tinta); color: var(--ayl-hueso); }
.ayl-sec--tinta h1,.ayl-sec--tinta h2,.ayl-sec--tinta h3{ color:#fff; }
.ayl-sec--tinta em{ color: var(--ayl-oro-claro); }
.ayl-sec--tinta p{ color: var(--ayl-gris-2); }
.ayl-sec--tinta .ayl-eyebrow{ color: var(--ayl-oro-medio); }
.ayl-sec--tinta .ayl-eyebrow::before{ background: var(--ayl-oro-medio); }

/* ---------- fotografía: radio cero, ratio fijo ---------- */
.ayl-foto,
.wp-block-post-featured-image img,
.ayl-card img{
  border-radius: var(--ayl-borde) !important;
  object-fit: cover;
  display: block;
  width: 100%;
}
.ayl-foto--rejilla{ aspect-ratio: 3 / 2; }
.ayl-foto--hero{ aspect-ratio: 4 / 5; }   /* en pisos con techos altos, la altura es el argumento */
.ayl-foto--ancha{ aspect-ratio: 3 / 2; }
.ayl-foto--vertical{ aspect-ratio: 2 / 3; }
.ayl-foto--cuadrada{ aspect-ratio: 1 / 1; }

/* Ritmo de la ficha, al modo Fantastic Frank */
.ayl-ritmo{ display:grid; gap: var(--ayl-sp-5); }
.ayl-ritmo > .ayl-foto--vertical{ width: 42%; }
.ayl-ritmo > .ayl-foto--vertical:nth-of-type(odd){ margin-inline-start: auto; }
.ayl-ritmo > .ayl-foto--vertical:nth-of-type(even){ margin-inline-end: auto; }
@media (max-width: 780px){ .ayl-ritmo > .ayl-foto--vertical{ width: 100%; } }

/* ---------- tarjeta de inmueble ---------- */
.ayl-card{ background: var(--ayl-blanco); border: 1px solid var(--ayl-linea); }
.ayl-card__zona{
  font-size: .625rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ayl-oro-texto);
}
.ayl-card__nombre{                    /* el nombre manda, no el precio */
  font-family: var(--ayl-display); font-weight: 300;
  font-size: 1.4375rem; line-height: 1.14; margin: .5rem 0 .3rem;
}
.ayl-card__tipologia{ font-size: .78rem; font-style: italic; color: var(--ayl-gris); }
.ayl-card__precio{ font-size: .9rem; font-weight: 600; }
.ayl-card__specs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.ayl-card__spec{ border:1px solid var(--ayl-linea); padding:.3rem .6rem; font-size:.7rem; color: var(--ayl-gris); }
.ayl-card--cerrada img{ filter: grayscale(.55) saturate(.85); }

/* ---------- botones ---------- */
.ayl-btn{
  display:inline-block; font-size:.6875rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  padding: .875rem 1.375rem; border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ayl-btn--primario{ background: var(--ayl-tinta); color: var(--ayl-blanco); }
.ayl-btn--primario:hover{ background: var(--ayl-oro-texto); }
.ayl-btn--secundario{ border-color: var(--ayl-linea); color: var(--ayl-tinta); }
.ayl-btn--secundario:hover{ border-color: var(--ayl-oro); }

/* ---------- enlaces: el oro solo aparece al pasar por encima ---------- */
.ayl-enlace{ color: var(--ayl-tinta); border-bottom: 1px solid var(--ayl-linea); }
.ayl-enlace:hover{ border-bottom-color: var(--ayl-oro); color: var(--ayl-oro-texto); }

/* ---------- foco visible: accesibilidad, y de paso queda bien ---------- */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline: 2px solid var(--ayl-oro);
  outline-offset: 3px;
}

/* ---------- tabla de ficha técnica ---------- */
.ayl-tabla{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 3rem;
  background: var(--ayl-blanco); border:1px solid var(--ayl-linea); padding: .5rem 1.875rem; }
.ayl-tabla__fila{ display:flex; justify-content:space-between; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid var(--ayl-linea); font-size:.85rem; }
.ayl-tabla__fila dt{ color: var(--ayl-gris); }
.ayl-tabla__fila dd{ font-weight:500; text-align:right; }
@media (max-width: 780px){ .ayl-tabla{ grid-template-columns: 1fr; } }

/* ---------- vídeo con fachada ---------- */
.ayl-video{ position:relative; aspect-ratio:16/9; background: var(--ayl-tinta); overflow:hidden; }
.ayl-video img,.ayl-video iframe{ width:100%; height:100%; object-fit:cover; border:0; display:block; }
.ayl-video__play{ all:unset; cursor:pointer; display:block; width:100%; height:100%; position:relative; }
.ayl-video__play span{
  position:absolute; inset:50% auto auto 50%; translate:-50% -50%;
  width:66px; height:66px; border:1px solid rgba(255,255,255,.85); border-radius:50%;
  background: rgba(18,17,16,.35); backdrop-filter: blur(2px);
  transition: background .2s ease, scale .2s ease;
}
.ayl-video__play span::after{
  content:""; position:absolute; inset:50% auto auto 54%; translate:-50% -50%;
  border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff;
}
.ayl-video__play:hover span{ background: rgba(168,132,97,.65); scale: 1.06; }

/* ---------- impresión de dossier ---------- */
@media print{
  .ayl-sec--tinta{ background:#fff !important; color:#000 !important; }
  .ayl-video, .ayl-btn, nav, footer{ display:none !important; }
}

/* ============================================================
   FICHA DE INMUEBLE Y LISTADO
   ============================================================ */

.ayl-miga{ font-size:.78rem; color:var(--ayl-gris); padding:1rem 0;
  border-bottom:1px solid var(--ayl-linea); }
.ayl-miga a{ color:var(--ayl-gris); }
.ayl-miga a:hover{ color:var(--ayl-oro-texto); }
.ayl-miga strong{ color:var(--ayl-tinta); font-weight:500; }
.ayl-miga span{ color:var(--ayl-oro-texto); }

.ayl-inmueble__cab{ padding:var(--ayl-sp-5) 0 var(--ayl-sp-3); }
.ayl-inmueble__cab h1{ margin:.5rem 0 .35rem; }

.ayl-inmueble__cuerpo{ display:grid; grid-template-columns:1.6fr 1fr;
  gap:var(--ayl-sp-5); padding:var(--ayl-sp-5) 0; align-items:start; }
.ayl-inmueble__desc p{ margin-bottom:1rem; max-width:62ch; }

/* Highlights: cinco hechos concretos, no adjetivos */
.ayl-highlights{ list-style:none; margin:0 0 var(--ayl-sp-3);
  padding:0 0 var(--ayl-sp-3); border-bottom:1px solid var(--ayl-linea); }
.ayl-highlights li{ position:relative; padding-left:1.1rem; margin-bottom:.55rem;
  font-size:.95rem; }
.ayl-highlights li::before{ content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; background:var(--ayl-oro); }

.ayl-autoria{ margin-top:var(--ayl-sp-3); padding-top:var(--ayl-sp-2);
  border-top:1px solid var(--ayl-linea); font-size:.88rem; color:var(--ayl-gris); }
.ayl-autoria p{ margin-top:.4rem; }

/* Caja del precio */
.ayl-caja{ border:1px solid var(--ayl-linea); background:var(--ayl-blanco);
  padding:1.6rem; position:sticky; top:1.5rem; }
.ayl-precio-grande{ font-family:var(--ayl-display); font-weight:300;
  font-size:2.25rem; line-height:1; margin:.5rem 0 .3rem; }
.ayl-precio-grande small{ font-family:var(--ayl-texto); font-size:.85rem;
  font-weight:400; color:var(--ayl-gris); }
.ayl-precio-m2{ font-size:.8rem; color:var(--ayl-gris); margin-bottom:1.2rem; }
.ayl-caja .ayl-btn{ width:100%; text-align:center; }

.ayl-cee{ display:inline-flex; align-items:center; gap:.45rem; }
.ayl-cee i{ background:var(--ayl-tinta); color:var(--ayl-blanco);
  width:21px; height:21px; display:inline-flex; align-items:center;
  justify-content:center; font-style:normal; font-size:.72rem; font-weight:700; }

/* Rejilla de tarjetas */
.ayl-rejilla{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ayl-sp-3); }
.ayl-card__foto{ display:block; position:relative; }
.ayl-card__estado{ position:absolute; top:.85rem; left:.85rem;
  background:var(--ayl-blanco); color:var(--ayl-oro-texto);
  font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:.38rem .68rem; }
.ayl-card--cerrada .ayl-card__estado{ background:rgba(18,17,16,.88); color:var(--ayl-oro-claro); }
.ayl-card__cuerpo{ padding:1.3rem; }
.ayl-card__nombre a{ color:inherit; }
.ayl-card__nombre a:hover{ color:var(--ayl-oro-texto); }
.ayl-foto--vacia{ display:block; background:var(--ayl-hueso); }

/* Listado */
.ayl-listado__cab{ max-width:44rem; margin-bottom:var(--ayl-sp-4); }
.ayl-listado__cab h1{ margin:.6rem 0 .8rem; }
.ayl-listado__lead{ color:var(--ayl-gris); }
.ayl-tipos{ display:flex; gap:.55rem; flex-wrap:wrap; margin-bottom:var(--ayl-sp-4); }
.ayl-tipo{ border:1px solid var(--ayl-linea); background:var(--ayl-blanco);
  padding:.55rem .95rem; font-size:.8rem; color:var(--ayl-gris);
  transition:border-color .18s ease, color .18s ease; }
.ayl-tipo:hover{ border-color:var(--ayl-oro); color:var(--ayl-tinta); }
.ayl-tipo--on{ background:var(--ayl-tinta); color:var(--ayl-blanco); border-color:var(--ayl-tinta); font-weight:500; }

@media (max-width:900px){
  .ayl-inmueble__cuerpo{ grid-template-columns:1fr; }
  .ayl-rejilla{ grid-template-columns:1fr; }
  .ayl-caja{ position:static; }
}

/* ============================================================
   PORTADA
   ============================================================ */

.ayl-portada__hero{ display:grid; grid-template-columns:1.04fr .96fr;
  gap:var(--ayl-sp-5); align-items:center; padding:var(--ayl-sp-6) 0 0; }
.ayl-portada__texto h1{ margin:1.2rem 0 1.2rem; }
.ayl-portada__sub{ font-size:1rem; line-height:1.72; color:var(--ayl-gris);
  max-width:30rem; margin-bottom:1.75rem; }
.ayl-portada__sub strong{ color:var(--ayl-tinta); font-weight:600; }
.ayl-portada__acciones{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.ayl-portada__micro{ font-size:.82rem; color:var(--ayl-gris); }

.ayl-portada__foto{ position:relative; margin:0; }
.ayl-portada__foto figcaption{ position:absolute; left:0; bottom:0;
  background:var(--ayl-blanco); padding:1.25rem 1.6rem .35rem; max-width:80%;
  display:flex; flex-direction:column; gap:.25rem; }
.ayl-portada__foto-nombre{ font-family:var(--ayl-display); font-weight:300; font-size:1.2rem; }
.ayl-portada__foto-datos{ font-size:.78rem; color:var(--ayl-gris); }

.ayl-banda{ display:grid; grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--ayl-linea); margin-top:var(--ayl-sp-6); }
.ayl-banda div{ padding:1.75rem 1.25rem; text-align:center;
  border-right:1px solid var(--ayl-linea); }
.ayl-banda div:last-child{ border-right:none; }
.ayl-banda b{ display:block; font-family:var(--ayl-display); font-weight:300;
  font-size:1.875rem; line-height:1; margin-bottom:.55rem; }
.ayl-banda .ayl-eyebrow{ color:var(--ayl-gris); }
.ayl-banda .ayl-eyebrow::before{ display:none; }

.ayl-sec__cab{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:2.25rem; margin-bottom:1.75rem; flex-wrap:wrap; }
.ayl-sec__lead{ font-size:.94rem; line-height:1.72; color:var(--ayl-gris); max-width:24.5rem; }

.ayl-dos-columnas{ display:grid; grid-template-columns:1.02fr .98fr;
  gap:var(--ayl-sp-5); align-items:center; }
.ayl-nota{ font-size:.78rem; line-height:1.68; color:#7C756B;
  border-left:1px solid var(--ayl-linea-osc); padding-left:1rem; margin-top:1.1rem; }

/* Cálculo de la reforma */
.ayl-calculo{ border:1px solid var(--ayl-linea-osc); background:var(--ayl-tinta-2); }
.ayl-calculo__cab{ padding:1.15rem 1.55rem; border-bottom:1px solid var(--ayl-linea-osc);
  font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:#7C756B; margin:0; }
.ayl-calculo__fila{ display:flex; justify-content:space-between; gap:1rem;
  padding:.85rem 1.55rem; border-bottom:1px solid var(--ayl-linea-osc);
  font-size:.87rem; margin:0; }
.ayl-calculo__fila span{ color:var(--ayl-gris-2); }
.ayl-calculo__fila b{ color:#fff; font-weight:600; white-space:nowrap; }
.ayl-calculo__fila b.sube{ color:var(--ayl-oro-claro); }
.ayl-calculo__total{ display:flex; justify-content:space-between; gap:1rem;
  align-items:baseline; padding:1.15rem 1.55rem; margin:0;
  background:var(--ayl-oro-medio); color:#2E2318; }
.ayl-calculo__total span{ font-size:.8rem; font-weight:600; }
.ayl-calculo__total b{ font-family:var(--ayl-display); font-size:1.6rem; font-weight:400; }

/* Los tres niveles */
.ayl-niveles{ display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--ayl-linea); background:var(--ayl-blanco); }
.ayl-nivel{ padding:2.2rem 1.9rem; border-right:1px solid var(--ayl-linea); }
.ayl-nivel:last-child{ border-right:none; }
.ayl-nivel--medio{ background:var(--ayl-hueso); }
.ayl-nivel__etq{ display:inline-block; font-size:.56rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ayl-oro-texto);
  border:1px solid var(--ayl-oro); padding:.25rem .55rem; margin-bottom:.75rem; }
.ayl-nivel__nombre{ font-family:var(--ayl-display); font-weight:300;
  font-size:1.35rem; margin:0 0 .4rem; }
.ayl-nivel__quien{ font-size:.78rem; color:var(--ayl-gris); line-height:1.6;
  min-height:2.6em; margin-bottom:1.1rem; }
.ayl-nivel__precio{ font-size:1.6rem; font-weight:600; letter-spacing:-.03em; margin:0 0 .2rem; }
.ayl-nivel__precio small{ font-size:.8rem; font-weight:400; color:var(--ayl-gris); letter-spacing:0; }
.ayl-nivel__sub{ font-size:.76rem; color:var(--ayl-gris); margin-bottom:1.3rem; }
.ayl-nivel ul{ list-style:none; margin:0; padding:0; font-size:.83rem; line-height:1.55; }
.ayl-nivel li{ padding:.62rem 0 .62rem 1.05rem; border-bottom:1px solid var(--ayl-linea); position:relative; }
.ayl-nivel li:last-child{ border-bottom:none; }
.ayl-nivel li::before{ content:""; position:absolute; left:0; top:1.05em;
  width:4px; height:4px; background:var(--ayl-oro); }

@media (max-width:900px){
  .ayl-portada__hero,.ayl-dos-columnas{ grid-template-columns:1fr; }
  .ayl-banda{ grid-template-columns:repeat(2,1fr); }
  .ayl-niveles{ grid-template-columns:1fr; }
  .ayl-nivel{ border-right:none; border-bottom:1px solid var(--ayl-linea); }
}

/* Los nombres de las casas no llevan subrayado: son titulares, no enlaces de texto */
.ayl-card__nombre a,
.ayl-portada__foto a{ text-decoration:none; border:0; }
.ayl-card__nombre a:hover{ color:var(--ayl-oro-texto); }