/* ═══════════ ENTRADA ═══════════ */
.entrance{position:relative;height:100svh;min-height:600px;overflow:hidden}
.entrance__bg{position:absolute;inset:0}
.entrance__bg video,.entrance__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.entrance__v{opacity:0;transition:opacity 1.6s var(--ease-io)}
.entrance__v.ready{opacity:1}
.entrance__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--pad) clamp(84px,9vh,120px)}
.entrance h1{max-width:16ch;margin-top:16px}
.entrance__meta{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(26px,3.6vw,48px);
  border-top:1px solid var(--line)}
.entrance__meta div{flex:1 1 150px;padding:14px 18px 0 0;min-width:0}
.entrance__meta b{display:block;font-family:var(--d);font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.5rem);letter-spacing:-.02em;margin-top:5px}
.entrance__cue{position:absolute;right:calc(var(--pad) - 4px);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.entrance__cue .lbl{writing-mode:vertical-rl;letter-spacing:.3em}
.entrance__cue i{display:block;width:1px;height:56px;background:var(--line);position:relative;overflow:hidden}
.entrance__cue i::after{content:'';position:absolute;inset:0;background:var(--gold);
  animation:cue 2.6s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-width:820px){.entrance__cue{display:none}
  .entrance__meta div{flex:1 1 45%;padding-right:12px}}

/* ═══════════ MANIFIESTO — el panel vive DENTRO de la foto, sin negro al lado ═══════════ */
.manifesto{position:relative;padding:0}
.manifesto__img{position:relative;height:clamp(420px,58vw,720px);overflow:hidden;background:var(--charcoal)}
.manifesto__img img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.manifesto__panel{position:absolute;z-index:2;right:var(--pad);bottom:clamp(22px,2.6vw,44px);
  width:min(600px,calc(100% - var(--pad)*2));background:var(--charcoal);
  padding:clamp(24px,3vw,46px)}
.manifesto__panel p:last-child{margin-bottom:0}
@media(max-width:760px){
  .manifesto__img{height:clamp(300px,66vw,420px)}
  .manifesto__panel{position:static;width:auto;padding:clamp(22px,5vw,32px) var(--pad)}
}

/* ═══════════ CARRETE — cuatro residencias, imagen continua sin cortes ═══════════ */
.reel{display:block}
.reel > article{position:relative}   /* sin display: pisaba el grid de B y D */
.reel__k{position:absolute;top:clamp(18px,2.2vw,34px);left:var(--pad);z-index:3}

/* texto sobre la propia imagen */
.reel__txt{position:absolute;z-index:3;left:var(--pad);bottom:clamp(26px,3.4vw,54px);max-width:44ch}
.reel__txt .lead{max-width:40ch}

/* A · panorámica */
.reel__a{aspect-ratio:21/9;overflow:hidden;background:var(--charcoal)}
.reel__a img{width:100%;height:100%;object-fit:cover;object-position:50% 56%}

/* B · panel de carbón junto a la imagen: nunca hay negro entre las dos */
.reel__b,.reel__d{display:grid}
.reel__b{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.reel__d{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.reel__panel{background:var(--charcoal);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,3.4vw,60px) clamp(22px,3vw,56px);min-width:0}
.reel__panel .lead{max-width:36ch}
.reel__img{position:relative;overflow:hidden;background:var(--charcoal);aspect-ratio:4/3.15}
.reel__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__b .reel__img img{object-position:52% 44%}

/* C · plano completo con el texto dentro */
.reel__c{height:clamp(440px,74vh,760px);overflow:hidden}
.reel__c img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.reel__c .veil{background:
  linear-gradient(to top,rgba(10,11,9,.96) 0%,rgba(10,11,9,.84) 18%,rgba(10,11,9,.4) 50%,rgba(10,11,9,.14) 100%),
  linear-gradient(to right,rgba(10,11,9,.84),rgba(10,11,9,.26) 46%,rgba(10,11,9,0) 76%)}

.reel__stat{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.reel__cta{margin-top:20px}
@media(max-width:820px){
  .reel__b,.reel__d{grid-template-columns:1fr}
  .reel__b .reel__img,.reel__d .reel__img{aspect-ratio:4/3}
  .reel__d .reel__img{order:-1}
  .reel__a{aspect-ratio:4/3}
  .reel__txt{position:static;padding:22px var(--pad) 30px;background:var(--charcoal);max-width:none}
  .reel__a .veil,.reel__c .veil{display:none}
  .reel__c{height:auto;aspect-ratio:4/3}
}

/* ═══════════ ÍNDICE FILTRABLE ═══════════ */
.index{padding:clamp(44px,5vw,80px) var(--pad) clamp(20px,2.2vw,30px);position:relative}
.index__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:26px;margin:clamp(30px,3.6vw,52px) 0 0;
  padding-top:22px;border-top:1px solid var(--line)}
.fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fgroup>.lbl{margin-right:2px}
.chip{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;background:transparent;border:1px solid var(--line);color:var(--stone);
  cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.chip:hover{color:var(--bone);border-color:var(--stone)}
.chip.on{background:var(--grad);border-color:transparent;color:#140F05}
.index__count{margin-top:20px}
.index__count b{color:var(--gold-hi);font-family:var(--m);font-size:11px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,2.6vw,44px) clamp(16px,1.9vw,30px);margin-top:clamp(22px,2.6vw,40px)}
.card{display:block}
.card.out{display:none}
.card figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--charcoal);margin-bottom:14px}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s var(--ease),opacity .75s var(--ease-io)}
.card__b{opacity:0}
.card:hover .card__a{opacity:0}
.card:hover .card__b{opacity:1}
.card:hover img{transform:scale(1.05)}
.card figure::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,11,9,.55),transparent 46%);
  opacity:.9;transition:opacity .6s}
.card:hover figure::after{opacity:.5}
.card__n{position:absolute;left:14px;bottom:12px;z-index:2;color:rgba(240,238,231,.72);
  opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-io),transform .6s var(--ease)}
.card:hover .card__n{opacity:1;transform:none}
.card__t{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:9px;border-bottom:1px solid var(--line-soft);transition:border-color .5s}
.card:hover .card__t{border-bottom-color:var(--gold)}
.card__name{font-family:var(--d);font-weight:300;font-size:clamp(1.12rem,1.42vw,1.5rem);
  letter-spacing:-.028em;transition:color .4s}
.card:hover .card__name{color:var(--gold)}
.card__p{white-space:nowrap}
.card__m{display:flex;gap:14px;flex-wrap:wrap;padding-top:9px}
.index__empty{padding:46px 0;display:none}
.index__empty.on{display:block}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}.card figure{aspect-ratio:5/4}}

/* ═══════════ NARRATIVA — cuatro planos, recortes distintos ═══════════ */
.story{padding:0}
.band{position:relative;height:clamp(400px,58vw,720px);overflow:hidden;margin-bottom:0;
  display:flex;align-items:flex-end}
.band__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.band__in{position:relative;z-index:3;padding:0 var(--pad) clamp(26px,3.2vw,52px);width:100%}
/* el velo pesa abajo: arriba se deja ver el mar */
.band .veil{background:linear-gradient(to top,rgba(10,11,9,.95) 0%,rgba(10,11,9,.7) 26%,
  rgba(10,11,9,.22) 58%,rgba(10,11,9,.04) 100%)}
.story__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(24px,2.8vw,42px)}
.plate{position:relative;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.plate:hover img{transform:scale(1.05)}
.plate__c{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px;z-index:2}
.plate__c p{font-size:.92em!important;line-height:1.45}
.plate{aspect-ratio:3/4.1}
@media(max-width:820px){.story__grid{grid-template-columns:1fr 1fr}
  .plate{aspect-ratio:3/3.6}}

/* ═══════════ PIE — toda la fotografía, texto encima, sin bloque negro ═══════════ */
.foot{position:relative;isolation:isolate}
.foot__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;z-index:-2}
.foot::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(to top,rgba(10,11,9,.97) 0%,rgba(10,11,9,.93) 32%,rgba(10,11,9,.78) 56%,
    rgba(10,11,9,.5) 78%,rgba(10,11,9,.28) 100%),
  linear-gradient(to right,rgba(10,11,9,.5),rgba(10,11,9,.18) 55%,rgba(10,11,9,.34) 100%)}
.foot__in{position:relative;padding:clamp(110px,16vw,260px) var(--pad) 0}
.foot__say{max-width:20ch;margin-bottom:clamp(44px,6vw,96px)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(22px,3vw,50px);
  padding-bottom:clamp(30px,3.4vw,50px);border-bottom:1px solid rgba(240,238,231,.16)}
.foot__grid a{display:block;padding:5px 0;color:rgba(240,238,231,.88);transition:color .3s;font-size:.92em}
.foot__col > div{margin-top:8px}
.foot__so a{display:inline-block;margin-right:14px;font-size:.9em}
.foot__grid a:hover{color:var(--gold-hi)}
.foot__logo{width:clamp(140px,15vw,200px);margin-top:14px;opacity:.92}
.foot__end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:16px 0 clamp(22px,2.6vw,38px)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}
  .foot__in{padding-top:clamp(64px,16vw,120px)}}

/* ═══════════ VITRINA — paneles que se abren, uno a la vez ═══════════ */
.show{padding:clamp(46px,5.4vw,86px) 0 0}
.show__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding:0 var(--pad) clamp(22px,2.6vw,38px)}
.show__strip{display:flex;height:clamp(440px,70vh,740px);overflow:hidden}
.show__p{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;
  border-left:1px solid rgba(10,11,9,.55);
  transition:flex-grow .95s var(--ease)}
.show__p:first-child{border-left:0}
.show__p.on{flex-grow:4.6;cursor:default}
.show__p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);filter:brightness(.5) saturate(.85);
  transition:transform 1.4s var(--ease),filter 1s var(--ease-io)}
.show__p.on img{transform:scale(1);filter:none}
.show__p:not(.on):hover img{filter:brightness(.72) saturate(1)}
.show__p::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,11,9,.9),rgba(10,11,9,.25) 52%,rgba(10,11,9,.05));
  opacity:1;transition:opacity .8s}
.show__p.on::after{opacity:.95}
.show__name{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--d);font-weight:300;
  font-size:clamp(.95rem,1.15vw,1.25rem);letter-spacing:.02em;white-space:nowrap;
  transition:opacity .5s var(--ease-io)}
.show__p.on .show__name{opacity:0;pointer-events:none}
.show__card{position:absolute;z-index:3;left:clamp(20px,2.4vw,44px);bottom:clamp(20px,2.4vw,44px);
  width:min(430px,calc(100% - clamp(40px,4.8vw,88px)));background:rgba(21,23,19,.93);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:clamp(20px,2.2vw,32px);opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .7s var(--ease-io) .25s,transform .8s var(--ease) .25s}
.show__p.on .show__card{opacity:1;transform:none;pointer-events:auto}
.show__stat{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 12px}
.show__card p{font-size:.9em;color:rgba(240,238,231,.76);margin:0 0 16px}
.show__i{position:absolute;top:18px;left:0;right:0;z-index:2;text-align:center;
  transition:opacity .5s}
.show__p.on .show__i{opacity:0}
@media(max-width:900px){
  .show__strip{flex-direction:column;height:auto}
  .show__p{flex:none;height:210px;border-left:0;border-top:1px solid rgba(10,11,9,.55)}
  .show__p.on{height:clamp(420px,72vw,560px)}
  .show__name{writing-mode:horizontal-tb;transform:translateX(-50%);bottom:18px}
  .show__card{width:auto;right:clamp(16px,4vw,28px)}
}
.fgroup--sort{margin-left:auto}
@media(max-width:900px){.fgroup--sort{margin-left:0}}
/* redes con su icono */
.foot__so{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.so{display:inline-flex!important;align-items:center;gap:8px;padding:0!important}
.so svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.3;
  transition:transform .45s var(--ease)}
.so:hover svg{transform:translateY(-2px)}
.so span{font-size:.88em}
@media(max-width:520px){.so span{display:none}.foot__so{gap:18px}}

/* ── firma del estudio: crédito con peso propio ── */
.foot__sig{display:grid;justify-items:center;gap:11px;text-align:center;
  margin-top:clamp(6px,1.4vw,16px);padding:clamp(24px,3.4vw,40px) 0 clamp(26px,3vw,42px);
  border-top:1px solid var(--line)}
.foot__sig-l{font-family:var(--m);font-weight:500;font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--stone)}
.foot__sig-l--dim{opacity:.62;letter-spacing:.24em}
.foot__sig-v{display:inline-flex;align-items:baseline;gap:.1em;
  font-family:var(--m);font-weight:500;font-size:clamp(14px,1.7vw,19px);
  letter-spacing:.44em;text-transform:uppercase;color:var(--bone);
  padding-left:.44em;line-height:1.1;
  transition:color .55s var(--ease),letter-spacing .55s var(--ease)}
.foot__sig-v i{font-style:normal;color:var(--gold);font-size:1.5em;line-height:0;transform:translateY(-.04em)}
.foot__sig-v:hover,.foot__sig-v:focus-visible{color:var(--gold);letter-spacing:.54em}

/* Facebook en el pie: la marca reconocible, pero en la paleta del sitio.
   El azul de Facebook rompe el obsidiana+oro y se ve a kilometros. */
.foot__fb{display:flex;align-items:center;gap:11px;margin-top:18px;text-decoration:none;
  color:var(--bone);transition:color .45s var(--ease)}
.foot__fb svg{width:19px;height:19px;flex:none;color:var(--gold);
  transition:transform .45s var(--ease)}
.foot__fb b{font-family:var(--m);font-weight:400;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.5;max-width:22ch}
.foot__fb:hover,.foot__fb:focus-visible{color:var(--gold)}
.foot__fb:hover svg{transform:scale(1.14)}

/* Los <a> del pie ya apilan; los <span> sueltos de la columna "Donde" no tenian
   regla y salian pegados ("Quepos · PuriscalCosta Rica"). Solo hijos directos:
   los <span data-lang> del bilingue viven DENTRO de los <a> y no deben tocarse. */
.foot__col > div > span{display:block}