/* Invitación Dani & Char — medidas en cqw: 1cqw = 10,8 pt del diseño (1080 pt de ancho) */

@font-face { font-family: "Rum Raisin"; src: url(fonts/rum-raisin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 300; src: url(fonts/inter-300-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 400; src: url(fonts/inter-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 500; src: url(fonts/inter-500-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 700; src: url(fonts/inter-700-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 400; font-style: italic; src: url(fonts/inter-400-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 700; font-style: italic; src: url(fonts/inter-700-italic.woff2) format("woff2"); font-display: swap; }

:root {
  --papel: #f9f2e5;
  --tinta: #20201f;
  --lacre: #75170e;
  --titulo: "Rum Raisin", Georgia, serif;
  --texto: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  -webkit-font-smoothing: antialiased;
}
body.cerrado { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2 { margin: 0; font-weight: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Sobre ---------- */
.sobre { display: none; }
.js .sobre {
  display: block;
  position: fixed; inset: 0; z-index: 10;
  overflow: hidden;
  background: #efe6d6;
}
.sobre__marco {
  /* cubre la pantalla conservando la proporción 9:16 del diseño */
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 100dvh * 9 / 16);
  aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
@supports not (height: 100dvh) {
  .sobre__marco { width: max(100vw, 100vh * 9 / 16); }
}
/* Pantallas anchas (tablet, computador): el sobre entero, como tarjeta */
@media (min-aspect-ratio: 3/4) {
  .sobre__marco { width: min(100vw, 100dvh * 9 / 16); box-shadow: 0 20px 60px rgb(60 40 20 / .18); }
}
.sobre__mitad {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform 1.1s cubic-bezier(.7, 0, .2, 1), opacity 1.1s ease;
}
.sobre__mitad--izq { clip-path: inset(0 50% 0 0); }
.sobre__mitad--der { clip-path: inset(0 0 0 50%); }
.sobre__sello {
  position: absolute; left: 50%; top: 51.5%;
  width: 34cqw; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; padding: 0;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sobre__sello::after {
  content: ""; position: absolute; inset: 6%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(117 23 14 / .45);
  animation: latido 2.2s ease-out infinite;
}
.sobre__sello:focus-visible { outline: 3px solid var(--lacre); outline-offset: 4px; }
.sobre__aviso {
  position: absolute; left: 0; right: 0; top: 68.6%;
  text-align: center;
  font: 500 2.9cqw/1.22 var(--texto);
  text-transform: uppercase;
  color: var(--lacre);
  pointer-events: none;
  transition: opacity .4s ease;
}
@keyframes latido {
  0% { box-shadow: 0 0 0 0 rgb(117 23 14 / .4); }
  70%, 100% { box-shadow: 0 0 0 7cqw rgb(117 23 14 / 0); }
}

.sobre.abierto { pointer-events: none; }
.sobre.abierto .sobre__aviso { opacity: 0; }
.sobre.abierto .sobre__sello { display: none; }
.sobre.abierto .sobre__mitad--izq { transform: translateX(-102%) rotate(-4deg); }
.sobre.abierto .sobre__mitad--der { transform: translateX(102%) rotate(4deg); }
.sobre.abierto { background: transparent; transition: background .5s ease; }
.sobre.fuera { display: none; }

/* ---------- Invitación ---------- */
.inv {
  container-type: inline-size;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 13.8vw;
  overflow: hidden;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
@media (min-width: 480px) { .inv { padding-bottom: 66px; } }

.inv > * { margin-top: calc(var(--gap, 0) * 1cqw); }
.inv > img, .boton { width: calc(var(--w, 100) * 1cqw); translate: calc(var(--dx, 0) * 1cqw) 0; }
.boton { display: block; transition: transform .2s ease; }
.boton:active { transform: scale(.97); }
.boton img { width: 100%; }

.cielo { position: relative; width: 100%; height: 22.2cqw; margin-top: 11.1cqw; }
.cielo img { position: absolute; }
.cielo__sol { left: 10.6cqw; top: 0; width: 21.8cqw; animation: girar 60s linear infinite; }
.cielo__estrellas { left: 42.6cqw; top: 10.4cqw; width: 14.8cqw; animation: titilar 3.2s ease-in-out infinite; }
.cielo__luna { left: 74.1cqw; top: .9cqw; width: 14.8cqw; animation: mecer 7s ease-in-out infinite; }

/* Títulos en Rum Raisin: mayúsculas con la inicial más alta, como en el diseño */
.titulo { font-family: var(--titulo); text-transform: uppercase; line-height: .95; letter-spacing: -.01em; }
.titulo .ini { font-size: 1.28em; line-height: 0; }
.titulo .ini--xl { font-size: 1.75em; }
.titulo .pre, .titulo .sub, .titulo .linea { display: block; }
.titulo .pre { font-size: .55em; margin-bottom: .05em; }

.fecha { font-size: 5.4cqw; text-transform: none; }
.t-nombres { font-size: 7cqw; }
.t-nombres .amp { font-size: 1.1em; margin: 0 .02em; }
.hashtag { font: italic 300 3.4cqw/1.18 var(--texto); letter-spacing: .02em; margin-top: .3cqw; }
.t-1 { font-size: 6cqw; }
.t-2 { font-size: 7.4cqw; }
.t-pinta { font-size: 9cqw; }
.t-3 { font-size: 7.6cqw; }
.t-3 .sub { font-size: .66em; }
.t-4 { font-size: 6.4cqw; }
.t-4 .linea { font-size: 1.12em; }

.cuenta { display: flex; justify-content: center; gap: 4.2cqw; }
.cuenta__u { display: flex; flex-direction: column; align-items: center; }
.cuenta__n { font: 700 13cqw/1 var(--texto); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.cuenta__l { font: 300 3.33cqw/1.2 var(--texto); margin-top: .9cqw; }

.texto { font-style: italic; font-size: 3.4cqw; line-height: 1.18; letter-spacing: .03em; }
.texto b { font-weight: 700; }
.texto .sep { margin-top: 1.18em; }
.texto .sep2 { margin-top: 2.1em; }
.texto .parrafo {
  font-style: normal; font-size: 2.9cqw; letter-spacing: 0; line-height: 1.19;
  max-width: 50cqw; margin: 1.8cqw auto 0;
}
.copiable { cursor: pointer; text-decoration: underline dotted rgb(32 32 31 / .35); text-underline-offset: .2em; }

.ola { width: 92.1cqw; }
.recuerda { font: 400 3.5cqw/1.2 var(--texto); }

.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 20;
  transform: translate(-50%, 20px);
  background: var(--tinta); color: var(--papel);
  font: 500 14px/1 var(--texto);
  padding: 10px 16px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* Movimiento */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.visto { opacity: 1; transform: none; }
.mariposa { animation: volar 5s ease-in-out infinite; }

@keyframes girar { to { rotate: 360deg; } }
@keyframes titilar { 50% { opacity: .55; scale: .94; } }
@keyframes mecer { 50% { rotate: -6deg; } }
@keyframes volar { 50% { translate: 0 -1.6cqw; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}