/* =====================================================================
 * FICHA DE APARTAMENTO
 * Se carga solo en la página de una propiedad.
 * ===================================================================== */

.cr-sg{padding:28px 0 0}

/* ---------- Migas y título ---------- */
.cr-sg-crumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:var(--step--1);color:var(--muted);margin-bottom:14px;
}
.cr-sg-crumbs a{color:var(--muted);text-decoration:none}
.cr-sg-crumbs a:hover{color:var(--accent-deep)}
.cr-sg-crumbs span{opacity:.5}

.cr-sg-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 22px;
  margin-bottom:22px;
}
.cr-sg-head h1{font-size:var(--step-4);line-height:1.05;flex:1 1 320px}
.cr-sg-bldg{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-deep);margin:0 0 8px;
}
.cr-sg-zone{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-wash);color:var(--accent-deep);
  border-radius:99px;padding:7px 15px;
  font-size:var(--step--1);font-weight:600;
}

/* ---------- Galería ----------
   Una foto grande y el resto en mosaico al lado. La disposición depende de
   cuántas fotos haya, para que nunca queden huecos ni tiras recortadas. */
.cr-gal{display:grid;gap:10px;margin-bottom:34px}
.cr-gal figure{
  margin:0;position:relative;overflow:hidden;
  border-radius:var(--r-m);background:var(--ground-2);
}
.cr-gal img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.19,1,.3,1)}
.cr-gal figure:hover img{transform:scale(1.05)}
.cr-gal button{all:unset;display:block;cursor:zoom-in;width:100%;height:100%}
.cr-gal button:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
.cr-gal-more{
  position:absolute;right:12px;bottom:12px;
  background:rgb(var(--glass)/.92);backdrop-filter:blur(10px);
  border-radius:99px;padding:9px 16px;
  font-size:var(--step--1);font-weight:600;color:var(--ink);
  pointer-events:none;
}

/* --- Móvil y tableta: carrusel horizontal que se desliza con el dedo --- */
@media(max-width:819px){
  .cr-gal{
    grid-auto-flow:column;grid-auto-columns:84%;
    grid-template-columns:none;grid-template-rows:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-bottom:4px;
  }
  .cr-gal::-webkit-scrollbar{display:none}
  .cr-gal figure{scroll-snap-align:center;aspect-ratio:4/3;height:auto}
  .cr-gal-main{grid-column:auto;grid-row:auto}
}

/* --- Escritorio: mosaico de altura fija --- */
@media(min-width:820px){
  .cr-gal{height:clamp(360px,45vw,540px)}

  /* 1 foto */
  .cr-gal.n1{grid-template-columns:1fr}

  /* 2 fotos, mitad y mitad */
  .cr-gal.n2{grid-template-columns:1fr 1fr}

  /* 3 fotos: una grande y dos apiladas */
  .cr-gal.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
  .cr-gal.n3 .cr-gal-main{grid-row:1 / 3}

  /* 4 fotos: una grande y tres apiladas */
  .cr-gal.n4{grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,1fr)}
  .cr-gal.n4 .cr-gal-main{grid-row:1 / 4}

  /* 5 o más: una grande y un mosaico de cuatro */
  .cr-gal.n5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
  .cr-gal.n5 .cr-gal-main{grid-column:1;grid-row:1 / 3}
}

/* ---------- Cuerpo en dos columnas ---------- */
.cr-sg-body{display:grid;gap:38px;align-items:start}
@media(min-width:960px){
  .cr-sg-body{grid-template-columns:minmax(0,1fr) 340px;gap:54px}
}

/* ---------- Datos rápidos ---------- */
.cr-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:2px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-m);
  overflow:hidden;margin-bottom:34px;
}
.cr-fact{background:var(--surface);padding:18px 16px}
.cr-fact b{
  display:block;font-family:"Fraunces",Georgia,serif;
  font-size:var(--step-3);font-weight:500;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cr-fact span{
  display:block;margin-top:7px;font-size:.62rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}

/* ---------- Secciones de contenido ---------- */
.cr-sec{margin:0 0 40px}
.cr-sec>h2{
  font-size:var(--step-2);margin:0 0 16px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.cr-sec-in{line-height:1.75;color:var(--ink-2)}
.cr-sec-in p{margin:0 0 14px}
.cr-sec-in strong{color:var(--ink)}
.cr-sec-in ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.cr-sec-in table{width:100%;font-size:var(--step-0)}
.cr-sec-in td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.cr-sec-in iframe{width:100%;min-height:340px;border:0;border-radius:var(--r-m);display:block}

/* Camas: el texto viene con <strong>Habitación N</strong> por cada cuarto */
.cr-rooms .cr-sec-in strong{
  display:inline-block;margin-top:10px;color:var(--accent-deep);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- Panel lateral de contacto ---------- */
.cr-aside{position:sticky;top:82px;display:grid;gap:14px}
.cr-card-cta{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px;
  box-shadow:0 2px 6px rgb(var(--shadow)/var(--shadow-b)),
             0 20px 40px -22px rgb(var(--shadow)/var(--shadow-a));
}
.cr-card-cta h2{font-size:var(--step-2);margin:0 0 6px}
.cr-card-cta p{margin:0 0 18px;color:var(--muted);font-size:var(--step--1);line-height:1.6}
.cr-card-cta .cr-btn{width:100%;margin-bottom:9px}
.cr-card-cta .cr-btn:last-child{margin-bottom:0}
.cr-cta-note{
  margin:16px 0 0;padding-top:15px;border-top:1px solid var(--line-soft);
  font-size:.72rem;color:var(--muted);line-height:1.55;
}

/* ---------- Barra fija de acción en móvil ---------- */
.cr-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;gap:9px;padding:11px max(12px,3vw);
  padding-bottom:calc(11px + env(safe-area-inset-bottom));
  background:rgb(var(--glass)/.94);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid var(--line);
}
.cr-sticky-cta .cr-btn{flex:1}
@media(max-width:959px){
  .cr-sticky-cta{display:flex}
  .cr-aside{position:static}
  body.cr-single .cr-footer{padding-bottom:80px}
}

/* ---------- Otras propiedades de la misma zona ---------- */
.cr-related{margin-top:20px}
.cr-related h2{font-size:var(--step-3);margin:0 0 4px}
.cr-related .zone-note{font-size:var(--step--1);color:var(--muted)}

/* ---------- Visor de fotos a pantalla completa ---------- */
.cr-lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgb(4 10 26/.94);
  align-items:center;justify-content:center;
  padding:max(16px,3vw);
}
.cr-lightbox[open],.cr-lightbox.is-on{display:flex}
.cr-lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:8px}
.cr-lb-btn{
  position:absolute;width:48px;height:48px;display:grid;place-items:center;
  border:0;border-radius:99px;cursor:pointer;
  background:rgb(255 255 255/.14);color:#fff;backdrop-filter:blur(6px);
}
.cr-lb-btn:hover{background:rgb(255 255 255/.26)}
.cr-lb-close{top:18px;right:18px}
.cr-lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.cr-lb-next{right:14px;top:50%;transform:translateY(-50%)}
.cr-lb-count{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:var(--step--1);font-variant-numeric:tabular-nums;
  background:rgb(255 255 255/.14);border-radius:99px;padding:7px 16px;
}

/* ---------- Blindaje contra el CSS del personalizador de Astra ----------
   Astra fija el color de los encabezados después de esta hoja, y los títulos
   quedaban oscuros sobre fondo oscuro. */
.cr-single .cr-sg-head h1,
.cr-single .cr-sec>h2,
.cr-single .cr-card-cta h2,
.cr-single .cr-fact b,
.cr-single .cr-related h2{color:var(--ink)}
.cr-single .cr-sg-bldg{color:var(--accent-deep)}
.cr-single .cr-sec-in,
.cr-single .cr-card-cta p{color:var(--ink-2)}
.cr-single .cr-fact span{color:var(--muted)}