/* Secciones añadidas: aviso, promesas, recorrido, reseñas, cierre y pie. */

.skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: .6em 1em; background: var(--rose-ink); color: var(--paper); }
.skip:focus { top: 12px; }

.announce { height: var(--announce-h); margin: 0; display: grid; place-items: center; padding: 0 16px; background: var(--rose-ink); color: var(--blush); font-size: .82rem; letter-spacing: .03em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Promesas bajo la portada */
.promises { list-style: none; margin: 0; padding: 34px var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-bottom: 1px solid var(--line); }
.promises li { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; border-left: 1px solid var(--blush); }
.promises strong { font-weight: 500; font-size: 1rem; }
.promises span { font-size: .92rem; color: var(--muted); line-height: 1.5; }
.shop__sub { color: var(--muted); margin: 10px 0 0; }

/* Recorrido del producto */
.tour-wrap { padding: clamp(72px, 10vw, 128px) var(--gutter); background: var(--rose-ink); color: var(--paper); overflow: hidden; }
.tour-wrap__head { max-width: 34em; margin-bottom: 48px; }
.tour-wrap__head p { color: rgba(255, 250, 248, .7); margin: 12px 0 0; }
.tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.tour__list { display: flex; flex-direction: column; }
.tour__item { text-align: left; font: inherit; color: inherit; background: none; border: 0; border-top: 1px solid rgba(255, 250, 248, .16); padding: 22px 0 22px 24px; cursor: pointer; position: relative; display: grid; gap: 4px; }
.tour__item:last-child { border-bottom: 1px solid rgba(255, 250, 248, .16); }
.tour__item::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; background: var(--blush); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.tour__item[aria-selected="true"]::before { transform: scaleY(1); }
.tour__title { font-size: 1.3rem; font-weight: 300; opacity: .6; transition: opacity .25s; }
.tour__text { font-size: .95rem; color: rgba(255, 250, 248, .7); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s; }
.tour__item[aria-selected="true"] .tour__title, .tour__item:hover .tour__title { opacity: 1; }
.tour__item[aria-selected="true"] .tour__text { max-height: 5em; opacity: 1; }
.tour__item:focus-visible { outline-color: var(--blush); }
.tour__stage { display: grid; place-items: center; padding: 20px 0; background: radial-gradient(closest-side, rgba(243, 201, 196, .22), transparent); }
.phone--tour { width: clamp(250px, 24vw, 340px); }
.phone--tour .phone__screen::after { display: none; }
.phone--tour .phone__status, .phone--tour .phone__home { z-index: 3; transition: color .3s, background .3s; }
.phone--tour.is-light .phone__status { color: var(--rose-ink); }
.phone--tour.is-light .phone__home { background: var(--rose-ink); }

/* Pantallas dentro del teléfono del recorrido */
.tscreen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; transition: opacity .35s var(--ease); }
.tscreen.is-hidden { opacity: 0; pointer-events: none; }
.tscreen--photo { color: #fff; }
.tscreen--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tscreen--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)); }
.tscreen__cover, .tscreen__guest { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tscreen__cover { margin-top: 26cqi; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.tscreen__kicker { font-size: 3.8cqi; letter-spacing: .3em; text-transform: uppercase; }
.tscreen__names { font-family: var(--script); font-size: 13cqi; line-height: 1.2; }
.tscreen__date { font-size: 4.2cqi; letter-spacing: .25em; }
.tscreen__guest { margin: auto 0 12cqi; padding: 4cqi 7cqi; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tscreen__guest small { font-size: 3cqi; letter-spacing: .14em; text-transform: uppercase; }
.tscreen__guest strong { font-weight: 400; font-size: 6cqi; }
.tscreen__guest span { font-size: 4cqi; }
.tscreen--paper { background: var(--paper); color: var(--rose-ink); padding: 22cqi 8cqi 10cqi; gap: 4cqi; }
.tscreen__title { font-size: 7.5cqi; font-weight: 300; margin-bottom: 2cqi; }
.tscreen__count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5cqi; width: 100%; }
.tscreen__count span { display: flex; flex-direction: column; align-items: center; padding: 3.5cqi 0; border: 1px solid var(--line); }
.tscreen__count b { font-weight: 300; font-size: 8cqi; line-height: 1.1; color: var(--rosewood); }
.tscreen__count small { font-size: 3.2cqi; color: var(--muted); }
.tscreen__note { font-family: var(--script); font-size: 9cqi; color: var(--rosewood); }
.tscreen__pill, .tscreen__btn { margin-top: auto; width: 100%; text-align: center; padding: 4cqi; font-size: 4cqi; letter-spacing: .04em; background: var(--rose-ink); color: var(--paper); }
.tscreen__timeline { list-style: none; padding: 0; margin: 0; width: 100%; }
.tscreen__timeline li { display: grid; grid-template-columns: 15cqi 1fr; gap: 3cqi; padding: 4.5cqi 0; border-bottom: 1px solid var(--line); }
.tscreen__timeline time { font-size: 4.4cqi; color: var(--rosewood); }
.tscreen__timeline div { display: flex; flex-direction: column; align-items: flex-start; gap: .6cqi; }
.tscreen__timeline b { font-weight: 500; font-size: 4.6cqi; }
.tscreen__timeline small { font-size: 3.6cqi; color: var(--muted); }
.tscreen__map { margin-top: 1.5cqi; font-size: 3.2cqi; padding: 1.2cqi 3.5cqi; border: 1px solid var(--rose-ink); }
.tscreen__label { align-self: flex-start; font-size: 3.8cqi; color: var(--muted); margin-top: 2cqi; }
.tscreen__choice { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5cqi; width: 100%; }
.tscreen__choice span { text-align: center; padding: 3.5cqi 0; font-size: 3.8cqi; border: 1px solid var(--line); }
.tscreen__choice .is-on { border-color: var(--rosewood); color: var(--rosewood); background: var(--blush-soft); }
.tscreen__stepper { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid var(--line); padding: 2cqi 5cqi; font-size: 6cqi; }
.tscreen__stepper b { font-weight: 400; }
.tscreen__ok { font-size: 3.6cqi; color: #4c7a55; }
.tscreen__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqi; width: 100%; }
.tscreen__grid img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.tscreen__music { margin-top: auto; display: flex; align-items: center; gap: 4cqi; width: 100%; padding: 3.5cqi; background: var(--blush-soft); }
.tscreen__play { width: 9cqi; height: 9cqi; border-radius: 50%; background: var(--rose-ink); position: relative; flex: none; }
.tscreen__play::after { content: ''; position: absolute; left: 37%; top: 30%; border-left: 3cqi solid var(--paper); border-block: 2cqi solid transparent; }
.tscreen__music div { flex: 1; display: flex; flex-direction: column; gap: 1.5cqi; }
.tscreen__music b { font-weight: 500; font-size: 3.8cqi; }
.tscreen__bar { height: .9cqi; background: rgba(58, 42, 44, .15); }
.tscreen__bar i { display: block; height: 100%; width: 38%; background: var(--rosewood); }

/* Reseñas (solo si hay reales en config.js) */
.quotes { padding: clamp(72px, 10vw, 128px) var(--gutter); }
.quotes h2 { margin-bottom: 40px; }
.quotes__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.quote { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.quote__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.quote blockquote { margin: 0; font-size: 1.2rem; font-weight: 300; line-height: 1.5; }
.quote figcaption { display: flex; flex-direction: column; font-size: .92rem; }
.quote figcaption span { color: var(--muted); }

/* Cierre con foto */
.closing { position: relative; min-height: 560px; display: grid; align-items: end; color: #fff; overflow: hidden; background: var(--mauve); }
.closing__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.closing::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58, 42, 44, .78), rgba(58, 42, 44, .25) 65%, rgba(58, 42, 44, 0)); }
.closing__text { position: relative; z-index: 1; padding: clamp(56px, 8vw, 104px) var(--gutter); max-width: 40em; }
.closing h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 14px; }
.closing p { font-size: 1.1rem; opacity: .9; }
.closing__btn { display: inline-block; margin-top: 10px; padding: 1em 2em; background: var(--paper); color: var(--rose-ink); text-decoration: none; font-weight: 500; letter-spacing: .02em; transition: background .2s; }
.closing__btn:hover { background: var(--blush); }

/* Pie */
.footer { padding: 72px var(--gutter) 32px; background: var(--rose-ink); color: rgba(255, 250, 248, .72); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 250, 248, .12); }
.footer__brand { font-weight: 200; font-size: 2.6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); margin: 0 0 10px; line-height: 1; }
.footer__about p:last-child { max-width: 22em; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h3 { font-size: .95rem; font-weight: 500; color: var(--paper); margin-bottom: 6px; }
.footer a { color: rgba(255, 250, 248, .72); text-decoration: none; }
.footer a:hover { color: var(--paper); }
.footer__legal { font-size: .82rem; margin: 24px 0 0; opacity: .7; }

@media (max-width: 1080px) {
  .promises { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  .tour { grid-template-columns: 1fr; }
  .tour__stage { order: -1; }
}
@media (max-width: 560px) {
  .announce { font-size: .74rem; }
  .promises { grid-template-columns: 1fr; gap: 20px; }
  .phone--tour { width: 240px; }
  .closing { min-height: 480px; }
  .closing::after { background: linear-gradient(0deg, rgba(58, 42, 44, .85), rgba(58, 42, 44, .2) 75%); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}