/* ================================================================
   Invitación de XV Años · Paula Jimena · 07.11.2027
   ================================================================ */

@font-face {
  font-family: "OPTIBakerDanmarkOne";
  src: url("../fonts/OPTIBakerDanmarkOne.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Amalfi Coast";
  src: url("../fonts/Amalfi-Coast.ttf") format("truetype");
  font-display: swap;
}

:root {
  --olive: #495030;
  --accent: #B5622E;
  --accent-dark: #8F4A22;
  --ink: #0a0a0a;
  --f-sans: "Cormorant Garamond", "Cormorant Infant", serif;
  --f-heading: "OPTIBakerDanmarkOne", serif;
  --f-script: "Amalfi Coast", cursive;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { font-family: var(--f-sans); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { color: var(--ink); background: #fff; line-height: 1.5; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
[hidden] { display: none !important; }

.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heading { font-family: var(--f-heading); font-weight: 400; text-align: center; }
.heading--40 { font-size: 40px; }
.script { font-family: var(--f-script); }

@keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bounce { animation: bounce-subtle 1.8s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 6s linear infinite; }

.pill {
  display: inline-block; margin-top: 1.5rem; padding: .5rem 2rem;
  border: 1px solid rgba(255,255,255,.7); border-radius: 999px;
  font-size: .75rem; letter-spacing: 3px; color: #fff; transition: background .2s;
}
.pill:hover { background: rgba(255,255,255,.1); }
.pill--sm { margin-top: 1rem; padding: .375rem 1.25rem; font-size: 10px; letter-spacing: 2px; }

.round-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: 1.5rem; line-height: 1;
}

/* ============================ INTRO ============================ */
.intro {
  position: fixed; inset: 0; z-index: 100; background: #000;
  transition: transform .7s ease-in-out;
}
.intro.exit { transform: translateY(-100%); }
.intro__video { position: relative; width: 100%; height: 100%; }
.intro__video video { width: 100%; height: 100%; object-fit: cover; }
.intro__ver {
  position: absolute; left: 0; right: 0; bottom: 4rem; margin: 0 auto; width: fit-content;
  padding: .75rem 2.5rem; border: 1px solid rgba(255,255,255,.8); border-radius: 999px;
  background: rgba(0,0,0,.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: .875rem; letter-spacing: 3px; transition: background .2s;
}
.intro__ver:hover { background: rgba(255,255,255,.2); }
.intro__second {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 0 1rem;
  background: url("../img/fondo-papel.webp") center / cover;
}
.intro__shield { position: relative; aspect-ratio: 1303 / 1207; width: min(98vw, 90vh); }
.intro__shield-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intro__seal { position: absolute; left: 50%; top: 0; width: 32%; transform: translate(-50%, -50%); }
.intro__guest {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 3rem; text-align: center; color: #fff;
}
.intro__para { font-size: 10px; letter-spacing: 4px; color: rgba(255,255,255,.7); }
.intro__name { margin-top: 1.25rem; font-size: 1.5rem; font-style: italic; line-height: 1.375; }
.intro__tickets { margin-top: 1.25rem; font-size: .75rem; letter-spacing: 3px; color: rgba(255,255,255,.8); }
.intro__down {
  position: absolute; left: 0; right: 0; bottom: 12%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: #fff; font-size: 2.25rem;
}
@media (min-width: 640px) { .intro__name { font-size: 1.875rem; } }

/* ============================ PÁGINA ============================ */
.main {
  min-height: 100vh;
  background: url("../img/fondo-papel.webp") center / cover fixed;
}

/* Navegación */
.nav { position: fixed; top: 0; left: 0; z-index: 40; width: 100%; }
.nav__bar { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.5rem; }
.nav__links { display: none; gap: 2rem; }
.nav__links a, .nav__mobile a { font-size: 14px; letter-spacing: 2px; color: #000; transition: opacity .2s; }
.nav__links a:hover { opacity: .7; }
.nav__toggle { margin-left: auto; color: #000; }
.nav__toggle .ic-close { display: none; }
.nav.open .nav__toggle .ic-menu { display: none; }
.nav.open .nav__toggle .ic-close { display: block; }
.nav__mobile { border-top: 1px solid rgba(0,0,0,.1); background: #fff; padding: 1rem 1.5rem; }
.nav__mobile ul { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) {
  .nav { background: rgba(255,255,255,.9); }
  .nav__links { display: flex; }
  .nav__toggle, .nav__mobile { display: none !important; }
}

/* Portada */
.hero { display: flex; flex-direction: column; align-items: center; padding-top: 5rem; }
.hero__wrap { position: relative; width: 100%; max-width: 500px; margin: 0 auto 3rem; padding: 0 1rem; }
.hero__photo {
  position: relative; aspect-ratio: 853 / 1280; width: 100%; overflow: hidden;
  border-radius: 2px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.hero__logo { position: absolute; left: 50%; top: 52%; width: 11rem; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.hero__bottom {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1rem 1.25rem; text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.25), transparent);
}
.hero__verse { font-style: italic; color: #fff; letter-spacing: .025em; }
.hero__verse span { font-size: .875rem; }
.hero__bottom .countdown { margin-top: .75rem; }
@media (min-width: 640px) { .hero__logo { width: 14rem; } }

/* Cuenta regresiva */
.countdown { display: flex; align-items: flex-start; justify-content: center; gap: 1.5rem; }
.cd { display: flex; flex-direction: column; align-items: center; }
.cd__num { font-size: 3rem; line-height: 1; font-weight: 300; color: #000; }
.cd__lbl { margin-top: .25rem; font-size: .875rem; font-style: italic; color: rgba(0,0,0,.7); }
.countdown--light .cd__num { color: #fff; }
.countdown--light .cd__lbl { color: rgba(255,255,255,.8); }
@media (min-width: 640px) { .countdown { gap: 2.5rem; } .cd__num { font-size: 4.5rem; } }

/* Reproductor */
.player-wrap { width: 100%; max-width: 900px; margin: 0 auto 3rem; padding: 0 1rem; }
.player {
  display: flex; align-items: center; gap: .75rem; height: 50px; padding: .75rem 1.25rem;
  border-radius: 999px; background: var(--olive);
}
.player__btn { display: flex; flex-shrink: 0; align-items: center; justify-content: center; }
.player__btn .ic-pause, .player__btn .ic-muted { display: none; }
.player.playing .ic-play { display: none; }
.player.playing .ic-pause { display: block; }
.player.muted .ic-vol { display: none; }
.player.muted .ic-muted { display: block; }
.player__range { height: 4px; border-radius: 4px; background: rgba(255,255,255,.3); accent-color: #fff; cursor: pointer; }
.player__seek { flex: 1; min-width: 0; }
.player__vol { display: none; width: 5rem; }
.player__time { flex-shrink: 0; font-size: .75rem; color: #fff; }
@media (min-width: 640px) { .player__vol { display: block; } }

/* Tarjeta Mis XV Años */
.casamos { position: relative; width: 100%; max-width: 500px; margin: 0 auto 2rem; padding: 0 1rem; }
.casamos__inner { position: relative; width: 80%; margin: 0 auto; }
.casamos__inner img { width: 100%; height: auto; position: relative; z-index: 1; }
.casamos__shadow { width: 80%; height: 1.5rem; margin: -.75rem auto 0; border-radius: 999px; background: rgba(0,0,0,.5); filter: blur(16px); }

/* Collage */
.collage { display: flex; justify-content: center; padding: 2rem 1rem .5rem; }
.collage__box { width: 100%; max-width: 700px; background: #e7e5e4; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.collage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.collage__left { position: relative; grid-row: span 2; min-height: 320px; overflow: hidden; }
.collage__right { position: relative; height: 155px; overflow: hidden; }
@media (min-width: 640px) { .collage__left { min-height: 420px; } .collage__right { height: 205px; } }
@media (min-width: 768px) { .collage { padding: 3rem 1rem .75rem; } }

/* Nuestra historia */
.historia { display: flex; justify-content: center; padding: 4rem 1rem 2rem; }
.historia__card { position: relative; width: 100%; max-width: 500px; margin-top: 4rem; }
.historia__card > img:first-child { width: 100%; height: auto; }
.historia__seal { position: absolute; left: 50%; top: 0; width: 26%; transform: translate(-50%, -85%); }
@media (min-width: 768px) { .historia { padding: 5rem 1rem 3rem; } }

/* Itinerario */
.itinerario { padding: 4rem 1rem; }
.itinerario .heading { margin-bottom: 2.5rem; color: #000; }
.itinerario__list { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.it-card { position: relative; width: 100%; max-width: 600px; overflow: hidden; border-radius: 2px; box-shadow: 0 18px 30px -8px rgba(0,0,0,.5); }
.it-card__body { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1.5rem; text-align: center; }
.it-card__title { font-family: var(--f-heading); font-weight: 400; font-size: 1.5rem; letter-spacing: .025em; color: #fff; }
.it-card__place { margin-top: .75rem; font-size: .75rem; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,.9); }
.it-card__time { margin-top: .25rem; font-size: .75rem; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,.8); }
.it-card__icon { height: 3.5rem; width: auto; margin-top: 1rem; opacity: .9; }
@media (min-width: 640px) { .it-card__body { padding: 3rem 1.5rem; } .it-card__title { font-size: 1.875rem; } }
@media (min-width: 768px) { .itinerario { padding: 6rem 1rem; } }

/* Código de vestimenta */
.dress { padding: 4rem 1rem; background: url("../img/fondo-vestimenta.png") center / cover no-repeat; }
.dress__col { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.dress__codigo { width: 100%; max-width: 500px; height: auto; }
.dress__notes { max-width: 28rem; padding-left: 4rem; text-align: center; font-style: italic; color: #fecaca; line-height: 1.625; }
.dress__inspo { padding-left: 3rem; text-align: center; }
.dress__inspo .heading { margin-bottom: .75rem; color: #fff; }
.dress__inspo p { max-width: 28rem; margin: 0 auto; font-size: 1.125rem; font-style: italic; color: #fff; }
.dress__thumb { position: relative; width: 100%; max-width: 250px; overflow: hidden; border-radius: .5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.dress__thumb img { width: 100%; height: auto; }
.dress__thumb-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 0 1.5rem; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.4), transparent);
}
.dress__thumb-overlay span {
  padding: .5rem 1.25rem; border-radius: 999px; background: #fff; color: var(--olive);
  font-size: .75rem; font-weight: 600; letter-spacing: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.dress__adultos { width: 100%; max-width: 350px; height: auto; }
@media (min-width: 768px) { .dress { padding: 6rem 1rem; } }

/* Clima */
.weather { width: 100%; max-width: 24rem; color: #fff; }
.weather__city { text-align: center; font-size: .875rem; font-weight: 600; letter-spacing: 2px; }
.weather__now { margin-top: .5rem; display: flex; align-items: center; justify-content: space-between; }
.weather__temp { font-family: var(--f-heading); font-size: 2.25rem; }
.weather__now svg { width: 2.5rem; height: 2.5rem; }
.weather__label { max-width: 80px; text-align: right; font-size: .875rem; }
.weather__stats { margin-top: .75rem; padding-top: .75rem; display: flex; align-items: center; justify-content: center; gap: 1.25rem; border-top: 1px solid rgba(255,255,255,.3); font-size: .75rem; }
.weather__stats span { display: flex; align-items: center; gap: .25rem; }
.weather__stats svg { width: 1rem; height: 1rem; }
.weather__hours-wrap { position: relative; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.3); }
.weather__hours { display: flex; gap: 1rem; overflow-x: auto; padding: 0 1.5rem; scrollbar-width: none; }
.weather__hours::-webkit-scrollbar { display: none; }
.weather__hour { display: flex; flex-shrink: 0; flex-direction: column; align-items: center; gap: .25rem; font-size: .75rem; }
.weather__hour svg { width: 1.25rem; height: 1.25rem; }
.weather__arrow {
  position: absolute; top: 50%; z-index: 10; display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; transform: translateY(-50%); border-radius: 50%; background: rgba(0,0,0,.4); color: #fff;
}
.weather__arrow--l { left: -.5rem; }
.weather__arrow--r { right: -.5rem; }

/* Modal outfit inspo */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 0 1rem; background: rgba(0,0,0,.8); }
.modal__box { position: relative; width: 100%; max-width: 28rem; padding: .75rem; border-radius: .5rem; background: #fff; }
.modal__close {
  position: absolute; top: -.75rem; right: -.75rem; z-index: 10; display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff;
}
.modal__stage { position: relative; display: flex; align-items: center; justify-content: center; }
.modal__stage img { width: 100%; max-height: 75vh; object-fit: contain; border-radius: 4px; }
.modal__prev, .modal__next { position: absolute; }
.modal__prev { left: .25rem; }
.modal__next { right: .25rem; }
.modal__dots { margin-top: .75rem; display: flex; justify-content: center; gap: .5rem; }
.modal__dots button { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(0,0,0,.25); transition: background .2s; }
.modal__dots button.on { background: #000; }

/* Mesa de regalos */
.mesa { padding-top: 4rem; }
.mesa__wrap { width: 100%; max-width: 450px; margin: 0 auto; }
.mesa__header { position: relative; aspect-ratio: 1280 / 853; width: 100%; }
.mesa__body {
  padding: 2.5rem 1.5rem 3.5rem; text-align: center;
  background: url("../img/fondo-itinerario.png") center / cover;
}
.mesa__title { font-size: 1.875rem; letter-spacing: .025em; color: #fff; }
.mesa__text { max-width: 20rem; margin: 1rem auto 0; font-style: italic; line-height: 1.625; color: #fff; }
.mesa__hint { margin-top: 1.5rem; font-size: .875rem; font-style: italic; color: rgba(255,255,255,.8); }
@media (min-width: 768px) { .mesa { padding-top: 5rem; } }

.gifts { position: relative; height: 380px; margin: 2.5rem -1.5rem 0; overflow: hidden; touch-action: pan-y; }
.gift {
  position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column;
  width: 220px; height: 380px; overflow: hidden; border-radius: 1.5rem; background: #fff;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  transition: all .5s ease-in-out;
}
.gift__icon { display: flex; height: 256px; align-items: center; justify-content: center; overflow: hidden; padding: 0 1rem; }
.gift__foot { display: flex; flex: 1; align-items: center; justify-content: center; overflow: hidden; padding: .75rem; text-align: center; background: var(--accent); color: #fff; }
.gift__liverpool { width: 8rem; height: auto; margin: 0 auto; filter: brightness(0); }
.gift__card { width: 6rem; height: auto; }
.gift__mail { width: 5rem; height: 5rem; color: #000; }
.gift__small { font-size: .75rem; letter-spacing: .025em; color: rgba(255,255,255,.9); }
.gift__link { display: inline-block; margin-top: .5rem; font-size: .75rem; letter-spacing: 3px; }
.gift__bank { font-size: 1rem; font-weight: 600; }
.gift__label { margin-top: .5rem; font-size: .75rem; font-style: italic; color: rgba(255,255,255,.9); }
.gift__num { font-size: .875rem; }
.gift__copy { margin-top: .75rem; font-size: .75rem; letter-spacing: 2px; text-decoration: underline; text-underline-offset: 4px; }
.gift__msg { font-size: .75rem; line-height: 1.625; }
.gifts__prev, .gifts__next {
  position: absolute; top: 256px; z-index: 20; transform: translateY(-50%);
  background: rgba(0,0,0,.5); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); transition: background .2s;
}
.gifts__prev:hover, .gifts__next:hover { background: rgba(0,0,0,.7); }
.gifts__prev { left: 1rem; }
.gifts__next { right: 1rem; }
.gifts__dots { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.gifts__dots button { width: .5rem; height: .5rem; border-radius: 999px; background: rgba(255,255,255,.4); transition: all .3s; }
.gifts__dots button.on { width: 1.5rem; background: #fff; }

/* Galería */
.galeria { padding: 5rem 1rem; }
.galeria__title { margin-bottom: 2.5rem; font-size: 2.25rem; letter-spacing: .05em; }
.galeria__wrap { position: relative; max-width: 64rem; margin: 0 auto; }
.galeria__arrow {
  position: absolute; top: 50%; z-index: 10; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; transform: translateY(-50%); border-radius: 50%;
  background: rgba(255,255,255,.7); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); transition: background .2s;
}
.galeria__arrow:hover { background: rgba(255,255,255,.9); }
.galeria__arrow--l { left: .5rem; }
.galeria__arrow--r { right: .5rem; }
.galeria__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria__track::-webkit-scrollbar { display: none; }
.galeria__item { flex: none; width: 85vw; scroll-snap-align: center; }
.galeria__frame { position: relative; width: 100%; height: 450px; overflow: hidden; border-radius: .5rem; background: #000; }
.galeria__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) { .galeria__item { width: 48%; } }

/* Hospedaje */
.hospedaje { padding: 5rem 1rem; }
.hospedaje__main { position: relative; max-width: 500px; margin: 4rem auto; }
.hospedaje__main > img:first-child { width: 100%; height: auto; }
.hospedaje__seal { position: absolute; left: 50%; top: 0; width: 42%; transform: translate(-50%, -70%); }
.hotels { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3.5rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 768px) { .hotels { flex-direction: row; gap: 1.5rem; } }
.hotel { position: relative; width: 100%; max-width: 280px; margin: 0 auto; padding-top: 4rem; }
.hotel__photo { position: absolute; top: -.5rem; z-index: 0; width: 50%; padding: .375rem .375rem 1rem; background: #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.hotel__photo-in { position: relative; aspect-ratio: 4 / 3; width: 100%; }
.hotel--right .hotel__photo { right: .5rem; transform: rotate(9deg); }
.hotel--left .hotel__photo { left: .5rem; transform: rotate(-9deg); }
.hotel__flower { position: absolute; bottom: .5rem; z-index: 0; width: 5rem; height: auto; }
.hotel--right .hotel__flower { left: -.5rem; }
.hotel--left .hotel__flower { right: -.5rem; transform: scaleX(-1); }
.hotel__shield { position: relative; z-index: 10; aspect-ratio: 1303 / 1207; width: 100%; }
.hotel__shield-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hotel__info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 5rem 2.25rem 0; text-align: center; color: #fff; }
.hotel__info h3 { font-size: 1rem; font-weight: 400; line-height: 1.25; }
.hotel__info p { font-size: .75rem; color: rgba(255,255,255,.85); }
.hotel__info h3 + p { margin-top: .5rem; }

/* Confirmar asistencia */
.rsvp { padding: 5rem 1rem; }
.rsvp__wrap { max-width: 32rem; margin: 0 auto; text-align: center; }
.rsvp__h { color: #000; letter-spacing: .05em; }
.rsvp__script { margin-top: .25rem; font-size: 48px; }
.rsvp__lede { margin-top: 1.5rem; font-size: 18px; font-style: italic; color: #374151; }
.rsvp__form { margin-top: 2.5rem; text-align: left; display: flex; flex-direction: column; gap: 1.5rem; }
.rsvp__name { width: 100%; padding: .75rem 0; font-size: 16px; border-bottom: 1px solid #d1d5db; outline: none; transition: border-color .2s; }
.rsvp__name:focus, .rsvp__field:focus { border-color: var(--olive); }
.rsvp fieldset legend { margin-bottom: .5rem; }
.rsvp__radios { display: flex; gap: 1.5rem; }
.rsvp__radios label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.rsvp__radios input { accent-color: var(--olive); }
.rsvp__label { display: block; margin-bottom: .5rem; font-size: .875rem; color: #374151; }
.rsvp__field { width: 100%; padding: .75rem; border: 1px solid #d1d5db; outline: none; transition: border-color .2s; }
.rsvp__msg { min-height: 110px; resize: vertical; font-size: 16px; }
.rsvp__submit-wrap { padding-top: 1rem; text-align: center; }
.rsvp__submit { padding: 16px 48px; font-size: 16px; letter-spacing: 3px; color: #fff; background: var(--accent); transition: background .2s; }
.rsvp__submit:hover { background: var(--accent-dark); }
.rsvp__submit:disabled { opacity: .6; }
.rsvp__thanks { margin-top: 2.5rem; font-size: 1.125rem; font-style: italic; color: #374151; }