/* Finca El Tajar - home editorial por momentos */

body.home{
  background:var(--cal-050);
  color:var(--tierra-900);
}

.home .cabecera{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(250,247,241,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-light);
}

.home .cabecera-in{
  width:100%;
}

.home .marca,
.home .nav{
  color:var(--tierra-900);
}

.home .nav a{
  color:var(--piedra-600);
}

.home .nav a:hover,
.home .nav a[aria-current]{
  color:var(--tierra-900);
}

.home .nav .btn{
  border-color:var(--tierra-900);
  background:var(--tierra-900);
  color:var(--cal-100);
}

.home .nav .btn:hover{
  background:transparent;
  color:var(--tierra-900);
}

.day-main{
  background:var(--cal-050);
  overflow:visible;
}

.day-hero{
  position:relative;
  min-height:min(84svh,820px);
  display:grid;
  align-items:end;
  isolation:isolate;
  background:var(--tierra-900);
}

.day-hero-media{
  position:absolute;
  inset:0;
  margin:0;
  overflow:hidden;
  z-index:-1;
}

.day-hero-media > .hero-still{
  position:absolute;
  inset:0;
  z-index:0;
}

.day-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,rgba(16,14,12,.72) 0%,rgba(16,14,12,.34) 42%,rgba(16,14,12,.12) 100%),
    linear-gradient(180deg,rgba(16,14,12,.2) 0%,transparent 38%,rgba(16,14,12,.62) 100%);
  pointer-events:none;
}

.day-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  filter:saturate(1.02) contrast(1.02);
}

.day-hero-copy{
  position:relative;
  z-index:3;
  width:min(70rem,100%);
  padding:clamp(7rem,16vh,12rem) var(--margin-x) clamp(3.6rem,8vh,6rem);
  color:var(--cal-100);
}

.day-kicker,
.moment-time{
  display:block;
  color:var(--dorado);
  font-size:var(--fs-micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
}

.day-hero h1{
  max-width:9ch;
  margin:.85rem 0 1.25rem;
  font-size:clamp(3.4rem,8.6vw,8.6rem);
  line-height:.88;
  letter-spacing:0;
}

.day-hero p{
  max-width:38rem;
  color:rgba(250,247,241,.88);
  font-size:var(--fs-lead);
  line-height:1.45;
}

.day-intro{
  max-width:var(--container);
  margin:0 auto;
  padding:clamp(5rem,11vh,9rem) var(--margin-x) clamp(3.5rem,8vh,6rem);
}

.day-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(22rem,.72fr);
  gap:clamp(2.5rem,7vw,8rem);
  align-items:start;
}

.day-intro h2{
  margin-top:1rem;
  font-size:clamp(2.4rem,5vw,5.6rem);
  line-height:.98;
  max-width:13ch;
}

.day-intro-copy{
  padding-top:.4rem;
}

.day-intro-copy p{
  color:var(--piedra-600);
  font-size:var(--fs-lead);
  line-height:1.55;
}

.day-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:1.8rem;
}

.day-moments{
  background:var(--cal-050);
}

.day-moment{
  border-top:1px solid var(--line-light);
  padding:clamp(5rem,11vh,9rem) var(--margin-x);
  scroll-margin-top:9.5rem;
}

.day-moment.night{
  background:var(--tierra-900);
  color:var(--cal-100);
}

.day-moment.is-final{
  background:linear-gradient(180deg,var(--cal-050),var(--cal-100));
}

.moment-grid{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(18rem,.58fr) minmax(0,1.42fr);
  gap:clamp(2.4rem,5.2vw,6.5rem);
  align-items:start;
}

.day-moment.is-reverse .moment-grid{
  grid-template-columns:minmax(0,1.42fr) minmax(18rem,.58fr);
}

.day-moment.is-reverse .moment-copy{
  order:2;
}

.day-moment.is-reverse .moment-photo{
  order:1;
}

.moment-copy{
  padding-top:clamp(.5rem,7vh,5.5rem);
  min-width:0;
  container-type:inline-size;
}

.moment-copy h2{
  margin:1.2rem 0 1.65rem;
  font-size:clamp(2.3rem,17cqi,4.75rem);
  line-height:1.04;
  letter-spacing:0;
  max-width:100%;
}

.moment-copy p{
  max-width:35rem;
  color:var(--piedra-600);
  font-size:var(--fs-lead);
  line-height:1.52;
}

.moment-copy h2 + p{margin-top:0;}

.night .moment-copy p{
  color:rgba(242,237,228,.78);
}

.moment-photo{
  margin:0;
  position:relative;
}

.moment-photo.is-portrait{
  width:min(100%,42rem);
  justify-self:center;
}

.moment-photo img{
  display:block;
  width:100%;
  height:auto;
  background:var(--cal-100);
  filter:saturate(1.01) contrast(1.01);
}

.photo-stack{
  display:grid;
  grid-template-columns:minmax(0,1.34fr) minmax(12rem,.66fr);
  grid-template-rows:auto minmax(14rem,1fr);
  gap:clamp(.85rem,1.15vw,1.35rem);
  align-items:stretch;
  width:100%;
  min-height:clamp(34rem,68vh,50rem);
}

.photo-stack img,
.moment-card{
  position:relative;
}

.photo-stack img{
  display:block;
  height:100%;
  width:100%;
  min-width:0;
  min-height:0;
  object-fit:cover;
}

.photo-main{
  grid-column:1;
  grid-row:1/3;
}

.photo-side{
  grid-column:2;
  grid-row:2;
}

.moment-card{
  grid-column:2;
  grid-row:1;
  min-height:0;
  padding:clamp(1.15rem,1.8vw,2rem);
  border:1px solid var(--line-light);
  background:rgba(255,253,248,.86);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(.7rem,1vw,1rem);
  overflow:visible;
}

.moment-card span{
  display:block;
  color:var(--dorado);
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
}

.moment-card p{
  margin:0;
  color:var(--piedra-600);
  font-size:clamp(.95rem,.85rem + .25vw,1.08rem);
  line-height:1.45;
  max-width:20rem;
}

.moment-card .card-caption{
  width:100%;
  max-width:20rem;
  margin-top:0;
  padding-top:0;
  border-top:0;
  color:var(--piedra-600);
}

.night .moment-card{
  border-color:var(--line-dark);
  background:rgba(31,27,23,.72);
}

.night .moment-card p{
  color:rgba(242,237,228,.76);
}

.night .moment-card .card-caption{
  color:rgba(242,237,228,.76);
}

.day-moment.is-reverse .photo-stack{
  margin-left:0;
}

.day-moment:not(.is-reverse) .photo-stack{
  margin-right:0;
}

.photo-stack-trio{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  align-items:stretch;
  aspect-ratio:1/1;
  min-height:auto;
}

.photo-stack-trio .photo-main{
  grid-column:1;
  grid-row:1;
}

.photo-stack-trio .photo-side{
  grid-column:2;
  grid-row:1;
}

.photo-stack-trio .moment-card{
  grid-column:1;
  grid-row:2;
}

.photo-stack-trio .photo-extra{
  grid-column:2;
  grid-row:2;
}

.moment-photo.photo-pair figcaption{
  display:none;
}

#llegada .photo-main{object-position:50% 54%;}
#llegada .photo-side{object-position:50% 50%;}
#jardin .photo-main{object-position:50% 55%;}
#jardin .photo-side{object-position:50% 46%;}
#ceremonia .photo-main{object-position:50% 50%;}
#ceremonia .photo-side{object-position:50% 50%;}
#salon .photo-main{object-position:50% 54%;}
#salon .photo-side{object-position:50% 48%;}
#cocina .photo-main{object-position:50% 52%;}
#cocina .photo-side{object-position:50% 50%;}
#cocina .photo-extra{object-position:50% 48%;}
#manana .photo-main,
.photo-main.is-love-photo{object-position:28% 46%;}

@media(min-width:1001px){
  .day-moment:has(.photo-pair){
    padding-block:clamp(5rem,9.5vh,8.5rem);
  }

  .day-moment:has(.photo-pair) .moment-grid{
    max-width:min(1720px,100%);
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:clamp(.85rem,1.1vw,1.25rem);
    align-items:stretch;
  }

  .day-moment:has(.photo-pair) .moment-copy{
    grid-column:1/5;
    grid-row:1;
    order:initial;
    min-height:min(72vh,48rem);
    padding:clamp(2rem,3.4vw,4.5rem);
    border:1px solid var(--line-light);
    background:rgba(255,253,248,.82);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .day-moment.night:has(.photo-pair) .moment-copy{
    border-color:var(--line-dark);
    background:rgba(31,27,23,.78);
  }

  .day-moment:has(.photo-pair) .moment-photo{
    grid-column:5/13;
    grid-row:1;
    order:initial;
    align-self:stretch;
    width:100%;
    display:flex;
    flex-direction:column;
  }

  .day-moment.is-reverse:has(.photo-pair) .moment-photo{
    grid-column:1/9;
  }

  .day-moment.is-reverse:has(.photo-pair) .moment-copy{
    grid-column:9/13;
  }

  .day-moment:has(.photo-pair) .moment-copy h2{
    font-size:clamp(2rem,17cqi,4.75rem);
    line-height:1.04;
    max-width:100%;
    padding-right:0;
  }

  .day-moment:has(.photo-pair) .moment-copy p{
    max-width:30rem;
  }

  .day-moment:has(.photo-pair) .photo-stack{
    width:100%;
    height:100%;
    flex:1;
    margin:0;
    grid-template-columns:minmax(0,1.34fr) minmax(12rem,.66fr);
    grid-template-rows:auto minmax(14rem,1fr);
    gap:clamp(.85rem,1.1vw,1.2rem);
    align-items:stretch;
  }

  .day-moment:has(.photo-pair) .photo-stack .photo-main{
    grid-column:1;
    grid-row:1/3;
  }

  .day-moment:has(.photo-pair) .photo-stack .moment-card{
    grid-column:2;
    grid-row:1;
  }

  .day-moment:has(.photo-pair) .photo-stack .photo-side{
    grid-column:2;
    grid-row:2;
    margin-top:0;
    border:0;
  }

  .day-moment.is-reverse:has(.photo-pair) .photo-stack .photo-main{
    grid-column:1;
  }

  .day-moment.is-reverse:has(.photo-pair) .photo-stack .photo-side{
    grid-column:2;
    margin-top:0;
  }

  .day-moment:has(.photo-pair) .photo-stack-trio{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    height:auto;
    aspect-ratio:1/1;
  }

  .day-moment:has(.photo-pair) .photo-stack-trio .photo-main{
    grid-column:1;
    grid-row:1;
  }

  .day-moment:has(.photo-pair) .photo-stack-trio .photo-side{
    grid-column:2;
    grid-row:1;
    margin-top:0;
  }

  .day-moment:has(.photo-pair) .photo-stack-trio .moment-card{
    grid-column:1;
    grid-row:2;
  }

  .day-moment:has(.photo-pair) .photo-stack-trio .photo-extra{
    grid-column:2;
    grid-row:2;
  }

  .day-moment:has(.photo-pair) .moment-photo figcaption{
    max-width:28rem;
  }
}

.moment-photo figcaption{
  max-width:32rem;
  margin-top:.85rem;
  color:var(--piedra-600);
  font-size:var(--fs-small);
  line-height:1.45;
}

.night .moment-photo figcaption{
  color:var(--piedra-300);
}

.moment-facts{
  margin-top:2.2rem;
  display:grid;
  border-top:1px solid var(--line-light);
}

.moment-facts span{
  padding:.9rem 0;
  border-bottom:1px solid var(--line-light);
  color:var(--piedra-600);
  font-size:var(--fs-micro);
  letter-spacing:.13em;
  text-transform:uppercase;
}

.moment-facts b{
  display:inline-block;
  min-width:3.2rem;
  margin-right:.65rem;
  font-family:var(--serif);
  font-size:1.85rem;
  line-height:1;
  font-weight:400;
  color:var(--tierra-900);
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
}

.home .wa{
  background:var(--olivo);
}

@media(min-width:1001px){
  .day-moment:has(.photo-pair) .moment-copy{
    position:sticky;
    top:clamp(8.5rem,14vh,11rem);
    align-self:start;
  }

  .moment-photo{
    position:sticky;
    top:clamp(8.5rem,14vh,11rem);
  }
}

@media(max-width:1000px){
  .day-intro-grid,
  .moment-grid{
    grid-template-columns:1fr;
  }

  .day-moment.is-reverse .moment-grid{
    grid-template-columns:1fr;
  }

  .day-moment.is-reverse .moment-copy,
  .day-moment.is-reverse .moment-photo{
    order:initial;
  }

  .day-moment.is-reverse .photo-stack,
  .day-moment:not(.is-reverse) .photo-stack{
    margin-inline:0;
  }

}

@media(max-width:700px){
  .home .cabecera-in{
    padding:.95rem var(--margin-x);
  }

  .home .nav .btn{
    display:none;
  }

  .home .wa{
    display:none;
  }

  .home .barra-movil a{
    font-size:.68rem;
    letter-spacing:.1em;
  }

  .day-hero{
    min-height:78svh;
  }

  .day-hero-copy{
    padding-top:clamp(5rem,14vh,8rem);
  }

  .day-hero h1{
    font-size:clamp(3rem,15vw,4.8rem);
  }

  .day-intro{
    padding-top:4.5rem;
  }

  .day-moment{
    padding-block:4.4rem;
  }

  .moment-copy{
    padding-top:0;
  }

  .moment-copy h2{
    font-size:clamp(2.25rem,13cqi,3rem);
  }

  .moment-copy p,
  .day-intro-copy p,
  .day-hero p{
    font-size:1rem;
  }

  .moment-photo.is-portrait{
    width:100%;
  }

  .photo-stack{
    width:100%;
    min-height:auto;
    margin:0;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:.8rem;
  }

  .photo-stack .photo-main,
  .photo-stack .photo-side,
  .photo-stack .photo-extra,
  .photo-stack .moment-card{
    grid-column:auto;
    grid-row:auto;
    margin-top:0;
    border-width:0;
  }

  .photo-stack img{
    height:auto;
    object-fit:contain;
  }

  .photo-stack-trio{
    grid-template-columns:1fr 1fr;
    aspect-ratio:auto;
  }

  .photo-stack-trio .photo-main{
    grid-column:1/-1;
    grid-row:1;
  }

  .photo-stack-trio .photo-side{
    grid-column:1;
    grid-row:2;
  }

  .photo-stack-trio .photo-extra{
    grid-column:2;
    grid-row:2;
  }

  .photo-stack-trio .moment-card{
    grid-column:1/-1;
    grid-row:3;
  }

  .day-actions .btn{
    width:100%;
    justify-content:center;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
}