/* =====================================================================
   ELEMENTOS LIFE · experiencia de celular
   Doce momentos, no treinta y dos páginas. El capítulo abre con la foto
   fija a pantalla completa y el texto pasa por encima; entre capítulos,
   bloques de lectura anchos, una cifra grande y galerías que se deslizan
   de lado. Cormorant lee, Poppins rotula.
   ===================================================================== */
@font-face{font-family:'Cormorant';src:url('../assets/fonts/Cormorant-VariableFont_wght.ttf') format('truetype');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../assets/fonts/Cormorant-Italic-VariableFont_wght.ttf') format('truetype');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{
  --hueso:#ECEEE8;
  --tinta:#2C322E;
  --selva:#39403A;
  --salvia:#7C8A78;
  --margen:24px;
  --columna:620px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--hueso);color:var(--tinta);overflow-x:hidden}
body{font-family:'Cormorant',Georgia,serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}

.rotulo{
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--salvia);
  margin:0 0 14px;
}

/* ---------- portada ---------- */
.hero{position:relative;height:100dvh;overflow:hidden;display:flex;align-items:flex-end}
.hero .fondo{position:absolute;inset:0}
.cubre{width:100%;height:100%;object-fit:cover}
.hero .fondo picture{display:block;height:100%}
.hero::after{
  content:'';position:absolute;inset:0;
  /* La mitad inferior lleva el logo en blanco y el eslogan, y esta foto tiene
     ahi la arena clara: sin este peso, la marca se perdia contra el fondo. */
  background:linear-gradient(180deg,rgba(20,26,22,.22) 0%,rgba(20,26,22,0) 30%,rgba(20,26,22,.45) 62%,rgba(20,26,22,.86) 100%);
}
.hero-txt{position:relative;z-index:2;padding:0 var(--margen) 92px;width:100%;text-align:center;color:#fff}
.hero-txt .marca{width:150px;margin:0 auto 16px;filter:brightness(0) invert(1)}
.hero-txt .destino{
  font-family:'Poppins',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 10px;opacity:.92;
}
.hero-txt .eslogan{font-size:34px;line-height:1.16;font-weight:300;margin:0}
.pista-scroll{position:absolute;left:50%;bottom:34px;z-index:3;transform:translateX(-50%)}
.pista-scroll span{
  display:block;width:1px;height:46px;background:rgba(255,255,255,.7);
  animation:baja 2.4s ease-in-out infinite;transform-origin:top;
}
@keyframes baja{0%{transform:scaleY(.2);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- índice ---------- */
.indice{max-width:var(--columna);margin:0 auto;padding:52px var(--margen) 8px}
.indice a{
  display:flex;gap:16px;align-items:baseline;padding:15px 0;
  border-bottom:1px solid rgba(124,138,120,.32);color:inherit;text-decoration:none;
}
.indice .rom{font-family:'Poppins',sans-serif;font-size:11px;letter-spacing:.16em;color:var(--salvia);width:26px}
.indice .nom{font-size:23px;font-weight:300}

/* ---------- capítulo: la foto se queda, el texto pasa ---------- */
.capitulo{position:relative}
.capitulo .fijo{position:sticky;top:0;height:100dvh;overflow:hidden}
.capitulo .fijo picture{display:block;height:100%}
.capitulo .velo{
  position:absolute;inset:0;
  /* El titulo del capitulo vive a 58dvh: ahi el velo tiene que pesar aunque la
     foto sea clara -- en el render del edificio el titulo se perdia contra el
     cielo. */
  background:linear-gradient(180deg,rgba(20,26,22,.20) 0%,rgba(20,26,22,.06) 38%,rgba(20,26,22,.58) 62%,rgba(20,26,22,.86) 100%);
}
.capitulo-txt{
  position:absolute;left:0;right:0;top:58dvh;z-index:2;
  padding:0 var(--margen);color:#fff;text-align:left;
}
.capitulo-txt .rom{
  font-family:'Poppins',sans-serif;font-size:12px;letter-spacing:.3em;margin:0 0 10px;
  color:rgba(255,255,255,.9);
}
.capitulo-txt h2{font-size:44px;font-weight:300;line-height:1.04;margin:0 0 12px}
.capitulo-txt .bajada{font-size:19px;line-height:1.45;font-style:italic;margin:0;max-width:22em;opacity:.95}

/* El contenido del capitulo sube sobre la foto fija: ese movimiento es el
   que se siente como "te va llevando". El fondo hueso es lo que la tapa. */
.sobre-foto{
  position:relative;z-index:3;background:var(--hueso);
  margin-top:-2px;padding-top:8px;
}

/* ---------- lectura ---------- */
.lectura{max-width:var(--columna);margin:0 auto;padding:44px var(--margen) 8px}
.lectura p{font-size:20px;line-height:1.64;margin:0 0 20px}

/* ---------- la cifra ---------- */
.cifra{max-width:var(--columna);margin:0 auto;padding:26px var(--margen) 34px;text-align:center}
.cifra .numero{
  font-size:96px;line-height:.9;font-weight:300;margin:0;color:var(--selva);
  font-variant-numeric:lining-nums;
}
.cifra .unidad{
  font-family:'Poppins',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--salvia);margin:14px 0 12px;
}
.cifra .pie-cifra{font-size:18px;line-height:1.5;margin:0 auto;max-width:24em;color:var(--selva)}

/* ---------- foto suelta ---------- */
figure.suelta{margin:26px 0 8px}
figure.suelta img{width:100%;height:auto}
figure.suelta figcaption,.galeria figcaption,.planos figcaption{
  font-family:'Poppins',sans-serif;font-size:13.5px;line-height:1.5;color:var(--salvia);
  padding:10px var(--margen) 0;
}

/* ---------- datos ---------- */
.datos{max-width:var(--columna);margin:0 auto;padding:30px var(--margen) 34px}
/* El titulo del bloque no puede tener el mismo peso que los campos que
   contiene: con los dos en Poppins mayuscula la ficha se leia plana. */
.datos > .rotulo{
  font-family:'Cormorant',Georgia,serif;font-size:25px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--tinta);margin-bottom:10px;
}
.datos dl{margin:0;border-top:1px solid rgba(124,138,120,.35)}
.datos dt{
  font-family:'Poppins',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--salvia);padding:14px 0 3px;
}
.datos dd{margin:0;padding:0 0 14px;font-size:19px;line-height:1.4;border-bottom:1px solid rgba(124,138,120,.35)}

/* ---------- galerías que se deslizan de lado ---------- */
.galeria,.planos{padding:34px 0 40px}
.galeria .rotulo,.planos h2,.planos .bajada{padding:0 var(--margen)}
.planos h2{font-size:32px;font-weight:300;margin:0 0 8px}
.planos .bajada{font-size:18px;line-height:1.5;color:var(--selva);margin:0 0 20px;max-width:28em}
.carril{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--margen) 6px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carril::-webkit-scrollbar{display:none}
.carril figure{flex:0 0 82%;scroll-snap-align:center;margin:0}
.carril img{width:100%;height:auto;border-radius:1px}
.carril figcaption{padding:10px 0 0}
.carril figcaption b{display:block;font-family:'Cormorant',serif;font-size:21px;font-weight:400;color:var(--tinta);margin-bottom:4px}
.planos .carril figure{flex:0 0 88%}
.planos .carril img{background:#fff}

/* ---------- cierre ---------- */
.cta{
  display:block;max-width:var(--columna);margin:8px auto 0;
  padding:17px 20px;text-align:center;background:var(--selva);color:var(--hueso);
  text-decoration:none;font-family:'Poppins',sans-serif;font-size:14px;letter-spacing:.08em;
}
.pie{max-width:var(--columna);margin:0 auto;padding:44px var(--margen) 56px;text-align:center}
.pie p{
  font-family:'Poppins',sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--salvia);margin:0 0 18px;line-height:2;
}
.ver-revista{
  display:inline-block;padding:13px 22px;border:1px solid rgba(124,138,120,.55);
  color:var(--selva);text-decoration:none;
  font-family:'Poppins',sans-serif;font-size:12.5px;letter-spacing:.08em;
}

/* ---------- entrada de los bloques ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.dentro{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .pista-scroll span{animation:none}
  .capitulo{height:100dvh}
  .capitulo .fijo{position:relative}
}

/* En pantalla ancha la experiencia se centra en una columna: no se estira. */
@media (min-width:820px){
  :root{--margen:40px}
  .capitulo-txt h2{font-size:56px}
  .carril figure{flex:0 0 46%}
}

/* ---------- el plano de amenidades ----------
   Es una vista aerea muy apaisada (2.36:1): a ancho de telefono los numeros
   miden un pixel. Se muestra completo para entender la disposicion y se abre
   a pantalla completa para leerlos, con la leyenda debajo. */
.plano-destacado{padding:30px 0 8px}
.plano-destacado .rotulo{padding:0 var(--margen)}
.plano-destacado figure{margin:0;cursor:zoom-in}
.plano-destacado img{width:100%;height:auto}
.plano-destacado figcaption{
  font-family:'Poppins',sans-serif;font-size:13.5px;line-height:1.5;color:var(--salvia);
  padding:10px var(--margen) 0;
}
.leyenda{
  columns:2;column-gap:20px;margin:18px 0 0;padding:0 var(--margen);
  font-family:'Poppins',sans-serif;font-size:12.5px;line-height:1.75;color:var(--selva);
  list-style:none;
}
.leyenda li{break-inside:avoid}

/* ---------- visor para ampliar ---------- */
.ampliable{cursor:zoom-in}
#visor{
  border:0;padding:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;
  background:#11150f;overflow:auto;
}
#visor::backdrop{background:rgba(10,13,10,.9)}
#visor .lienzo{min-height:100%;display:flex;align-items:center}
#visor img{width:260%;max-width:none;height:auto}   /* ancho para poder recorrerlo */
#visor .cerrar{
  position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(236,238,232,.92);color:#1f2a22;font-size:20px;line-height:1;cursor:pointer;
}