/* =========================================================
   Esto es lo que hizo que la pagina se viera medianamente bonita
   Me pudo haber quedado mucho mejor, pero no soy muy bueno diseñando :(
   ========================================================= */

:root {
  /* fondo */
  --pink-1: #f8dde2;
  --pink-2: #f1bccb;
  --pink-3: #e29cb0;

  /* sobres */
  --kraft-1: #cfa876;
  --kraft-2: #b48856;
  --kraft-3: #93683f;
  --kraft-fold: rgba(60, 38, 18, 0.28);

  /* papel de la carta */
  --paper-1: #ecdfc0;
  --paper-2: #ddc79c;
  --stain: 132, 94, 51;
  --ink: #362a1c;

  /* lacre y detalles */
  --seal-1: #8a2c3b;
  --seal-2: #4a141f;

  /* sombra de contacto, en tonos cálidos que combinan con el rosa */
  --shadow-blur: 13px;
  --shadow-color: rgba(120, 55, 65, 0.28);
  --ao-contact: rgba(105, 45, 55, 0.32);
  --ao-wide: rgba(95, 40, 55, 0.14);
  --ground-shadow: rgba(110, 50, 60, 0.28);

  /* tiempo y ritmo */
  --t-move: 2.2s;
  --t-flap: 1s;
  --t-seal: 0.15s;
  --t-reveal: 1.6s;
  --t-fast: 0.9s;
  --t-hover: 0.35s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --envelope-w: clamp(122px, 16vw, 190px);
  --focus-scale: 2.65;
  --photo-w: clamp(84px, 10.5vw, 148px);
}

@media (max-width: 640px) {
  :root {
    --envelope-w: clamp(98px, 27vw, 150px);
    --focus-scale: 2.1;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--pink-3);
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Cormorant Garamond', serif;
}

/* =========================================================
   BG
   ========================================================= */

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 30% 15%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.15), transparent 45%),
    linear-gradient(160deg, var(--pink-1) 0%, var(--pink-2) 55%, var(--pink-3) 100%);
}

.scene-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scene-hint {
  position: absolute;
  left: 50%;
  bottom: max(5vh, 22px);
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  letter-spacing: 0.02em;
  padding: 0.5em 1.15em;
  border-radius: 999px;
  background: rgba(90, 35, 48, 0.4);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 5;
}

body.letter-is-open .scene-hint,
.scene-hint.is-hidden {
  opacity: 0;
}

/* =========================================================
   Fotografías (Donde sales tu bien hermosa)
   ========================================================= */

.photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.photo {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--photo-w);
  transform: translate(-50%, -50%) rotate(var(--rot));
  pointer-events: none;
  transition: transform var(--t-hover) var(--ease);
}

.photo-frame {
  position: relative;
  background: #fdfaf2;
  padding: 7% 7% 20%;
  border-radius: 2px;
  box-shadow:
    0 3px 8px rgba(60, 20, 30, 0.22),
    0 10px 22px rgba(60, 20, 30, 0.18);
}

.photo-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #ddd6c8;
}

.photo.photo-missing .photo-frame img {
  visibility: hidden;
}

.photo.photo-missing .photo-frame::after {
  content: "sin imagen";
  position: absolute;
  inset: 7% 7% 20% 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.7rem;
  color: rgba(60, 45, 30, 0.5);
  background: repeating-linear-gradient(
    135deg,
    rgba(60, 45, 30, 0.06) 0px,
    rgba(60, 45, 30, 0.06) 6px,
    transparent 6px,
    transparent 12px
  );
}

.photo-caption {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: 0.95rem;
  color: #4a3927;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dev-mode .photo {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

body.dev-mode .photo .photo-frame {
  outline: 1.5px dashed rgba(255, 255, 255, 0.65);
  outline-offset: 5px;
}

body.dev-mode .photo.is-dragging {
  cursor: grabbing;
  z-index: 25;
}

/* =========================================================
   Sobres
   ========================================================= */

.envelopes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.envelope {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--envelope-w);
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%) rotate(var(--rot));
  perspective: 900px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1;
  transition:
    top var(--t-move) var(--ease),
    left var(--t-move) var(--ease),
    transform var(--t-hover) var(--ease),
    opacity var(--t-move) var(--ease),
    filter var(--t-reveal) var(--ease);
}

/* mientras el sobre viaja al centro (o vuelve de él), su propio
   transform debe usar el ritmo lento y deliberado, no el rápido
   de la reacción al pasar el mouse */
.envelope.is-active,
.envelope.is-returning {
  transition:
    top var(--t-move) var(--ease),
    left var(--t-move) var(--ease),
    transform var(--t-move) var(--ease),
    opacity var(--t-move) var(--ease),
    filter var(--t-reveal) var(--ease);
}

/* una vez la carta está a la vista, el foco es ella, no el sobre */
.envelope.is-reading {
  filter: blur(6px);
}

/* durante el arrastre en modo edición, la posición debe seguir
   al puntero al instante, sin la transición de vuelo al centro */
.envelope.is-dragging {
  transition: none !important;
}

/* sombra de contacto: un charco suave bajo el sobre */
.envelope::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -14%;
  height: 26%;
  background: radial-gradient(ellipse at center, var(--ground-shadow), transparent 72%);
  z-index: -1;
  pointer-events: none;
  transition: height var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.envelope:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 6px;
  border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .envelope:hover:not(.is-active) {
    transform: translate(-50%, calc(-50% - 16px)) rotate(var(--rot)) scale(1.07);
  }

  .envelope:hover:not(.is-active)::before {
    height: 32%;
    bottom: -20%;
    opacity: 0.9;
  }

  .envelope:hover:not(.is-active) .envelope-body {
    box-shadow:
      inset 0 0 0 1px rgba(60, 38, 18, 0.25),
      inset 0 -6px 14px rgba(40, 24, 10, 0.25),
      0 6px calc(var(--shadow-blur) * 0.5) var(--ao-contact),
      0 20px calc(var(--shadow-blur) * 1.6) var(--shadow-color),
      0 34px calc(var(--shadow-blur) * 2.9) var(--ao-wide);
  }
}

.envelope.is-active {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(var(--focus-scale));
  z-index: 20;
}

.envelope.is-active::before {
  opacity: 0;
}

.envelope.is-active .envelope-body {
  box-shadow:
    inset 0 0 0 1px rgba(60, 38, 18, 0.25),
    inset 0 -6px 14px rgba(40, 24, 10, 0.25),
    0 20px 30px rgba(50, 20, 28, 0.4),
    0 40px 60px rgba(45, 15, 25, 0.28);
}

.envelope.is-dimmed {
  opacity: 0;
  pointer-events: none;
}

.envelope-body {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  z-index: 2;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), transparent 40%),
    linear-gradient(155deg, var(--kraft-1), var(--kraft-2) 55%, var(--kraft-3));
  overflow: hidden;
  transition: box-shadow var(--t-fast) var(--ease);
  box-shadow:
    inset 0 0 0 1px rgba(60, 38, 18, 0.25),
    inset 0 -6px 14px rgba(40, 24, 10, 0.25),
    0 2px calc(var(--shadow-blur) * 0.35) var(--ao-contact),
    0 6px var(--shadow-blur) var(--shadow-color),
    0 14px calc(var(--shadow-blur) * 1.9) var(--ao-wide);
}

.envelope-body::before,
.envelope-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kraft-fold);
}

.envelope-body::before {
  clip-path: polygon(0 0, 50% 58%, 0% 100%);
}

.envelope-body::after {
  clip-path: polygon(100% 0, 50% 58%, 100% 100%);
}

.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 62%;
  clip-path: polygon(0 0, 100% 0, 50% 72%);
  z-index: 3;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform var(--t-flap) var(--ease);
  background: linear-gradient(165deg, var(--kraft-2), var(--kraft-3));
  box-shadow: inset 0 -8px 14px rgba(40, 24, 10, 0.3);
}

.envelope.flap-open .envelope-flap {
  transform: rotateX(180deg);
}

.envelope-seal {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--seal-1), var(--seal-2) 80%);
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    inset 0 2px 2px rgba(255, 255, 255, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.4);
  transition: opacity var(--t-seal) linear;
}

.envelope-stamp {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.7rem;
  color: rgba(60, 38, 18, 0.55);
  letter-spacing: 0.02em;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}

/* el sello (el círculo rojo) vive dentro de la solapa, así que
   viaja con su giro - hay que quitarlo del todo ANTES de que la
   solapa empiece a girar (nunca coexiste con el giro), y devolverlo
   recién cuando la solapa ya terminó de cerrarse. La fecha, en
   cambio, siempre se queda a la vista en el sobre. */
.envelope.seal-hidden .envelope-seal {
  opacity: 0;
}

/* =========================================================
   Telón de fondo desenfocado
   ========================================================= */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(60, 20, 30, 0.45);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-move) var(--ease), backdrop-filter var(--t-move) var(--ease);
  z-index: 10;
}

body.letter-is-open .backdrop {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* =========================================================
   La carta abierta
   ========================================================= */

.letter-reader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(88vw, 460px);
  max-height: min(76dvh, 560px);
  transform: translate(-50%, -50%) translateY(28px) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.4)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  z-index: 30;
  display: flex;
}

.letter-reader.is-visible {
  transform: translate(-50%, -50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.letter-scroll {
  position: relative;
  width: 100%;
  max-height: min(76dvh, 560px);
  overflow-y: auto;
  padding: 13% 11% 11%;
  border-radius: 2px;
  clip-path: polygon(
    1% 3%, 8% 0%, 17% 2%, 26% 0%, 35% 2%, 44% 0%, 53% 2%, 62% 0%, 71% 2%, 80% 0%, 91% 2%, 100% 6%,
    98% 15%, 100% 24%, 97% 33%, 100% 42%, 98% 51%, 100% 60%, 97% 69%, 100% 78%, 98% 87%, 100% 96%,
    91% 99%, 82% 97%, 73% 100%, 64% 98%, 55% 100%, 46% 97%, 37% 100%, 28% 98%, 19% 100%, 10% 97%, 2% 100%,
    0% 91%, 3% 82%, 0% 73%, 2% 64%, 0% 55%, 3% 46%, 0% 37%, 2% 28%, 0% 19%, 3% 10%, 0% 3%
  );
  background:
    radial-gradient(ellipse 30% 18% at 18% 22%, rgba(var(--stain), 0.35), transparent 70%),
    radial-gradient(ellipse 22% 14% at 82% 15%, rgba(var(--stain), 0.28), transparent 70%),
    radial-gradient(ellipse 35% 22% at 75% 80%, rgba(var(--stain), 0.3), transparent 70%),
    radial-gradient(ellipse 20% 16% at 12% 85%, rgba(var(--stain), 0.22), transparent 70%),
    linear-gradient(165deg, var(--paper-1), var(--paper-2));
  box-shadow:
    inset 0 0 26px rgba(90, 62, 30, 0.35),
    inset 0 0 60px rgba(60, 38, 18, 0.2);
}

.letter-fecha {
  margin: 0 0 0.2em;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  color: rgba(54, 42, 28, 0.6);
}

.letter-asunto {
  margin: 0 0 0.5em;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  color: var(--ink);
  line-height: 1.15;
}

.letter-cuerpo {
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: clamp(1.08rem, 2.9vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-line;
}

.letter-close {
  position: absolute;
  top: 3%;
  right: 3%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(240, 222, 190, 0.35);
  background: rgba(21, 13, 6, 0.5);
  color: rgba(240, 222, 190, 0.9);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 31;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.letter-close:hover,
.letter-close:focus-visible {
  background: rgba(21, 13, 6, 0.75);
  transform: scale(1.06);
}

.letter-close:focus-visible {
  outline: 2px solid rgba(240, 222, 190, 0.85);
  outline-offset: 2px;
}

/* =========================================================
   Modo Dev, no deberias estar aqui y tampoco enterarte
   que esto existe ;(
   ========================================================= */

body.dev-mode .envelope {
  cursor: grab;
  outline: 1.5px dashed rgba(255, 255, 255, 0.65);
  outline-offset: 5px;
  touch-action: none;
}

body.dev-mode .envelope.is-dragging {
  cursor: grabbing;
  outline-color: rgba(255, 255, 255, 0.95);
  z-index: 25;
}

body.dev-mode .envelope:hover:not(.is-active) {
  transform: translate(-50%, -50%) rotate(var(--rot));
}

.dev-toolbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.8em;
  background: rgba(20, 10, 14, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: 'Cormorant Garamond', serif;
  color: #f4e9ea;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dev-mode .dev-toolbar {
  display: flex;
}

/* red de seguridad: si el modo dev se desactiva, oculta
   cualquier panel del editor sin importar su propio estado */
body:not(.dev-mode) .dev-toolbar,
body:not(.dev-mode) .dev-panel,
body:not(.dev-mode) .dev-export,
body:not(.dev-mode) .dev-preview {
  display: none !important;
}

.dev-badge {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  background: rgba(226, 156, 176, 0.25);
  border: 1px solid rgba(226, 156, 176, 0.5);
}

.dev-btn {
  font-family: inherit;
  font-size: 0.9rem;
  color: #f4e9ea;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 0.4em 0.8em;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dev-btn:hover,
.dev-btn:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.dev-btn-danger {
  border-color: rgba(210, 90, 90, 0.5);
  color: #ffd3d3;
}

.dev-btn-danger:hover {
  background: rgba(210, 90, 90, 0.25);
}

.dev-status {
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(244, 233, 234, 0.75);
  margin-left: 0.3em;
}

.dev-close {
  margin-left: auto;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.3em 0.65em;
}

.dev-panel,
.dev-export,
.dev-preview {
  position: fixed;
  z-index: 201;
  font-family: 'Cormorant Garamond', serif;
  color: #f4e9ea;
  background: rgba(24, 13, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.dev-panel.is-visible,
.dev-export.is-visible,
.dev-preview.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dev-panel {
  top: 4.2em;
  right: 0.8em;
  width: min(320px, 92vw);
  max-height: min(80dvh, 620px);
  overflow-y: auto;
  padding: 1.1em 1.2em 1.3em;
}

.dev-panel h3 {
  margin: 0 0 0.6em;
  font-size: 1.15rem;
  font-weight: 600;
}

.dev-panel label {
  display: block;
  font-size: 0.85rem;
  color: rgba(244, 233, 234, 0.75);
  margin-top: 0.8em;
}

.dev-panel input[type="text"],
.dev-panel textarea {
  width: 100%;
  margin-top: 0.3em;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: #f4e9ea;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 0.5em 0.6em;
  resize: vertical;
}

.dev-panel input[type="range"] {
  width: 100%;
  margin-top: 0.4em;
}

.dev-hint-small {
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(244, 233, 234, 0.6);
  margin: 0.7em 0 0;
}

.dev-panel .dev-btn-danger {
  margin-top: 1.1em;
  width: 100%;
}

.dev-panel-close {
  position: absolute;
  top: 0.6em;
  right: 0.7em;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #f4e9ea;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.dev-export {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(10px);
  width: min(560px, 92vw);
}

.dev-export.is-visible {
  transform: translate(-50%, -50%) translateY(0);
}

.dev-export-card {
  position: relative;
  padding: 1.2em 1.3em 1.4em;
}

.dev-export-card h3 {
  margin: 0 0 0.3em;
  font-size: 1.2rem;
  font-weight: 600;
}

.dev-export-tabs {
  display: flex;
  gap: 0.4em;
  margin: 0.6em 0 0.2em;
}

.dev-export-tab {
  font-family: inherit;
  font-size: 0.85rem;
  color: rgba(244, 233, 234, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 0.3em 0.7em;
  cursor: pointer;
}

.dev-export-tab.is-active {
  color: #f4e9ea;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}

.dev-export textarea {
  width: 100%;
  height: min(50dvh, 360px);
  margin-top: 0.6em;
  font-family: 'Cormorant Garamond', monospace;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #f4e9ea;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 0.7em;
  white-space: pre;
  overflow: auto;
}

.dev-export .dev-btn {
  margin-top: 0.8em;
}

.dev-copy-feedback {
  margin-left: 0.6em;
  font-size: 0.85rem;
  font-style: italic;
  color: #a8e0b8;
}

/* ---------- Simulación de móvil en el lienzo de edición ---------- */

body.editing-mobile {
  --envelope-w: 130px;
  --focus-scale: 2.1;
  --photo-w: 84px;
  background: #150c10;
}

body.editing-mobile .scene {
  width: 390px;
  height: 780px;
  margin: 4.6em auto 2em;
  border-radius: 30px;
  border: 7px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ---------- Vista previa por resolución (miniaturas de solo lectura) ---------- */

.dev-preview {
  top: 3.5em;
  left: 50%;
  bottom: 2em;
  transform: translate(-50%, 0) translateY(10px);
  width: min(920px, 94vw);
  overflow-y: auto;
}

.dev-preview.is-visible {
  transform: translate(-50%, 0) translateY(0);
}

.dev-preview-card {
  padding: 1.2em 1.3em 1.6em;
}

.dev-preview-card h3 {
  margin: 0 0 0.3em;
  font-size: 1.2rem;
  font-weight: 600;
}

.dev-preview-card h4 {
  margin: 1.1em 0 0.5em;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(244, 233, 234, 0.85);
  text-transform: uppercase;
}

.dev-preview-toolbar {
  margin-top: 0.6em;
}

.dev-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.dev-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
}

.dev-thumb-frame-outer {
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #fff;
}

.dev-thumb-frame {
  transform-origin: top left;
  pointer-events: none;
}

.dev-thumb-frame iframe {
  border: 0;
  display: block;
}

.dev-thumb-caption {
  font-size: 0.75rem;
  color: rgba(244, 233, 234, 0.7);
  text-align: center;
}

.dev-thumb-actions {
  display: flex;
  gap: 0.5em;
}

.dev-thumb-link {
  font-family: inherit;
  font-size: 0.75rem;
  color: #f4e9ea;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  padding: 0.25em 0.6em;
  cursor: pointer;
  text-decoration: none;
}

.dev-thumb-link:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* =========================================================
   Accesibilidad de movimiento
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-move: 0.2s;
    --t-flap: 0.15s;
    --t-seal: 0.08s;
    --t-reveal: 0.2s;
    --t-fast: 0.15s;
    --t-hover: 0.1s;
  }

  .envelope:hover:not(.is-active) {
    transform: translate(-50%, -50%) rotate(var(--rot));
  }
}

/* =========================================================
   Ajustes finos para pantallas pequeñas
   ========================================================= */

@media (max-width: 380px) {
  .letter-scroll {
    padding: 15% 9% 12%;
  }

  .letter-asunto {
    font-size: 1.5rem;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .letter-reader {
    width: min(70vw, 420px);
    max-height: 88dvh;
  }

  .letter-scroll {
    max-height: 88dvh;
  }
}