/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  height: 100dvh; /* evita el hueco en blanco al esconderse la barra del navegador móvil */
  background: #ccac60; /* mismo dorado de la carta */
  color: #f4ede1;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden; /* todo cabe en una pantalla: la galería se arrastra y la carta se desplaza por dentro */
}

a { color: #e3bf72; }

/* ---------- Stage: caja dorada centrada, flotando sobre la galería ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 20px;
  padding: 4dvh 20px;
  pointer-events: none; /* deja arrastrar la galería alrededor de la carta */
}

.card {
  width: min(560px, 92vw);
  background: #ccac60; /* coincide con el fondo horneado en la imagen del título */
  color: #fffaf0;
  border: 2px solid #000000;
  border-radius: 2px;
  padding: 44px 40px 36px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  text-align: center;
  max-height: 100%;
  overflow-y: auto; /* el texto de la carta se desplaza dentro de ella */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .5) transparent;
}

/* Contenedor de la carta: el botón de cerrar queda fuera del área que se desplaza */
.card-wrap {
  position: relative;
  display: flex;
  max-height: 100%;
  pointer-events: auto;
  transition: transform .35s ease, visibility .35s;
}

/* ---------- Cerrar / volver a abrir la carta ---------- */
.card-close {
  display: block;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.card-reopen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  border: none;
  border-bottom: 2px solid #000000;
  background: #ccac60; /* mismo dorado de la carta y del título */
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.card-reopen img {
  display: block;
  height: 30px;
  width: auto;
}

.card-reopen-arrow {
  font-size: 22px;
  line-height: 1;
  animation: nudge 1.4s ease-in-out infinite; /* rebote suave: avisa que la barra se puede tocar */
}

@keyframes nudge {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .card-reopen-arrow { animation: none; }
}

/* Carta cerrada: se desliza hacia arriba y aparece la barra para reabrirla */
body.card-closed .card-wrap {
  transform: translateY(-110vh);
  visibility: hidden;
}

body.card-closed .card-reopen { display: flex; }

.card-name {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto 18px;
}

/* ---------- Sección blanca: Prayer of Love ---------- */
.prayer-section {
  background: #ffffff;
  margin: 34px -40px 30px;
  padding: 30px 24px;
}

.prayer-title {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto 24px;
}

.prayer-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.prayer-mantra {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.prayer-meaning {
  width: 100%;
  max-width: 260px;
}

.meaning-title {
  display: block;
  width: 130px;
  height: auto;
  margin: 0 auto 8px;
}

.meaning-body {
  color: #2a2a2a;
  font-size: .95rem;
  line-height: 1.5;
  text-align: left;
  margin: 0;
}

.card p {
  font-weight: 400;
  line-height: 1.3;
  font-size: 1.2rem;
  margin: 0 0 16px;
  text-align: justify;
  text-justify: inter-word;
}

.card p:last-child { margin-bottom: 0; }

.card-join {
  text-align: center;
  font-size: 1.6rem;
  margin-top: 22px;
  margin-bottom: 0;
}

.heart { color: #e5453f; }

.lead {
  text-align: center;
  font-style: italic;
}

.signature {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 30px auto 40px; /* 40px de espacio antes de la regla horizontal */
}

.rule {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .5); /* blanco al 50% */
  margin: 24px 0;
}

.closing {
  font-size: 1rem;
  text-align: center;
}

.closing p {
  font-size: 1rem;
  text-align: center;
  margin: 0;
}

.contact {
  text-align: center;
}

.contact a {
  color: #ffffff;
  text-decoration: none;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.btn {
  display: inline-block;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  padding: 10px 20px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); /* sombra sin blur, marca el botón */
}

/* ---------- Galería masonry (basada en codepen.io/michydev/pen/ZEYdOEZ) ---------- */
/* Ventana fija a pantalla completa; dentro, un plano más grande que se arrastra. */
.gallery-section {
  position: fixed;
  inset: 0;
  z-index: 1; /* fondo: la carta (.stage) va encima */
  overflow: hidden;
  background-color: #ccac60; /* mismo dorado de la carta */
  cursor: grab;
  touch-action: none; /* el arrastre lo maneja script.js, también en táctil */
  user-select: none;
  -webkit-user-select: none;
}

.gallery-section.dragging { cursor: grabbing; }

.photogallery {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.2em;
  list-style-type: none;
  will-change: transform;
}

/* evita que la última fila se estire de más (hasta que script.js la completa) */
.photogallery::after {
  content: '';
  display: block;
  flex-grow: 10;
}

.photogallery.filled::after { display: none; }

.photogallery li {
  position: relative; /* contiene la onda del clic */
  overflow: hidden;
  flex-grow: 1;
  height: 20vh; /* mitad del tamaño original (40vh) */
  margin: 0.2em;
}

.photogallery img {
  display: block;
  width: auto; /* el ancho sale de la proporción (atributos width/height) */
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity .4s ease, transform .2s ease;
}

.photogallery img.loaded { opacity: .75; }

/* Easter egg (mantra): fondo blanco y sin recorte, para que el texto se lea completo */
.photogallery li.egg { background: #ffffff; }
.photogallery li.egg img { object-fit: contain; }

@media (hover: hover) {
  .photogallery img.loaded:hover { opacity: 1; }
}

/* Feedback del clic: la foto se hunde un poco y sale una onda desde el punto tocado */
.photogallery li.pressed img {
  opacity: 1;
  transform: scale(.95);
}

.photogallery .ripple {
  position: absolute;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  pointer-events: none;
  animation: ripple .5s ease-out forwards;
}

@keyframes ripple {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(6); opacity: 0; }
}

/* ---------- Vignette negro circular: sobre las fotos, detrás de la carta ---------- */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: radial-gradient(circle farthest-corner at 50% 50%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .85) 100%);
}

@media (max-aspect-ratio: 1/1) {
  .photogallery li { height: 15vh; }
}

@media (max-height: 480px) {
  .photogallery li { height: 40vh; }
}

/* ---------- Globito de ayuda que sigue al mouse (solo escritorio) ---------- */
.gallery-hint {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15; /* encima de la galería, detrás de la carta (.stage) */
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .78);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.gallery-hint.visible { opacity: 1; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 100px; /* deja sitio a las flechas de 64px */
  background: rgba(15, 15, 20, .92);
  touch-action: none; /* swipe lateral también desde el fondo */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-img {
  touch-action: none; /* el swipe lateral lo maneja script.js */
  user-select: none;
  -webkit-user-drag: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fdfaf3;
  padding: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.lightbox button {
  position: absolute;
  border: none;
  background: none;
  color: #ffffff;
  font-size: 40px;
  line-height: 1;
  padding: 12px;
  cursor: pointer;
  opacity: .8;
}

.lightbox button:hover { opacity: 1; }

.lightbox-img.sliding { transition: transform .25s ease; }

.lightbox-close { top: 8px; right: 12px; }
.lightbox-prev  { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 8px; top: 50%; transform: translateY(-50%); }

.lightbox-prev svg,
.lightbox-next svg {
  display: block;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); /* se lee también sobre fotos claras */
}

.lightbox-prev svg { transform: rotate(180deg); }

@media (max-width: 480px) {
  .lightbox { padding: 5vh 12px; } /* en celular la foto usa todo el ancho; las flechas van encima */
  .lightbox-prev svg,
  .lightbox-next svg {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .stage {
    align-items: flex-start;
    padding-top: 60px; /* franja de galería arriba para arrastrar */
    padding-bottom: 4vh;
    padding-bottom: 4dvh;
  }
  .card {
    width: 85vw;
    padding: 32px 24px 28px;
  }
  .prayer-section { margin-left: -24px; margin-right: -24px; }
}