/* LA PORTADA DE LA PUERTA DEL CLIENTE: la marca sobre el viaje de fotos de PRISMA.
   La letra y el lema son los del pie del Nido («Costa Rica · Pura Vida» espaciado, el año un
   paso más chico y más tenue), en grande. */
:root{ --tinta:#141D27; --crema:#EADFCE; color-scheme:dark; }
html, body{ margin:0; height:100%; background:var(--tinta); color:#FFFFFF; }
body{ font-family:Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight:300; overflow:hidden; }

.portada{ position:relative; height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 16px; box-sizing:border-box; }

/* El viaje: dos capas que se cruzan (aria-viaje.js). Va en `absolute` y no en `fixed` porque el
   motor sólo avanza si la caja tiene `offsetParent` (un elemento fijo no lo tiene). La que se
   ve respira despacio: en una portada el acercamiento lento acompaña; donde se trabaja, no. */
.portada__viaje{ position:absolute; inset:0; overflow:hidden; }
.portada__capa{ position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; opacity:0;
  transform:scale(1); transition:opacity 1.4s ease, transform 9s ease-out; }
.portada__capa.activa{ opacity:1; transform:scale(1.06); }
/* Lo justo para que la marca se lea sobre cualquier foto: un velo al centro y abajo, nada más. */
.portada__viaje::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 50%, rgba(10,17,24,.42), rgba(10,17,24,0) 72%),
             linear-gradient(180deg, rgba(10,17,24,0) 60%, rgba(10,17,24,.45)); }

.portada__marca{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.portada__logo{ display:block; width:min(78vw, 640px); height:auto; filter:drop-shadow(0 6px 26px rgba(6,12,18,.6)); }
.portada__lema{ margin:clamp(1.1rem, 2.6vw, 1.8rem) 0 0; padding-left:.5em; font-size:clamp(.78rem, 1.5vw, 1.05rem); letter-spacing:.5em;
  text-transform:uppercase; color:rgba(255,255,255,.92); text-shadow:0 1px 3px rgba(6,12,18,.92), 0 6px 22px rgba(6,12,18,.7); }
.portada__anio{ margin:.7rem 0 0; padding-left:.42em; font-size:clamp(.66rem, 1.1vw, .8rem); letter-spacing:.42em; color:rgba(255,255,255,.66);
  text-shadow:0 1px 3px rgba(6,12,18,.92); }

/* El lugar de la foto, chico, abajo a la izquierda (como en el Nido). */
.portada__lugar{ position:absolute; z-index:1; left:max(16px, env(safe-area-inset-left)); bottom:max(14px, env(safe-area-inset-bottom));
  margin:0; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(234,223,206,.72);
  transition:opacity .26s ease; text-shadow:0 1px 3px rgba(6,12,18,.9); }

@media (prefers-reduced-motion: reduce){ .portada__capa{ transition:opacity .01s; transform:none !important; } }