/* Nomeolvides — muro de corcho con polaroids.
   Paleta: pared verde botánico, corcho tostado, crema polaroid,
   azul myosotis #73A9E8, centro amarillo #F2C14E, follaje #4E7A45. */

:root {
  --wall: #20362a;
  --wall-deep: #16261c;
  --cork: #c99e6e;
  --wood: #8a5a33;
  --wood-dark: #6f4423;
  --cream: #fbf7ee;
  --paper: #f6f1e4;
  --ink: #3a4a3a;
  --ink-soft: #6b7a63;
  --myosotis: #73a9e8;
  --myosotis-light: #a9cbf2;
  --heart: #f2c14e;
  --leaf: #4e7a45;
  --leaf-deep: #3b6234;
  --washi: rgba(183, 201, 168, 0.68);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: #c8d9bd; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #33452f;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(255, 255, 252, 0.55) 0%, rgba(255, 255, 252, 0) 62%),
    linear-gradient(#e9f0e0, #c8d9bd 900px);
  overflow-x: hidden;
}

/* follaje fantasma en esquinas */
.foliage {
  position: fixed;
  width: min(34vw, 400px);
  height: auto;
  opacity: 0.16;
  filter: saturate(0.75);
  pointer-events: none;
  z-index: 0;
}
.foliage-tl { top: -30px; left: -50px; }
.foliage-br { bottom: -30px; right: -50px; }

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(2.4rem, 6vw, 4.2rem) 1.2rem 1.6rem;
}
.hero-sprig { height: 76px; width: auto; margin-bottom: 0.4rem; }
.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--myosotis-light);
}
h1 {
  margin: -0.2rem 0 0.7rem;
  font-family: "Parisienne", cursive;
  font-weight: 400;
  font-size: clamp(3.4rem, 9vw, 5.4rem);
  line-height: 1.15;
  color: #2e4a2a;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.5), 0 0 40px rgba(115, 169, 232, 0.25);
}
.dedica {
  margin: 0 auto;
  max-width: 36rem;
  font-style: italic;
  font-size: clamp(1.12rem, 2.6vw, 1.32rem);
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: #4d6047;
}
.dedica em { color: #3f74b8; }

/* ── Tablero ──────────────────────────────────────────── */
main { position: relative; z-index: 1; padding: 1.8rem 1rem 2.4rem; }

.board-frame {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(12px, 1.8vw, 20px);
  border-radius: 20px;
  background: linear-gradient(172deg, #96683c, var(--wood) 40%, var(--wood-dark));
  box-shadow:
    inset 0 2px 3px rgba(255, 235, 205, 0.35),
    inset 0 -3px 5px rgba(0, 0, 0, 0.45),
    0 24px 60px -18px rgba(0, 0, 0, 0.6);
}

.cork {
  position: relative;
  border-radius: 10px;
  padding: clamp(26px, 4.5vw, 54px);
  padding-bottom: clamp(120px, 15vw, 160px); /* banda inferior: flor prensada */
  background:
    radial-gradient(circle at 22% 32%, rgba(60, 34, 12, 0.09) 1px, transparent 1.6px) 0 0 / 26px 22px,
    radial-gradient(circle at 68% 58%, rgba(255, 240, 214, 0.08) 1px, transparent 1.7px) 7px 9px / 31px 27px,
    radial-gradient(circle at 45% 82%, rgba(60, 34, 12, 0.07) 1.3px, transparent 1.9px) 13px 3px / 23px 29px,
    linear-gradient(160deg, #cda276, #c2946a 55%, #b9895f);
  box-shadow: inset 0 3px 14px rgba(46, 26, 8, 0.5), inset 0 -2px 8px rgba(46, 26, 8, 0.3);
}

/* enredaderas colgando sobre el marco */
.vine {
  position: absolute;
  top: -10px;
  width: 130px;
  height: 150px;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(20, 12, 4, 0.35));
}
.vine-l { left: 3%; }
.vine-r { right: 4%; }
.swing {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: sway 7.5s ease-in-out infinite alternate;
}
.vine .s2 { animation-duration: 9s; animation-delay: -2.5s; }
@keyframes sway {
  from { transform: rotate(-2.2deg); }
  to { transform: rotate(2.6deg); }
}

/* flor prensada con washi */
.pressed {
  position: absolute;
  right: 44px;
  bottom: 34px;
  width: 96px;
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 2;
}
.pressed svg {
  width: 100%;
  height: auto;
  filter: saturate(0.75) drop-shadow(1px 3px 3px rgba(46, 26, 8, 0.35));
}
.washi {
  position: absolute;
  width: 62px;
  height: 17px;
  background: var(--washi);
  box-shadow: 0 1px 2px rgba(46, 26, 8, 0.25);
}
.washi-a { top: -4px; left: -18px; transform: rotate(-38deg); }
.washi-b { bottom: 14px; right: -20px; transform: rotate(-42deg); }
.pressed-label {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%) rotate(-4deg);
  font-family: "Caveat", cursive;
  font-size: 1.05rem;
  color: #4a3520;
  white-space: nowrap;
}

.empty-note {
  width: max-content;
  max-width: 80%;
  margin: 0 auto 26px;
  padding: 14px 22px;
  transform: rotate(-2deg);
  background: var(--cream);
  color: var(--ink);
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 8px 18px -6px rgba(46, 26, 8, 0.5);
}

/* ── Muro de polaroids ────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 46px 30px;
  align-items: start;
}

.card-slot { animation: settle 0.55s calc(var(--i, 0) * 70ms) both; }
@keyframes settle {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}

.polaroid {
  position: relative;
  margin: 0;
  aspect-ratio: 88 / 107;
  perspective: 900px;
}

.card {
  transform: rotate(var(--rot, 0deg)) translate(var(--dx, 0), var(--dy, 0));
  transition: transform 0.35s ease;
  cursor: pointer;
}
.card:hover { transform: rotate(calc(var(--rot, 0deg) * 0.35)) translateY(-5px); }

.pin {
  position: absolute;
  top: -8px;
  left: calc(50% + var(--pinx, 0px));
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 46%), var(--pin, #d96c5f);
  box-shadow: 0 2px 3px rgba(30, 16, 4, 0.4), 0 7px 9px -3px rgba(30, 16, 4, 0.3);
  z-index: 3;
}

.flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.15, 0.25, 1);
}
.card.flipped .flip { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--cream);
  box-shadow: 0 10px 26px -8px rgba(36, 20, 6, 0.55), 0 2px 6px rgba(36, 20, 6, 0.25);
  padding: 7.5% 7.5% 0;
  display: flex;
  flex-direction: column;
}

.photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ded8ca;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04) contrast(1.02);
}

.caption {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px 6px;
  font-family: "Caveat", cursive;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.1;
  color: var(--ink);
  text-align: center;
  overflow: hidden;
}
.pdate {
  position: absolute;
  right: 9%;
  bottom: 4%;
  font-family: "Caveat", cursive;
  font-size: 0.85rem;
  color: #9b9077;
  transform: rotate(-2deg);
}

/* reverso */
.back {
  transform: rotateY(180deg);
  padding: 12% 10%;
  background:
    repeating-linear-gradient(transparent 0 25px, rgba(78, 122, 69, 0.16) 25px 26px),
    var(--cream);
  justify-content: flex-start;
  gap: 4px;
}
.doodle {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 22px;
  height: 22px;
  opacity: 0.85;
}
.nota {
  margin: 0;
  flex: 1;
  overflow: auto;
  font-family: "Caveat", cursive;
  font-size: 1.22rem;
  line-height: 25px;
  color: var(--ink);
  white-space: pre-line;
}
.bdate {
  font-family: "Caveat", cursive;
  font-size: 0.95rem;
  color: #9b9077;
}
.del {
  position: absolute;
  right: 10px;
  bottom: 8px;
  border: 0;
  background: none;
  padding: 2px 4px;
  font-family: "Caveat", cursive;
  font-size: 0.98rem;
  color: #9b6a4f;
  text-decoration: underline dotted;
  cursor: pointer;
}
.del.arm { color: #b03a2e; font-weight: 700; }

/* tarjeta para añadir */
.add-card {
  aspect-ratio: 88 / 107;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px dashed rgba(251, 247, 238, 0.55);
  border-radius: 4px;
  background: rgba(251, 247, 238, 0.07);
  color: var(--cream);
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  cursor: pointer;
  transform: rotate(1.5deg);
  transition: transform 0.3s ease, background 0.3s ease;
}
.add-card:hover {
  transform: rotate(0deg) translateY(-4px);
  background: rgba(251, 247, 238, 0.14);
}
.add-flor { width: 36px; height: 36px; }

.foot {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0.6rem 1rem 2.2rem;
  font-family: "Caveat", cursive;
  font-size: 1.15rem;
  color: rgba(77, 96, 71, 0.8);
}

/* ── Modal ────────────────────────────────────────────── */
dialog {
  border: 0;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  width: min(680px, 92vw);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
dialog::backdrop { background: rgba(10, 18, 12, 0.62); backdrop-filter: blur(3px); }

dialog h2 {
  margin: 0 0 1rem;
  font-style: italic;
  font-weight: 500;
  font-size: 1.85rem;
  color: #2e4a2a;
}
.modal-grid {
  display: grid;
  grid-template-columns: 215px 1fr;
  gap: 26px;
  align-items: start;
}
.preview-pol {
  width: 200px;
  margin: 8px auto 0;
  transform: rotate(-3deg);
  perspective: none;
}
.preview-pol .pin { top: -8px; }
.preview-pol,
.preview-pol .photo { cursor: default; }
.preview-pol .caption { min-height: 2rem; }
/* preview no flip: es un face plano */
.preview-pol {
  background: var(--cream);
  box-shadow: 0 10px 26px -8px rgba(36, 20, 6, 0.45);
  padding: 7.5% 7.5% 0;
  display: flex;
  flex-direction: column;
  aspect-ratio: 88 / 107;
}
.prev-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed #a8a08c;
  color: #7d8474;
  font-family: "Caveat", cursive;
  font-size: 1.05rem;
}
.prev-empty svg { width: 30px; height: 30px; opacity: 0.7; }

.fields { display: flex; flex-direction: column; gap: 12px; }
.fld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a6b52;
}
.fld input,
.fld textarea {
  border: 1px solid #d9cfba;
  border-radius: 8px;
  background: #fffdf7;
  padding: 8px 11px;
  font-family: "Caveat", cursive;
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
}
.fld input[type="date"] { font-family: inherit; font-size: 1rem; }
.fld input:focus,
.fld textarea:focus { outline: 2px solid var(--myosotis); outline-offset: 1px; }
.fld textarea { resize: vertical; min-height: 74px; }

.file-btn { display: block; cursor: pointer; }
.file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-btn span {
  display: block;
  text-align: center;
  padding: 11px;
  border: 1.5px dashed #7fa36b;
  border-radius: 10px;
  color: var(--leaf);
  font-family: "Caveat", cursive;
  font-size: 1.25rem;
  transition: background 0.25s ease;
}
.file-btn:hover span,
.file-btn input:focus-visible + span { background: rgba(127, 163, 107, 0.12); }

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}
.primary {
  border: 0;
  border-radius: 999px;
  padding: 9px 24px;
  background: linear-gradient(#4e7a45, #3b6234);
  color: var(--paper);
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 6px 14px -4px rgba(59, 98, 52, 0.6);
}
.primary:disabled { opacity: 0.6; cursor: wait; }
.ghost {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  cursor: pointer;
}

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: #2e4a2a;
  color: #f1eddf;
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
  z-index: 50;
}

:focus-visible { outline: 2px dashed var(--myosotis-light); outline-offset: 3px; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 28px 14px; }
  .cork { padding: 18px; padding-bottom: 104px; }
  .pressed { right: 26px; bottom: 20px; width: 74px; }
  .pressed-label { font-size: 0.9rem; bottom: -20px; }
  .vine { width: 96px; height: 112px; }
  .vine-r { right: 2%; }
  .modal-grid { grid-template-columns: 1fr; }
  .preview-side { display: flex; justify-content: center; }
  .preview-pol { width: 168px; margin-top: 2px; }
  .caption { font-size: 1.05rem; }
  .front .pdate { display: none; } /* la fecha vive al reverso */
}

@media (prefers-reduced-motion: reduce) {
  .swing { animation: none; }
  .card-slot { animation: none; }
  .flip { transition: none; }
  .card, .add-card { transition: none; }
}