/* Catálogo: teléfono con flechas para recorrer las pantallas de cada diseño. */
.product__media { aspect-ratio: auto; padding: 28px 0 18px; display: block; }
.product h3 a { text-decoration: none; }
.product h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

.switch { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "prev phone next" "cap cap cap"; align-items: center; justify-items: center; row-gap: 14px; }
.switch .phone--product { grid-area: phone; width: 200px; max-width: 100%; touch-action: pan-y; cursor: grab; user-select: none; }
.switch .phone--product:active { cursor: grabbing; }
.phone--switch .phone__screen::after { display: none; }
.phone--switch .phone__status, .phone--switch .phone__home { z-index: 3; transition: color .3s, background .3s; }
.phone--switch.is-light .phone__status { color: var(--rose-ink); }
.phone--switch.is-light .phone__home { background: var(--rose-ink); }

.switch__arrow { width: 40px; height: 40px; border: 0; background: none; color: var(--night, #1f1a1a); cursor: pointer; position: relative; opacity: .75; transition: opacity .2s, transform .2s; }
.switch__arrow--prev { grid-area: prev; }
.switch__arrow--next { grid-area: next; }
.switch__arrow::before { content: ''; position: absolute; left: 9px; right: 9px; top: 50%; height: 1.5px; background: currentColor; }
.switch__arrow::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.switch__arrow--prev::after { left: 9px; transform: translateY(-50%) rotate(-45deg); }
.switch__arrow--next::after { right: 9px; transform: translateY(-50%) rotate(135deg); }
.switch__arrow:hover { opacity: 1; }
.switch__arrow--prev:hover { transform: translateX(-2px); }
.switch__arrow--next:hover { transform: translateX(2px); }

.switch__caption { grid-area: cap; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.switch__name { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.switch__dots { display: flex; gap: 6px; }
.switch__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(150, 130, 120, .35); transition: background .2s, width .2s; }
.switch__dots i.is-on { width: 16px; border-radius: 3px; background: var(--gold, #b08d57); }

/* Pantalla de confirmación con pases válidos */
.tscreen--rsvp { padding-top: 14cqi; gap: 2.4cqi; }
.tscreen__band { align-self: stretch; margin: 0 -8cqi 2cqi; padding: 4cqi 8cqi; text-align: center; font-size: 3.6cqi; line-height: 1.35; background: #b8a596; color: #fff; }
.tscreen__script { font-family: var(--script); font-size: 10cqi; line-height: 1.1; text-align: center; }
.tscreen__ticket svg { width: 10cqi; height: 10cqi; color: var(--rose-ink); }
.tscreen__valid { font-size: 4cqi; color: var(--muted); }
.tscreen__passes { font-weight: 500; font-size: 5.6cqi; margin-top: -1.5cqi; }
.tscreen__label--center { align-self: center; margin-top: 1cqi; }
.tscreen__select { min-width: 20cqi; text-align: center; padding: 1.6cqi 6cqi 1.6cqi 4cqi; border: 1px solid var(--line); font-size: 4cqi; position: relative; }
.tscreen__select::after { content: ''; position: absolute; right: 2.2cqi; top: 50%; width: 1.6cqi; height: 1.6cqi; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); }
.tscreen--rsvp .tscreen__btn { margin-top: 2cqi; padding: 3.2cqi; }
.tscreen--rsvp .tscreen__btn--ghost { margin-top: 0; background: transparent; color: var(--rose-ink); border: 1px solid var(--rose-ink); }

@media (max-width: 560px) {
  .switch { grid-template-columns: 28px minmax(0, 1fr) 28px; }
  .switch__arrow { width: 28px; }
  .switch__arrow::before { left: 4px; right: 4px; }
  .switch__arrow--prev::after { left: 4px; }
  .switch__arrow--next::after { right: 4px; }
  .switch__name { font-size: .64rem; letter-spacing: .12em; }
}

/* Invitación real dentro del teléfono del catálogo */
.cat-phone { width: 210px; }
.cat-screen { background: #f4efe8; }
.cat-frame { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform: scale(var(--cat-scale, .5213)); transform-origin: 0 0; pointer-events: none; }
.cat-shield { position: absolute; inset: 0; z-index: 2; cursor: pointer; touch-action: pan-y; }
.cat-screen .phone__island { z-index: 3; }
.cat-progress { width: 90px; height: 2px; background: rgba(150, 130, 120, .25); border-radius: 2px; overflow: hidden; }
.cat-progress i { display: block; height: 100%; width: 6%; background: var(--gold, #b08d57); transition: width .35s; }
.product__desc { margin: 0 0 6px; font-size: .9rem; color: var(--muted); }
.product__actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.product__cta { display: inline-block; padding: .7em 1.4em; border-radius: 99px; background: var(--night, #1f1a1a); color: #fff; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .2s; }
.product__cta:hover { background: #3a2a2c; }

/* Tarjeta como el boceto: fondo cálido, nombre en mayúsculas serif y barra de avance */
.product__media { background: #ebe4dc; border-radius: 4px; padding: 34px 0 22px; }
.cat-phone { width: 230px; }
.cat-frame { transform: scale(var(--cat-scale, .5708)); }
.cat-title { font-family: var(--serif, 'Playfair Display', serif); font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; color: var(--night, #1f1a1a); }
.cat-progress { width: 140px; }
.switch__caption .switch__name { font-size: .64rem; letter-spacing: .22em; }
.switch__arrow { opacity: .85; }
.product__desc { margin-top: 14px; }

/* Pantallas grandes: catálogo centrado y teléfono que crece con la tarjeta. */
.shop { max-width: 1440px; margin-inline: auto; }
.cat-phone { width: clamp(200px, 64%, 290px); }