/* El Santuario · beige y vinotinto
   Los colores viven aquí arriba. Cambia el hex y cambia todo el sitio. */

:root{
  --beige:#EFE3CE;        /* fondo */
  --papel:#FBF5EA;        /* borde de la hoja */
  --vino:#5E1A2E;         /* tinta principal */
  --vino-vivo:#8C2740;    /* acento */
  --sepia:#9A7F63;        /* texto secundario */
  --linea:rgba(94,26,46,.18);
  --display:"Bodoni Moda", Georgia, serif;
  --ui:"Archivo", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--beige)}

body{
  margin:0;
  background:radial-gradient(130% 90% at 50% -20%, #F6EDDC 0%, var(--beige) 60%) fixed;
  color:var(--vino);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
body.sin-scroll{overflow:hidden}

/* ---------- Portada: corta, para que la carta se vea de una ---------- */

.portada{
  padding:1.25rem 1.25rem .85rem;
  text-align:center;
}

.portada__logo{
  display:block;
  margin:0 auto;
  max-width:min(58vw,190px);
  height:auto;
}

.marca{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,7vw,2.6rem);
  line-height:1;
  color:var(--vino);
}

.bajada{
  margin:.3rem 0 0;
  font-family:var(--display);
  font-style:italic;
  font-size:.95rem;
  color:var(--vino-vivo);
}

/* ---------- Las hojas ---------- */

.carta{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(.75rem,3vw,2rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 1rem;
  padding:0 1rem;
  scrollbar-width:none;
}
.carta::-webkit-scrollbar{display:none}

.hoja{
  flex:0 0 auto;
  scroll-snap-align:center;
  display:flex;
}

.hoja__papel{
  display:flex;
  padding:0;
  border:1px solid var(--linea);
  border-radius:3px;
  background:var(--papel);
  cursor:zoom-in;
  overflow:hidden;
  box-shadow:0 16px 34px -20px rgba(94,26,46,.55);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.hoja__papel:hover{transform:translateY(-4px);box-shadow:0 22px 40px -20px rgba(94,26,46,.6)}

/* La hoja completa cabe en pantalla: nada de scroll para ver una sola */
.hoja__papel img{
  display:block;
  width:auto;
  height:auto;
  max-width:92vw;
  max-height:calc(100dvh - 175px);
}

@media(min-width:900px){
  .portada{padding-top:1.75rem}
  .hoja__papel img{max-width:min(60vw,700px);max-height:calc(100dvh - 195px)}
}

/* ---------- Invitación a pasar la hoja ---------- */

/* La primera hoja se asoma y vuelve, mostrando que hay más al lado */
@keyframes tirar{
  0%, 12%, 100%{transform:translateX(0)}
  40%{transform:translateX(-18px)}
  62%{transform:translateX(-6px)}
}

body.es-invitando .hoja{animation:tirar 2.8s ease-in-out 1.2s 3 both}

.pasar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  margin:0;
  padding:.9rem 1rem 0;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sepia);
  opacity:0;
  animation:aparecer .6s ease 1s forwards;
}

@keyframes aparecer{to{opacity:1}}

.pasar__flechas{display:inline-flex;gap:3px}

.pasar__flechas i{
  width:6px;
  height:6px;
  border-top:1.5px solid var(--vino-vivo);
  border-right:1.5px solid var(--vino-vivo);
  transform:rotate(45deg);
  opacity:.15;
  animation:correr 1.6s ease-in-out infinite;
}
.pasar__flechas i:nth-child(2){animation-delay:.18s}
.pasar__flechas i:nth-child(3){animation-delay:.36s}

@keyframes correr{
  0%, 70%, 100%{opacity:.15;transform:rotate(45deg) translate(0,0)}
  35%{opacity:1;transform:rotate(45deg) translate(2px,-2px)}
}

body:not(.es-invitando) .pasar{display:none}

/* ---------- Pasar de hoja ---------- */

.flecha{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  width:2.75rem;
  height:2.75rem;
  display:grid;
  place-items:center;
  border:1px solid var(--linea);
  border-radius:50%;
  background:rgba(251,245,234,.9);
  color:var(--vino);
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s, opacity .2s;
}
.flecha--izq{left:.5rem}
.flecha--der{right:.5rem}
body.es-invitando .flecha--der:not(:disabled){animation:latir 2.8s ease-in-out 1.2s 3}

@keyframes latir{
  0%, 20%, 100%{transform:translateY(-50%) scale(1)}
  45%{transform:translateY(-50%) scale(1.16);background:var(--vino);color:var(--papel)}
}
.flecha:hover:not(:disabled){background:var(--vino);color:var(--papel)}
.flecha:disabled{opacity:.25;cursor:default}

@media(max-width:640px){ .flecha{display:none} }

.puntos{
  display:flex;
  justify-content:center;
  gap:.4rem;
  padding:1rem 1rem .25rem;
}
.punto{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--linea);
  transition:background .25s, transform .25s;
}
.punto.es-activo{background:var(--vino);transform:scale(1.4)}

/* ---------- Visor ---------- */

.visor{
  position:fixed;
  inset:0;
  z-index:50;
  background:#2E0C16;
  display:flex;
  flex-direction:column;
}
.visor[hidden]{display:none}

.visor__barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid rgba(251,245,234,.16);
  color:var(--papel);
}
.visor__titulo{font-family:var(--display);font-size:1.05rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.visor__cuenta{
  font-size:.7rem;
  letter-spacing:.16em;
  color:rgba(251,245,234,.65);
}

.visor__cerrar{
  padding:.45rem .9rem;
  border:1px solid rgba(251,245,234,.35);
  border-radius:999px;
  background:transparent;
  color:var(--papel);
  font-family:var(--ui);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
}
.visor__cerrar:hover{background:var(--papel);color:var(--vino)}

.visor__lienzo{
  flex:1;
  overflow:auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:1.25rem;
  -webkit-overflow-scrolling:touch;
}
.visor__lienzo img{max-width:100%;height:auto;border-radius:2px;cursor:zoom-in;transition:max-width .3s ease}
.visor__lienzo img.es-zoom{max-width:none;width:230%;cursor:zoom-out}

/* Pasar de hoja sin salir del visor: las flechas quedan fijas encima
   de la imagen, así funcionan también con el zoom puesto */
.visor__paso{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  width:2.9rem;
  height:2.9rem;
  display:grid;
  place-items:center;
  border:1px solid rgba(251,245,234,.3);
  border-radius:50%;
  background:rgba(46,12,22,.85);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  color:var(--papel);
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s, opacity .2s;
}
.visor__paso--izq{left:.6rem}
.visor__paso--der{right:.6rem}
.visor__paso:hover:not(:disabled){background:var(--papel);color:var(--vino)}
.visor__paso:disabled{opacity:.2;cursor:default}

@media(min-width:900px){
  .visor__paso{width:3.4rem;height:3.4rem;font-size:2rem}
  .visor__paso--izq{left:1.25rem}
  .visor__paso--der{right:1.25rem}
}

/* ---------- Vacío y pie ---------- */

.vacio{
  max-width:36rem;
  margin:1rem auto 4rem;
  padding:2.5rem 1.75rem;
  border:1px dashed var(--linea);
  border-radius:6px;
  text-align:center;
}
.vacio h2{margin:0 0 .6rem;font-family:var(--display);font-weight:400;font-size:1.5rem}
.vacio p{margin:0;color:var(--sepia);font-size:.95rem;line-height:1.7}
.vacio code{padding:.1rem .35rem;border-radius:3px;background:rgba(94,26,46,.08);color:var(--vino);font-size:.9em}

.pie{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem 1.25rem;
  padding:.75rem 1.25rem 1.5rem;
  text-align:center;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sepia);
}

:focus-visible{outline:2px solid var(--vino-vivo);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pasar{opacity:1}
}