/* HOMY & CESAR — DEV06. Fade de opacidad 0% a 100% vinculado al video. */
:root {
  color-scheme: light;
  --paper: #eee9df;
  --ink: #262320;
  --fade: 500ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*,*::before,*::after { box-sizing:border-box; }
html { height:100%; background:#ddd8ce; }
body { min-height:100%; margin:0; background:#ddd8ce; -webkit-font-smoothing:antialiased; overflow:hidden; }
button { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.invitation {
  position:relative; isolation:isolate; overflow:hidden;
  width:min(100%,470px); height:100vh; height:100dvh; min-height:320px;
  margin-inline:auto; background:var(--paper); box-shadow:0 0 65px rgba(46,35,21,.13);
}
.music-toggle[hidden] { display:none !important; }
.music-toggle {
  position:fixed; z-index:10;
  right:max(calc(env(safe-area-inset-right, 0px) + 12px), calc((100vw - 470px) / 2 + 12px));
  bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:10px; border:1px solid rgba(60,57,53,.18); border-radius:50%;
  background:rgba(238,233,223,.8); color:#3c3935; cursor:pointer;
  box-shadow:0 2px 8px rgba(46,35,21,.08);
  -webkit-tap-highlight-color:transparent;
}
.music-toggle svg { display:block; width:18px; height:18px; }
.music-toggle .music-toggle__pause,
.music-toggle.is-playing .music-toggle__play { display:none; }
.music-toggle.is-playing .music-toggle__pause { display:block; }
.music-toggle:focus-visible { outline:2px solid #3c3935; outline-offset:3px; }
.music-toggle:active { background:var(--paper); }
.screen {
  position:absolute; inset:0; overflow:hidden; opacity:0; visibility:hidden;
  pointer-events:none; background:var(--paper);
  transition:opacity var(--fade) ease, visibility 0s linear var(--fade);
}
.screen.is-active { opacity:1; visibility:visible; pointer-events:auto; transition:opacity var(--fade) ease,visibility 0s; }
.screen--intro { z-index:2; }
.screen--story { z-index:1; background:#d5e0e7; }
.screen--intro.is-leaving { opacity:0; pointer-events:none; }
.media-fill { position:absolute; display:block; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; user-select:none; -webkit-user-select:none; }
.intro__poster { z-index:0; }
.intro__video { z-index:1; }
.intro__final, .story__final { z-index:2; opacity:0; pointer-events:none; transition:opacity 100ms ease; }
.intro__final.is-shown,.story__final.is-shown { opacity:1; }

/* Fuentes web de las familias exactas; fallback local = imágenes compuestas con los TTF enviados. */
.type-live { display:none; }
.type-fallback { display:block; width:100%; height:auto; }
.fonts-aboreto .story__names .type-live,
.fonts-aboreto .story__date .type-live,
.fonts-josefin .intro__start .type-live { display:block; }
.fonts-aboreto .story__names .type-fallback,
.fonts-aboreto .story__date .type-fallback,
.fonts-josefin .intro__start .type-fallback { display:none; }

/* Portada: INICIO sin caja ni negrita/cursiva. Se ve tras formarse el sello. */
.intro__start {
  position:absolute; z-index:3; left:50%; top:69.5%;
  transform:translate(-50%, 10px);
  min-width:115px; min-height:55px; padding:12px 14px;
  display:flex; align-items:center; justify-content:center;
  border:0; outline:0; background:transparent; color:#3c3935;
  font-family:'Josefin Sans', sans-serif; font-size:clamp(27px,7.3vw,36px);
  font-style:normal; font-weight:300; letter-spacing:.045em; line-height:1;
  text-align:center; cursor:pointer; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 950ms ease,transform 1100ms var(--ease), visibility 0s linear 950ms;
  -webkit-tap-highlight-color:transparent;
}
.intro__start .type-fallback { width:clamp(86px,24vw,107px); }
.intro__start.is-visible {
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  transition:opacity 950ms ease,transform 1100ms var(--ease),visibility 0s;
}
.intro__start:focus-visible { outline:1px solid rgba(75,65,55,.6); outline-offset:2px; }
.intro__start:not(:disabled):active { opacity:.55; }

/* Segundo video: bloque tipográfico en cielo, como el storyboard proporcionado. */
.story__video { z-index:0; opacity:0; transition:opacity 500ms ease; }
/* Desplazar ligeramente la imagen hacia la derecha sin mover el texto.
   Object-position 40% muestra un poco más del costado izquierdo del video. */
.story__video,.story__final { object-position:43% center; }
.story__copy { opacity:0; transition:opacity 500ms ease; }
.screen--story.is-visible .story__video,
.screen--story.is-visible .story__copy { opacity:1; }
/* La imagen final NUNCA debe tapar el video mientras se reproduce. */
.screen--story .story__final { opacity:0; }
.screen--story .story__final.is-shown { opacity:1; }
.story__copy {
  z-index:3; position:absolute; inset:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  padding:calc(env(safe-area-inset-top, 0px) + clamp(18px,3.5dvh,31px)) 12px 0;
  color:#141414; text-align:center;
  font-family:'Aboreto',serif; font-weight:400;
}
.story__names { margin:0; font-size:clamp(16px,4.35vw,21.5px); font-weight:400; line-height:1.2; letter-spacing:0; white-space:nowrap; }
.story__names .type-fallback { width:clamp(156px,46vw,208px); }
.story__art { margin:8px 0 0; line-height:0; width:clamp(118px,35.5vw,166px); }
.story__art img { display:block; width:100%; height:auto; object-fit:contain; }
.story__date { margin:6px 0 0; font-size:clamp(12.5px,3.75vw,17px); font-weight:400; line-height:1.3; letter-spacing:0; white-space:nowrap; }
.story__date .type-fallback { width:clamp(178px,53vw,223px); }
/* Cada bloque empieza completamente transparente. JS asigna la opacidad
   progresiva por fotograma (0.0000, 0.0001, … 1.0000). Ninguna transición
   ni librería externa puede hacer que salte de 0 a 1 instantáneamente. */
#story .story-reveal {
  opacity: 0;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: opacity;
}

.story__scroll-hint[hidden] { display:none !important; }
.story__scroll-hint {
  position:absolute; z-index:5; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 26px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px; min-width:142px; border:0; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; cursor:pointer; opacity:0; pointer-events:none; box-shadow:0 8px 30px rgba(0,0,0,.10);
  transition:opacity 600ms ease, transform 600ms ease;
  -webkit-tap-highlight-color:transparent;
}
.story__scroll-hint.is-visible { opacity:1; pointer-events:auto; }
.story__scroll-hand { display:flex; align-items:center; justify-content:center; width:30px; height:30px; color:#fff; filter:drop-shadow(0 2px 6px rgba(16,16,16,.22)); opacity:.97; }
.story__scroll-hand svg { display:block; width:28px; height:28px; animation:storyHintFloat 1.65s ease-in-out infinite; }
.story__scroll-text { font:300 13px/1 'Josefin Sans', sans-serif; letter-spacing:.11em; text-transform:uppercase; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.18); }
.story__scroll-hint:focus-visible { outline:2px solid rgba(255,255,255,.65); outline-offset:3px; }
@keyframes storyHintFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }

@media (min-width: 600px) {
  .intro__start { font-size:33px; }
  .story__names { font-size:20px; }
  .story__date { font-size:16.5px; }
}
@media (max-height: 540px) {
  .story__copy { padding-top:14px; }
  .story__art { width:clamp(104px,31vw,126px); margin-top:5px; }
  .story__names { font-size:15.5px; }
  .story__date { margin-top:4px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .screen,.screen.is-active,.intro__start,.intro__start.is-visible,
  .intro__final,.story__final { transition-duration:.01ms!important; }
}


/* Reproducción alternativa cuando el navegador bloquea autoplay local. */
.intro__play-prompt[hidden] { display: none !important; }
.intro__play-prompt {
  z-index:4; position:absolute; left:50%; top:80%;
  transform:translate(-50%, 8px);
  display:flex; justify-content:center; align-items:center; gap:9px;
  width:max-content; max-width:85%; padding:13px 18px;
  border:1px solid rgba(55,49,42,.48); border-radius:1px;
  background:rgba(239,233,220,.56); color:#39352f;
  font-family:'Josefin Sans', sans-serif; font-weight:400;
  font-size:12px; letter-spacing:.12em; cursor:pointer;
  opacity:0; transition:opacity .55s ease,transform .55s ease;
  -webkit-tap-highlight-color:transparent;
}
.intro__play-prompt.is-visible { opacity:1; transform:translate(-50%,0); }
.intro__play-prompt .play-icon { font-size:10px; }
.intro__play-prompt:focus-visible {outline:2px solid #5c554e; outline-offset:3px;}


/* DEV07: Scroll interno entre ESCENA 2 y ESCENA 3, oculto durante la portada. */
.invitation { scrollbar-width:none; scroll-behavior:smooth; }
.invitation::-webkit-scrollbar { display:none; }
.invitation.is-entered { overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; }
.screen--story,.screen--ocean { position:relative; inset:auto; width:100%; height:100%; min-height:100%; }
.screen--intro { position:absolute; inset:0; }
.screen--ocean { z-index:0; background:#d9c6a8; }
.invitation.is-entered .screen--ocean { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 0ms, visibility 0ms; }
.ocean__poster { z-index:0; }
.ocean__video { z-index:1; }
.ocean__veil { position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,rgba(235,222,201,.14),rgba(233,216,188,.04) 52%,rgba(8,29,31,.06)); pointer-events:none; }
.ocean__content {
 z-index:3; position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
 display:flex; align-items:center; flex-direction:column;
 color:#632c27; text-align:center;
 padding-top:calc(env(safe-area-inset-top,0px) + clamp(65px,11.1dvh,105px));
}
.ocean__content--simple { justify-content:flex-start; padding-top:calc(env(safe-area-inset-top,0px) + clamp(88px,15.5dvh,148px)); padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(20px,6dvh,50px)); }
.ocean__group { margin:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ocean__eyebrow { font:400 clamp(16px,4.3vw,21px)/1.1 'Aboreto',serif; }
.ocean__eyebrow .type-fallback { width:clamp(103px,29.6vw,137px); }
.ocean__heading { margin-top:clamp(14px,2.4dvh,23px); font:400 clamp(23px,6.2vw,31px)/1.24 'Cinzel',serif; }
.ocean__heading .type-fallback { width:clamp(214px,59vw,276px); }
.ocean__hairline { width:1px; flex:0 0 auto; background:rgba(111,46,40,.70); }
.ocean__hairline--first { height:clamp(31px,7.2dvh,62px); margin-top:clamp(13px,2.1dvh,19px); }
.ocean__hotel { margin-top:clamp(13px,2.1dvh,20px); }
.ocean__hotel-name { font:400 clamp(19px,5.1vw,25px)/1.1 'Aboreto',serif; margin:0; }
.ocean__hotel-name .type-fallback { width:clamp(119px,33vw,150px); }
.ocean__address { font:300 clamp(17px,4.7vw,22px)/1.11 'Josefin Sans',sans-serif; margin:6px 0 8px; }
.ocean__address .type-fallback { width:clamp(166px,46vw,212px); }
.ocean__reserve { font:400 clamp(15px,4.1vw,19px)/1 'Josefin Sans',sans-serif; min-width:118px; min-height:40px; padding:8px 17px;
 background:#642b26; border:0; border-radius:4px; color:#fffaf6; cursor:pointer; pointer-events:auto;
 display:flex; justify-content:center; align-items:center; letter-spacing:.035em; -webkit-tap-highlight-color:transparent; }
.ocean__reserve .type-fallback { width:clamp(72px,20.5vw,95px); }
.ocean__reserve:focus-visible { outline:2px solid white; outline-offset:3px; }
.ocean__hairline--second { height:clamp(36px,7.6dvh,67px); margin-top:clamp(14px,2.4dvh,21px); }
.ocean__more { margin-top:clamp(12px,2.0dvh,19px); }
.ocean__more-title { font:400 clamp(19px,5.2vw,25px)/1.1 'Aboreto',serif; margin:0; }
.ocean__more-title .type-fallback { width:clamp(125px,35vw,165px); }
.ocean__more-text { font:300 clamp(16px,4.7vw,21px)/1.18 'Josefin Sans',sans-serif; color:#fffaf6;
 text-shadow:0 1px 6px rgba(15,41,41,.30); margin:clamp(7px,1.2dvh,12px) 0 0; }
.ocean__more-text .type-fallback { width:clamp(215px,63vw,284px); }
.ocean-reveal { opacity:0; transition:none!important; animation:none!important; transform:none!important; will-change:opacity; }
/* Show original typefaces only after their web versions are verified as loaded. */
.fonts-aboreto .ocean__eyebrow .type-live,
.fonts-aboreto .ocean__hotel-name .type-live,
.fonts-aboreto .ocean__more-title .type-live,
.fonts-cinzel .ocean__heading .type-live,
.fonts-josefin .ocean__address .type-live,
.fonts-josefin .ocean__reserve .type-live,
.fonts-josefin .ocean__more-text .type-live { display:block; }
.fonts-aboreto .ocean__eyebrow .type-fallback,
.fonts-aboreto .ocean__hotel-name .type-fallback,
.fonts-aboreto .ocean__more-title .type-fallback,
.fonts-cinzel .ocean__heading .type-fallback,
.fonts-josefin .ocean__address .type-fallback,
.fonts-josefin .ocean__reserve .type-fallback,
.fonts-josefin .ocean__more-text .type-fallback { display:none; }
.ocean__play-prompt[hidden],.ocean__toast[hidden] { display:none!important; }
.ocean__play-prompt { z-index:5; position:absolute; bottom:3%; left:50%; transform:translateX(-50%); padding:12px 17px; border:1px solid #76443f; background:rgba(247,233,214,.85); color:#63332c; font:400 12px 'Josefin Sans',sans-serif; letter-spacing:.08em; cursor:pointer; }
.ocean__toast { z-index:6; position:absolute; left:50%; bottom:5%; transform:translateX(-50%); width:max-content; max-width:88%; padding:13px 15px; background:rgba(50,35,30,.91); color:#fff; border-radius:4px; text-align:center; font:400 13px/1.3 Arial,sans-serif; }
@media(max-height:660px) {
  .ocean__content { padding-top:clamp(29px,7.5dvh,52px); }
  .ocean__heading { margin-top:11px; font-size:clamp(20px,5.6vw,27px); }
  .ocean__heading .type-fallback { width:clamp(194px,53vw,242px); }
  .ocean__hairline--first { height:clamp(20px,5dvh,35px); margin-top:9px; }
  .ocean__hotel { margin-top:9px; }
  .ocean__hairline--second { height:clamp(20px,5dvh,40px); margin-top:9px; }
  .ocean__more { margin-top:9px; }
}

.ocean__hotel { margin-top:0; }
.ocean__content--simple .ocean__hotel-name { font:400 clamp(23px,6.2vw,31px)/1.1 'Aboreto',serif; }
.ocean__content--simple .ocean__hotel-name .type-fallback { width:clamp(141px,39vw,176px); }
.ocean__content--simple .ocean__address { font:300 clamp(18px,5vw,23px)/1.13 'Josefin Sans',sans-serif; margin:10px 0 14px; }
.ocean__content--simple .ocean__address .type-fallback { width:clamp(182px,51vw,228px); }
.ocean__content--simple .ocean__reserve { min-width:134px; min-height:44px; padding:10px 18px; }
.ocean__hairline--simple { height:clamp(48px,9.5dvh,78px); margin-top:clamp(28px,4.5dvh,42px); }
.ocean__closing { margin-top:clamp(22px,3.2dvh,34px); }
.ocean__closing-title { font:400 clamp(22px,6vw,30px)/1.1 'Aboreto',serif; margin:0; }
.ocean__closing-title .type-fallback { width:clamp(182px,52vw,244px); }
.fonts-aboreto .ocean__closing-title .type-live { display:block; }
.fonts-aboreto .ocean__closing-title .type-fallback { display:none; }

@media(max-height:660px) {
  .ocean__content--simple { padding-top:clamp(56px,11dvh,92px); }
  .ocean__hairline--simple { height:clamp(32px,6dvh,48px); margin-top:16px; }
  .ocean__closing { margin-top:14px; }
}

/* Fallback: botón de reproducción solo si el navegador rechaza play(). */
.story__play-prompt[hidden] { display:none!important; }
.story__play-prompt {
  position:absolute; z-index:6; left:50%; top:52%; transform:translate(-50%,-50%);
  min-width:195px; padding:16px 20px; border:1px solid rgba(45,46,48,.55); border-radius:50px;
  background:rgba(240,241,240,.84); color:#272727; letter-spacing:.09em;
  font:400 14px/1 'Josefin Sans',sans-serif; cursor:pointer;
  box-shadow:0 4px 20px rgba(18,29,34,.12);
}
.story__play-symbol { margin-right:8px; font-size:11px; }
.story__play-prompt:focus-visible { outline:2px solid #454545; outline-offset:3px; }