/* Invitación B5: apertura a pantalla completa y contenido revelado sobre blanco. */
.b5-invitation {
  --ink: #161616;
  --gold: #DDBA84;
  --ivory: #F8F8F8;
  --red: #A81424;
  --white: #FFFFFF;
  --muted: #625E57;
  --line: #D9D5CD;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--ivory);
  color: var(--ink);
  color-scheme: light;
  font-family: "Source Serif 4 Bashan", Georgia, serif;
  font-size: 16px;
  line-height: normal;
  font-synthesis: weight style small-caps;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.b5-invitation [hidden] { display: none !important; }
.b5-invitation img, .b5-invitation video, .b5-invitation svg { display: block; max-width: 100%; }
.b5-invitation a { color: inherit; }
.b5-invitation a.b5-primary { color: var(--white); }
.b5-invitation button, .b5-invitation a { -webkit-tap-highlight-color: transparent; }
.b5-invitation a:focus-visible, .b5-invitation button:focus-visible, .b5-invitation video:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.b5-invitation h1, .b5-invitation p { text-wrap: wrap; }
.b5-invitation h1 { font-family: "Vivita Bashan", sans-serif; font-weight: 500; }
.b5-eyebrow { margin: 0; display: flex; align-items: center; gap: 12px; font: 500 10px/1.35 "Vivita Bashan", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.b5-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--red); flex: none; }
.b5-primary { min-height: 56px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--red); border-radius: 999px; background: var(--red); color: var(--white); text-decoration: none; font: 500 13px/1.2 "Vivita Bashan", sans-serif; letter-spacing: .035em; cursor: pointer; transition: background 160ms var(--ease-out), transform 100ms var(--ease-out); }
.b5-primary:hover { background: #8F101F; border-color: #8F101F; }
.b5-primary:active { transform: scale(.98); }
.b5-primary svg { width: 20px; height: 20px; flex: none; }
.b5-cinema-frame :focus-visible { outline-color: var(--gold); }
.b5-fact-label { display: block; margin-bottom: 6px; font: 500 9px/1.3 "Vivita Bashan", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.b5-fact-value { display: block; font: 500 16px/1.35 "Vivita Bashan", sans-serif; }
.b5-fact-value a { color: inherit; text-decoration: underline; text-decoration-color: rgba(168, 20, 36, .55); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.b5-fact-value a:hover { text-decoration-color: var(--red); }

/* Sin JavaScript, el contenido permanece disponible después del fotograma. */
.b5-invitation-layout { position: relative; min-height: 100vh; min-height: 100dvh; }
.b5-cinema-frame { position: relative; height: 100vh; height: 100dvh; min-height: 640px; overflow: hidden; background: var(--ink); isolation: isolate; }
.b5-film-fallback, .b5-opening-film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.b5-film-fallback { z-index: -4; }
.b5-opening-film { z-index: -3; }
/* Precarga real: con JS el póster entra con un fundido suave y el video
   permanece transparente hasta canplaythrough (.is-listo). */
@keyframes b5-poster-in { from { opacity: 0; } to { opacity: 1; } }
html.js .b5-film-fallback { animation: b5-poster-in 800ms var(--ease-out) both; }
html.js .b5-opening-film { opacity: 0; transition: opacity 700ms var(--ease-out); }
html.js .b5-opening-film.is-listo { opacity: 1; }
/* El fotograma lleva dos velos: el grano de película (::before) y el gradiente (::after). */
.b5-cinema-frame::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--grano); opacity: .05; }
.b5-cinema-frame::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(22, 22, 22, .36) 0%, rgba(22, 22, 22, .02) 42%, rgba(22, 22, 22, .74) 100%); }
.b5-film-whiteout { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--white); opacity: 0; transition: opacity 600ms var(--ease-out); }
.b5-cinema-frame.is-fading .b5-film-whiteout, .b5-cinema-frame.is-finished .b5-film-whiteout, .b5-invitation.is-revealed .b5-film-whiteout { opacity: 1; }
.b5-invitation.is-skipped .b5-film-whiteout { transition: none; }

/* El sobre: oculto hasta que el video está listo (.is-lista), con fundido. */
.b5-envelope-intro { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 32px 24px; background: linear-gradient(180deg, rgba(22, 22, 22, .12) 0%, rgba(22, 22, 22, .18) 42%, rgba(22, 22, 22, .58) 100%); color: var(--ivory); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 520ms var(--ease-out), visibility 0s linear 520ms; }
.b5-envelope-intro.is-lista { opacity: 1; visibility: visible; transition: opacity 520ms var(--ease-out), visibility 0s linear 0s; }
.b5-envelope-intro.is-opening { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 480ms var(--ease-out), visibility 0s linear 480ms; }
.b5-intro-center { display: flex; flex-direction: column; align-items: center; text-align: center; animation: b5-intro-fade 700ms var(--ease-out) both; }
/* El botón de abrir reposa a media opacidad y sube al pasar o enfocar. */
.b5-envelope-open { min-width: 216px; min-height: 60px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--red); border-radius: 999px; background: var(--red); color: var(--white); font: 500 14px/1.2 "Vivita Bashan", sans-serif; letter-spacing: .025em; cursor: pointer; pointer-events: auto; box-shadow: 0 10px 34px rgba(22, 22, 22, .24); opacity: .5; transition: background 160ms var(--ease-out), transform 160ms var(--ease-out), opacity 240ms var(--ease-out); }
.b5-envelope-open:hover, .b5-envelope-open:focus-visible { background: #8F101F; border-color: #8F101F; opacity: 1; }
.b5-envelope-open:active { transform: scale(.98); }
.b5-envelope-open:disabled { cursor: wait; }
.b5-envelope-open svg { width: 20px; height: 20px; }
@keyframes b5-intro-fade { from { opacity: 0; } to { opacity: 1; } }

/* Reproducción inmersiva: durante el cine no se ve ningún control.
   Saltar sigue disponible con clic/toque sobre el video, Espacio o Escape,
   y con Tab hasta un control de saltar visible solo para teclado. */
.b5-invitation.is-cinematic:not(.is-revealed) .b5-film-controls { opacity: 0; visibility: hidden; }
.b5-film-skip { position: absolute; top: 20px; right: 32px; z-index: 6; min-width: 44px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(248, 248, 248, .55); border-radius: 999px; background: rgba(22, 22, 22, .28); color: var(--ivory); font: 500 10px/1 "Vivita Bashan", sans-serif; letter-spacing: .06em; cursor: pointer; transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), opacity 240ms var(--ease-out); }
.b5-film-skip:hover { border-color: var(--gold); background: rgba(22, 22, 22, .56); }
.b5-invitation.is-cinematic:not(.is-revealed) .b5-film-skip { opacity: 0; pointer-events: none; }
.b5-invitation.is-cinematic:not(.is-revealed) .b5-film-skip:focus-visible { opacity: 1; pointer-events: auto; }
.b5-film-controls { position: absolute; left: 32px; right: 32px; bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--ivory); transition: color 600ms var(--ease-out); }
.b5-film-play { min-width: 48px; min-height: 48px; padding: 0; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 12px; border: 0; background: transparent; color: inherit; font: 500 12px/1.2 "Vivita Bashan", sans-serif; letter-spacing: .035em; cursor: pointer; }
.b5-play-symbol { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(248, 248, 248, .64); border-radius: 50%; transition: border-color 600ms var(--ease-out); }
.b5-play-symbol svg { width: 16px; height: 16px; }
.b5-film-play:hover .b5-play-symbol { border-color: var(--gold); color: var(--gold); }
.b5-film-duration { max-width: 48%; text-align: right; font-size: 13px; line-height: 1.35; color: rgba(248, 248, 248, .82); transition: color 600ms var(--ease-out); }
.b5-cinema-frame.is-fading .b5-film-controls,
.b5-cinema-frame.is-finished .b5-film-controls,
.b5-invitation.is-revealed .b5-film-controls,
.b5-invitation.is-revealed .b5-film-duration { color: var(--ink); }
.b5-cinema-frame.is-fading .b5-play-symbol, .b5-cinema-frame.is-finished .b5-play-symbol, .b5-invitation.is-revealed .b5-play-symbol { border-color: rgba(22, 22, 22, .55); }
.b5-invitation.is-revealed .b5-cinema-frame :focus-visible { outline-color: var(--red); }

/* La revelación ocupa la misma pantalla; el contenido no depende de JS para existir. */
.b5-invitation-copy { position: relative; z-index: 2; min-width: 0; padding: 48px 32px 104px; display: flex; background: var(--white); pointer-events: none; }
.b5-invitation-copy:focus-visible { outline: 3px solid var(--red); outline-offset: -6px; }
/* Revelado a dos columnas: foto del backing a la izquierda, texto a la derecha.
   La foto entra con el mismo fundido del revelado (vive dentro del contenedor). */
.b5-invitation-reveal { width: 100%; max-width: 1060px; margin: auto; pointer-events: auto; display: grid; grid-template-columns: minmax(0, 23fr) minmax(0, 26fr); gap: 56px; align-items: stretch; }
.b5-reveal-foto { position: relative; margin: 0; min-height: 300px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--ivory); box-shadow: 0 18px 44px rgba(22, 22, 22, .10); }
.b5-reveal-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 55%; }
.b5-reveal-texto { min-width: 0; align-self: center; }
.b5-invitation.is-cinematic .b5-invitation-copy { position: absolute; inset: 0; background: transparent; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s linear 280ms; padding-top: 108px; overflow-y: auto; }
.b5-invitation.is-cinematic.is-revealed .b5-invitation-copy { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.b5-invitation-copy .b5-eyebrow { color: var(--muted); }
.b5-invitation-copy h1 { margin: 20px 0 0; font-size: var(--fl-h1); line-height: 1.035; letter-spacing: -.024em; }
.b5-event-lockup { margin-top: 28px; padding: 20px 0; display: grid; grid-template-columns: 142px 1fr; gap: 24px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.b5-event-date { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.b5-event-day { font: 500 68px/.8 "Vivita Bashan", sans-serif; letter-spacing: -.055em; }
.b5-event-month { font: 500 17px/1.05 "Vivita Bashan", sans-serif; letter-spacing: .1em; }
.b5-event-month small { display: block; margin-top: 8px; font: 500 12px/1 "Vivita Bashan", sans-serif; letter-spacing: .15em; color: var(--red); }
.b5-event-facts { display: grid; gap: 12px; }
.b5-event-fact .b5-fact-label { color: var(--muted); }
.b5-invitation-include { margin: 20px 0 0; font-size: 17px; line-height: 1.45; color: var(--muted); }
.b5-invitation-include strong { color: var(--ink); font-weight: 600; }
.b5-cupo:empty { display: none; }
.b5-invitation-offer { margin-top: 24px; display: grid; grid-template-columns: 150px minmax(0, 360px); gap: 20px; align-items: center; justify-content: space-between; }
.b5-offer-price strong { display: block; font: 500 42px/.95 "Vivita Bashan", sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.b5-offer-price span { display: block; margin-top: 8px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.b5-invitation-offer .b5-primary { width: 100%; }

@media (max-width: 1100px) and (min-width: 768px) {
  .b5-invitation-copy { padding: 40px 32px 104px; }
  .b5-invitation.is-cinematic .b5-invitation-copy { padding-top: 100px; }
  .b5-invitation-reveal { gap: 36px; }
  .b5-film-skip { top: 12px; right: 24px; }
  .b5-film-controls { left: 24px; right: 24px; }
}
@media (max-width: 767px) {
  .b5-eyebrow { font-size: 9px; letter-spacing: .13em; gap: 8px; }
  .b5-eyebrow::before { width: 18px; }
  .b5-primary { min-height: 52px; font-size: 12px; }
  .b5-cinema-frame, .b5-invitation-layout { min-height: 680px; }
  .b5-film-skip { top: 10px; right: 22px; padding: 0 12px; font-size: 9px; }
  .b5-film-controls { left: 24px; right: 24px; bottom: 16px; }
  .b5-film-play { min-height: 44px; font-size: 11px; }
  .b5-play-symbol { width: 36px; height: 36px; }
  .b5-film-duration { font-size: 11px; }
  .b5-invitation-copy { padding: 24px 24px 96px; }
  .b5-invitation.is-cinematic .b5-invitation-copy { padding-top: 96px; }
  /* En móvil el revelado apila: foto arriba, texto abajo. */
  .b5-invitation-reveal { grid-template-columns: 1fr; gap: 24px; }
  .b5-reveal-foto { min-height: 0; aspect-ratio: 16 / 10; }
  .b5-invitation-copy h1 { margin-top: 12px; }
  .b5-event-lockup { margin-top: 16px; padding: 12px 0; grid-template-columns: 108px 1fr; gap: 16px; }
  .b5-event-day { font-size: 48px; }
  .b5-event-month { font-size: 13px; }
  .b5-event-month small { margin-top: 5px; font-size: 9px; }
  .b5-event-facts { gap: 8px; }
  .b5-fact-label { font-size: 8px; margin-bottom: 4px; }
  .b5-fact-value { font-size: 13px; }
  .b5-invitation-include { margin-top: 12px; font-size: 14px; line-height: 1.35; }
  .b5-invitation-offer { margin-top: 16px; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; }
  .b5-offer-price strong { font-size: 33px; }
  .b5-offer-price span { margin-top: 5px; font-size: 10px; }
  .b5-invitation-offer .b5-primary { padding: 0 16px; gap: 12px; }
}
@media (max-width: 370px) {
  .b5-invitation-copy { padding-left: 20px; padding-right: 20px; }
  .b5-event-lockup { grid-template-columns: 98px 1fr; gap: 12px; }
  .b5-invitation-offer { grid-template-columns: 84px 1fr; gap: 10px; }
  .b5-primary { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .b5-invitation { scroll-behavior: auto; }
  .b5-primary, .b5-film-whiteout, .b5-film-controls, .b5-film-duration, .b5-play-symbol, .b5-invitation-copy, .b5-envelope-intro, .b5-envelope-open { transition: none; }
  .b5-intro-center { animation: none; }
  .b5-primary:active, .b5-envelope-open:active, .b5-envelope-open:hover { transform: none; }
}
@media (prefers-contrast: more) {
  .b5-invitation { --muted: #45413D; --line: #817B73; }
}