/* ============ LOADER — edificios crecientes ============ */
#loader{
  position:fixed;inset:0;z-index:99;
  display:grid;place-items:center;
  background:var(--ground);
  transition:opacity .7s ease,visibility .7s ease;
}
#loader.done{opacity:0;visibility:hidden}
.load-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.skyline{width:min(360px,74vw);height:auto;overflow:visible}

/* Los edificios crecen desde el suelo */
.skyline .bldg-r{transform-origin:50% 100%;transform:scaleY(0);animation:rise .85s cubic-bezier(.19,1,.3,1) forwards}
@keyframes rise{to{transform:scaleY(1)}}

/* Después llega la familia, caminando hacia los edificios */
.skyline .family{transform:translateX(-58px);opacity:0;animation:llegar 1.15s .78s cubic-bezier(.22,1,.32,1) forwards}
@keyframes llegar{to{transform:translateX(0);opacity:1}}
.skyline .paso{animation:andar .5s ease-in-out .78s 3}
@keyframes andar{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
.skyline .ola{animation:oleaje 3.4s ease-in-out infinite}
@keyframes oleaje{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

.load-word{
  font-family:"Archivo",sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  opacity:0;animation:fadein .6s .8s ease forwards;text-align:center;
}
.load-sub{
  font-family:"Fraunces",Georgia,serif;font-size:var(--step-2);font-weight:500;
  font-style:italic;color:var(--accent-deep);margin-top:-8px;
  opacity:0;animation:fadein .7s 1.5s ease forwards;text-align:center;
}
@keyframes fadein{to{opacity:1}}

/* ============ HERO ============ */
.hero{padding:52px 0 26px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% -10% auto;height:340px;
  background:radial-gradient(60% 100% at 50% 0,var(--accent-wash),transparent 70%);
  opacity:.85;pointer-events:none;
}
.eyebrow{
  position:relative;font-size:.68rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px;
}
.hero h1{position:relative;font-size:var(--step-5);line-height:1.02;max-width:16ch}
.hero h1 em{font-style:italic;font-weight:300;color:var(--accent-deep)}
.hero p{
  position:relative;margin:16px 0 0;max-width:52ch;
  font-size:var(--step-1);color:var(--ink-2);
}

/* ============ SEARCH ============ */
.search{
  position:sticky;top:66px;z-index:30;
  margin:30px 0 8px;padding:14px;
  background:rgb(var(--glass)/var(--glass-a));
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 10px 34px rgb(var(--shadow)/var(--shadow-b));
}
.field{display:flex;align-items:center;gap:11px;padding:0 6px 0 12px}
.field svg{flex:none;color:var(--muted)}
.field input{
  flex:1;border:0;background:transparent;color:var(--ink);
  font:500 var(--step-1)/1.5 "Archivo",sans-serif;padding:10px 0;
}
.field input::placeholder{color:var(--muted);font-weight:400}
.field input:focus{outline:0}
.count{
  font-size:var(--step--1);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-right:6px;
}
.filters{
  display:flex;gap:20px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
}
.fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fgroup>span{
  font-size:.63rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.chip{
  border:1px solid var(--line);background:var(--surface);
  border-radius:99px;padding:6px 13px;cursor:pointer;
  font-size:var(--step--1);font-weight:500;color:var(--ink-2);
  transition:all .18s;
}
.chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.chip[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
:root[data-theme="dark"] .chip[aria-pressed="true"],
:root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:#05122E}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .chip[aria-pressed="true"]{color:#fff}
}

/* ============ SHELVES ============ */
.shelf{margin:44px 0 0}
.shelf-head{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.shelf-head h2{font-size:var(--step-3);flex:none}
.zone-note{font-size:var(--step--1);color:var(--muted)}
.rule{flex:1;height:1px;background:var(--line);min-width:20px}
/* Los controles van centrados debajo del carrusel: quedan al alcance del
   pulgar en móvil y no compiten con el título de la zona. */
.shelf-foot{display:flex;justify-content:center;gap:14px;margin-top:2px}
.arrow{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);
  border-radius:99px;cursor:pointer;color:var(--ink-2);
  box-shadow:0 2px 6px rgb(var(--shadow)/var(--shadow-b));
  transition:border-color .18s,color .18s,transform .18s,box-shadow .18s;
}
.arrow:hover{
  border-color:var(--accent);color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 8px 18px -6px rgb(var(--shadow)/var(--shadow-a));
}
.arrow:active{transform:scale(.9)}
.arrow.is-tap{animation:salto .42s cubic-bezier(.3,1.4,.5,1)}
@keyframes salto{
  0%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-9px) scale(1.08)}
  65%{transform:translateY(2px) scale(.97)}
  100%{transform:translateY(0) scale(1)}
}
.track{
  display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;
  padding:22px 4px 24px;margin:0 -4px;
  scroll-snap-type:x proximity;scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none}

/* ============ CARD — catálogo flotante ============ */
.card{
  flex:none;width:288px;scroll-snap-align:start;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-l);overflow:hidden;cursor:pointer;
  box-shadow:0 2px 6px rgb(var(--shadow)/var(--shadow-b)),
             0 14px 30px -12px rgb(var(--shadow)/var(--shadow-a));
  transition:transform .34s cubic-bezier(.19,1,.3,1),box-shadow .34s,border-color .34s;
}
.card:hover{
  transform:translateY(-9px);
  border-color:var(--accent);
  box-shadow:0 4px 10px rgb(var(--shadow)/var(--shadow-b)),
             0 30px 52px -16px rgb(var(--shadow)/calc(var(--shadow-a) + .10));
}
.shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ground-2)}
.shot svg{width:100%;height:100%;display:block;transition:transform .6s cubic-bezier(.19,1,.3,1)}
.card:hover .shot svg{transform:scale(1.07)}
.badge{
  position:absolute;top:11px;left:11px;
  background:var(--warm-wash);color:var(--warm);
  border-radius:99px;padding:4px 10px;
  font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.zpin{
  position:absolute;bottom:11px;left:11px;
  background:rgb(var(--glass)/.9);backdrop-filter:blur(8px);
  border-radius:99px;padding:4px 11px;
  font-size:.66rem;font-weight:600;color:var(--ink);
}
.body{padding:15px 17px 17px}
.body h3{font-size:var(--step-2);line-height:1.15}
.bldg{
  font-size:.64rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-deep);margin:0 0 5px;
}
.specs{
  display:flex;gap:14px;margin:12px 0 0;padding-top:12px;
  border-top:1px solid var(--line-soft);
  font-size:var(--step--1);color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.specs b{color:var(--ink-2);font-weight:600}

.empty{
  padding:60px 20px;text-align:center;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--r-l);margin-top:30px;
}
.empty b{display:block;font-size:var(--step-2);color:var(--ink);margin-bottom:6px;
  font-family:"Fraunces",Georgia,serif;font-weight:500}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .skyline .bldg-r{transform:scaleY(1)}
  .skyline .family{transform:none;opacity:1}
  .load-word,.load-sub{opacity:1}
}
/* ============ Fotos reales ============ */
.shot img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .6s cubic-bezier(.19,1,.3,1);
  background:var(--ground-2);
}
.card:hover .shot img{transform:scale(1.07)}
.card a.card-link{
  position:absolute;inset:0;z-index:3;
  text-indent:-9999px;overflow:hidden;
}
.card{position:relative}
.shot img[loading]{opacity:0;animation:fadein .45s forwards}
@keyframes fadein{to{opacity:1}}

a.brand{text-decoration:none;color:inherit}
.cr-extra{max-width:65ch;margin:48px auto 0;line-height:1.7}
.cr-extra a{color:var(--accent-deep)}

/* ============ VISTA EN CUADRÍCULA (Nuestras propiedades) ============ */
.cr-grid{
  display:grid;gap:20px;margin-top:30px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
.cr-grid .card{width:auto;flex:initial}
.cr-grid-head{margin:34px 0 0}
.cr-grid-head h2{font-size:var(--step-3);margin:0 0 4px}

/* En móvil las filas del catálogo respiran menos */
@media(max-width:600px){
  .hero{padding:34px 0 18px}
  .search{top:70px;padding:12px}
  .field{padding:0 4px 0 8px}
  .filters{gap:14px}
  .card{width:78vw;max-width:300px}
  .track{gap:14px;padding:18px 4px 24px}
  .shelf-head h2{font-size:var(--step-2)}
  .zone-note{display:none}
  .cr-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
  .cr-grid .card{width:auto}
  .cr-grid .body{padding:12px 13px 14px}
  .cr-grid .body h3{font-size:var(--step-1)}
  .cr-grid .specs{gap:9px;font-size:.72rem}
}

/* ============ Blindaje contra el CSS del personalizador de Astra ============
   Astra fija color de texto en body y encabezados con su CSS dinámico, que se
   carga después del nuestro. Estas reglas devuelven el control a los tokens. */
.cr-page .arrow{color:var(--ink-2)}
.cr-page .card,
.cr-page .card h3,
.cr-page .shelf-head h2,
.cr-page .hero h1,
.cr-page .empty b{color:var(--ink)}
.cr-page .card .bldg{color:var(--accent-deep)}
.cr-page .card .specs{color:var(--muted)}
.cr-page .card .specs b{color:var(--ink-2)}
.cr-page .hero p,
.cr-page .zone-note{color:var(--ink-2)}
.cr-page .field input{color:var(--ink)}

/* =====================================================================
 * CUBIERTA DE LA PORTADA
 *
 * Una foto a pantalla completa bajo la cabecera, con el mensaje centrado
 * encima. Si hay dos fotos se turnan con un fundido lento.
 *
 * El texto no hereda los colores del tema: sobre una foto el fondo no
 * cambia con el modo claro u oscuro, así que el texto tampoco debe
 * hacerlo. El velo lleva el azul profundo de la marca en vez de negro,
 * que es lo que hace que la foto pertenezca al sitio en lugar de
 * parecer pegada encima.
 * ===================================================================== */

.cover{
  --on:#F6FBFE;            /* texto principal, nunca blanco puro */
  --on-2:#D3E6F3;          /* texto secundario */
  --on-accent:#8FD6F7;     /* el cian de marca, aclarado para leerse */
  --veil:10 46 74;         /* azul profundo de la marca, no negro */

  position:relative;
  display:grid;
  place-items:center;
  min-height:560px;
  height:86vh;
  height:86svh;
  max-height:880px;
  margin:0 0 4px;
  border-radius:0 0 var(--r-l) var(--r-l);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}

/* ---- las fotos ---- */
.cover-media{position:absolute;inset:0;z-index:0}
.cover-shot{
  position:absolute;inset:0;margin:0;overflow:hidden;
  background:var(--ground-2);
  opacity:0;transition:opacity 1.5s ease;
}
.cover-shot.is-on{opacity:1}
.cover-img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
}
/* Acercamiento muy lento: da vida sin marear ni distraer del mensaje. */
.cover-shot.is-on .cover-img{animation:coverZoom 16s ease-out both}
@keyframes coverZoom{from{transform:scale(1.02)}to{transform:scale(1.09)}}

/* En modo oscuro la foto se atenúa: sin esto la portada deslumbra. */
:root[data-theme="dark"] .cover-img{filter:brightness(.74) saturate(.95)}
:root[data-theme="dark"] .cover{--veil:4 16 32}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cover-img{filter:brightness(.74) saturate(.95)}
  :root:not([data-theme="light"]) .cover{--veil:4 16 32}
}

/* ---- el velo ---- */
.cover-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(118% 76% at 50% 44%,
      rgb(var(--veil)/.60) 0%,
      rgb(var(--veil)/.42) 42%,
      rgb(var(--veil)/.30) 68%,
      rgb(var(--veil)/.50) 100%),
    linear-gradient(180deg,
      rgb(var(--veil)/.58) 0%,
      rgb(var(--veil)/.14) 24%,
      rgb(var(--veil)/.14) 58%,
      rgb(var(--veil)/.74) 100%);
}

/* ---- el mensaje ---- */
.cover-body{
  position:relative;z-index:2;
  width:min(860px,88vw);
  padding:40px 0;
  display:flex;flex-direction:column;align-items:center;
}
.cover-eyebrow{
  margin:0 0 18px;
  font:600 var(--step--1)/1.4 "Archivo",sans-serif;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--on-accent);
  text-shadow:0 1px 16px rgb(var(--veil)/.8);
}
.cover-title{
  margin:0;max-width:18ch;
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:600;line-height:1.04;
  letter-spacing:-.015em;color:var(--on);
  text-wrap:balance;
  text-shadow:0 2px 34px rgb(var(--veil)/.7);
}
.cover-title em{font-style:italic;font-weight:300;color:var(--on-accent)}
.cover-lead{
  margin:20px 0 0;max-width:54ch;
  font-size:var(--step-1);line-height:1.65;color:var(--on-2);
  text-shadow:0 1px 20px rgb(var(--veil)/.75);
}

/* ---- llamada a la acción ---- */
.cover-cta{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:32px;padding:15px 27px;
  border-radius:99px;border:1px solid transparent;
  background:var(--on);color:#0A4E73;
  font:600 var(--step-0)/1 "Archivo",sans-serif;
  text-decoration:none;
  box-shadow:0 14px 34px -14px rgb(var(--veil)/.9);
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.cover-cta svg{transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.cover-cta:hover{background:var(--accent);color:#fff}
.cover-cta:hover svg{transform:translateY(3px)}
.cover-cta:active{transform:translateY(1px) scale(.97)}

/* ---- turno de fotos ---- */
.cover-dots{
  position:absolute;z-index:2;left:50%;transform:translateX(-50%);
  bottom:22px;display:flex;gap:9px;
}
.cover-dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgb(246 251 254/.7);background:transparent;
  transition:background .25s ease,transform .25s ease;
}
.cover-dot.is-on{background:var(--on);transform:scale(1.25)}

/* ---- pie de foto ---- */
.cover-caption{
  position:absolute;z-index:2;
  right:max(4vw,18px);bottom:20px;margin:0;
  font:500 var(--step--1)/1 "Archivo",sans-serif;
  letter-spacing:.03em;color:var(--on-2);opacity:.8;
  text-shadow:0 1px 14px rgb(var(--veil)/.85);
}

/* La cubierta ya hace de encabezado: el buscador se acerca a ella. */
.cover + .wrap .search{margin-top:26px}

/* ---- móvil ---- */
@media (max-width:820px){
  .cover{height:82vh;height:82svh;min-height:480px}
  .cover-eyebrow{letter-spacing:.22em;margin-bottom:14px}
  .cover-title{max-width:none;font-size:clamp(2rem,8.4vw,2.9rem);line-height:1.08}
  .cover-lead{font-size:var(--step-0);margin-top:16px;max-width:42ch}
  .cover-cta{margin-top:26px}
  .cover-caption{display:none}
  .cover-dots{bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  .cover-shot,.cover-shot.is-on .cover-img{transition:none;animation:none}
  .cover-cta,.cover-cta svg,.cover-dot{transition:none}
}