/* ///////////////// SCROLLYTELLING ///////////////// */
.scrollytelling {
position: relative;
z-index: 1;
overflow: hidden;
display: inline;
}
.scrollytelling-viewport {
width: 100vw;
height: 100vh;
overflow: hidden;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: -1;
}
.scrollytelling-image {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
filter: brightness(50%);
}
.scrollytelling-text {
color: #fff;
text-shadow: 0 2px 4px rgb(0 0 0 / 30%);
position: relative;
z-index: 1;
margin-bottom: 100vh!important;
}
.scrollytelling-text:first-of-type {
margin-top: -33vh;
}
.scrollytelling-text:last-of-type {
padding-bottom: 66vh;
margin-bottom: 0;
}
.scrollytelling-fade figure {
opacity: 0;
position:initial!important;
display: initial!important;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.scrollytelling-fade figure:before {
content: "";
display: initial!important;
}
.scrollytelling-fade figure:first-of-type {
opacity: 1;
}
/* ///////////////// AGENDA VATICANO 005 ///////////////// */
#agenda {
position: relative;
display: block;
overflow: visible;
scroll-margin-top: 50px;
color: var(--col-fuente);
background-color: var(--col-crema);
}
#agenda > .scrollytelling {
display: block;
overflow: visible;
}
#agenda .scrollytelling-viewport {
position: sticky;
top: 68px;
z-index: 0;
width: 100%;
height: calc(100svh - 68px);
overflow: hidden;
background-color: var(--col-noche);
}
#agenda .scrollytelling-viewport::after {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
content: "";
background-image:
linear-gradient(180deg,var(--trans-10negro) 0%,var(--trans-40negro) 100%),
linear-gradient(90deg,var(--trans-40negro) 0%,transparent 72%);
}
#agenda .scrollytelling-fade .scrollytelling-viewport figure {
position: absolute!important;
inset: 0;
display: block!important;
margin: 0;
opacity: 0;
transition: opacity .8s ease-in-out;
}
#agenda .scrollytelling-fade .scrollytelling-viewport figure:first-child {
opacity: 1;
}
#agenda .scrollytelling-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.72) saturate(.82) sepia(.08) contrast(1.05);
}
#agenda .box-xsmall {
position: relative;
z-index: 3;
width: calc(100% - 24px)!important;
max-width: 701px!important;
margin-right: auto;
margin-left: auto;
}
#agenda .scrollytelling-text {
position: relative;
z-index: 2;
width: 100%;
color: var(--col-fuente);
text-shadow: none;
}
#agenda .agenda-intro {
margin-top: calc(-50svh - clamp(34px,7vw,62px) - .38rem - clamp(1.33rem,2vw,3rem));
margin-bottom: 30vh!important;
}
#agenda .agenda-intro article,
#agenda .agenda-dia article {
position: relative;
overflow: hidden;
background-color: var(--col-crema);
border: 1px solid var(--col-dorado);
border-radius: var(--borderradius-small);
box-shadow: 0 24px 65px var(--trans-30negro);
}
#agenda .agenda-intro article {
padding: clamp(34px,7vw,62px);
text-align: center;
}
#agenda .agenda-intro article::before,
#agenda .agenda-dia article::before {
position: absolute;
top: 0;
left: 50%;
width: 150px;
height: 10px;
content: "";
background-color: var(--col-amarillo);
border-radius: 0 0 4px 4px;
transform: translateX(-50%);
}
#agenda .agenda-intro h2 {
margin: 0 0 var(--espacio-small);
color: var(--col-noche);
font-family: var(--font-serif),serif;
font-size: var(--fontsize-subtitular);
font-weight: 650;
line-height: 1.02;
letter-spacing: -.045em;
text-wrap: balance;
}
#agenda .agenda-intro p {
max-width: 48ch;
margin: 0 auto;
color: var(--col-gris70);
font-family: var(--font-san-serif),sans-serif;
font-size: clamp(1rem,2vw,1.15rem);
line-height: 1.58;
text-wrap: balance;
}
#agenda .agenda-dias {
position: fixed;
top: 65px;
right: 0;
left: 0;
z-index: 900;
width: 100%;
padding: 9px var(--espacio-small);
border-bottom: 1px solid var(--col-dorado);
box-shadow: 0 10px 30px var(--trans-20negro);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-14px);
transition: opacity .35s ease,transform .35s ease,visibility 0s linear .35s;
background-color: var(--col-rojo);
background-image: radial-gradient(circle at 84% 16%, var(--trans-20blanco) 0 1px, transparent 2px), radial-gradient(circle at 16% 78%, var(--trans-10blanco) 0 1px, transparent 2px), repeating-linear-gradient(135deg, transparent 0 19px, var(--trans-10negro) 20px 21px), linear-gradient(145deg, var(--trans-10negro), transparent 46%, var(--trans-30negro));
}
#agenda .agenda-dias[aria-hidden="false"] {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity .35s ease,transform .35s ease,visibility 0s linear 0s;
}
#agenda .agenda-dias__lista {
display: grid;
grid-template-columns: repeat(6,minmax(64px,1fr));
gap: 6px;
width: min(100%,760px);
margin: 0 auto;
}
#agenda .agenda-dias a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 6px 8px;
color: var(--col-blanco);
font-family: var(--font-san-serif),sans-serif;
text-decoration: none;
border-radius: var(--borderradius-3xsmall);
transition: color .2s ease,background-color .2s ease;
}
#agenda .agenda-dias a:hover,
#agenda .agenda-dias a:focus-visible {
color: var(--col-noche)!important;
background-color: var(--col-crema);
}
#agenda .agenda-dias a:focus-visible {
outline: 2px solid var(--col-dorado);
outline-offset: 2px;
}
#agenda .agenda-dias a[aria-current="date"] {
color: var(--col-noche);
background-color: var(--col-amarillo);
box-shadow: inset 0 -3px 0 var(--col-dorado);
}
#agenda .agenda-dias a span {
font-size: .68rem;
font-weight: 750;
letter-spacing: .1em;
text-transform: uppercase;
}
#agenda .agenda-dias a strong {
font-family: var(--font-serif),serif;
font-size: 1.2rem;
font-weight: 750;
}
#agenda .agenda-dia {
margin-top: 0;
margin-bottom: 78vh!important;
padding-bottom: 0!important;
scroll-margin-top: 170px;
}
#agenda .agenda-dia--ultimo {
margin-bottom: 34vh!important;
}
#agenda .agenda-dia article {
padding: clamp(28px,6vw,52px);
}

#celebraciones {
background: #fdedca;
}
#celebraciones article > ul > li {
grid-template-columns: minmax(0,3fr) minmax(0,7fr);
}
#celebraciones article > ul > li > img {
width: 100%;
max-width: 140px;
}
#celebraciones article > ul > li > span {
grid-column: auto!important;
min-width: 0;
}
#agenda .agenda-fecha {
margin: 0;
color: var(--col-dorado)!important;
font-family: var(--font-serif),serif;
font-size: var(--fontsize-small);
font-weight: 800;
line-height: 1.3;
letter-spacing: .03em;
}
#agenda .agenda-lugar {
margin-top: var(--espacio-3xsmall);
margin-bottom: var(--espacio-medium);
color: var(--col-noche);
font-family: var(--font-serif),serif;
font-size: clamp(1.8rem,4vw,3rem);
font-weight: 650;
line-height: 1.08;
letter-spacing: -.035em;
}
#agenda .agenda-horaria {
margin: 0;
padding: 0;
list-style: none;
}
#agenda .agenda-horaria li {
display: grid;
grid-template-columns: 68px minmax(0,1fr);
gap: var(--espacio-small);
align-items: start;
padding: var(--espacio-small) 0;
border-top: 1px solid var(--col-dorado);
}
#agenda .agenda-horaria li:last-child {
padding-bottom: 0;
}
#agenda .agenda-horaria time {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 5px 7px;
color: var(--col-noche);
font-family: var(--font-san-serif),sans-serif;
font-size: .78rem;
font-variant-numeric: tabular-nums;
font-weight: 850;
background-color: var(--col-amarillo);
border-radius: 999px;
}
#agenda .agenda-horaria p,
#agenda .agenda-horaria b,
#agenda .agenda-horaria i,
#agenda small {
font-family: var(--font-san-serif),sans-serif;
}
#agenda .agenda-horaria b {
color: var(--col-dorado)!important;
font-weight: 800;
}
#agenda .agenda-horaria i {
color: var(--col-gris60);
}
.titulo-seccion {
display: flex;
align-items: center;
width: 100%;
}
.titulo-seccion::before {
content: "";
width: 25px;
height: 25px;
flex: 0 0 25px;
margin-right: 10px;
background: var(--trans-20negro);
}
.titulo-seccion::after {
content: "";
flex: 1;
height: 2px;
margin-left: 0;
background: var(--trans-20negro);
}

/* ---- Adaptaciones por pantalla y movimiento ---- */
@media (min-width:601px) {
#agenda .agenda-intro {
  margin-top: calc(-50svh - clamp(34px,7vw,62px) - .38rem - .82rem);
}
}
@media only screen and (max-width:600px) {
#agenda .scrollytelling-viewport {
  top: 58px;
  height: calc(100svh - 58px);
}
#agenda .agenda-dias {
  top: 58px;
  padding-right: 0;
  padding-left: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
#agenda .agenda-dias::-webkit-scrollbar {
  display: none;
}
#agenda .agenda-dias__lista {
  width: max-content;
  min-width: 100%;
  padding: 0 8px;
}
#agenda .agenda-dias a {
  width: 62px;
}
#agenda .agenda-dia article {
  padding: var(--espacio-large) var(--espacio-small);
}
#agenda .agenda-horaria li {
  grid-template-columns: 58px minmax(0,1fr);
  gap: var(--espacio-3xsmall);
}
}
@media (prefers-reduced-motion:reduce) {
#agenda .scrollytelling-fade .scrollytelling-viewport figure,
#agenda .agenda-dias,
#agenda .agenda-dias a {
  transition: none;
}
}