@import url('https://fonts.googleapis.com/css2?family=Allura&family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{--wine:#62021e;--berry:#8b4158;--dust:#dda5b5;--pink:#fae8ec;--cream:#fff4eb;--paper:#fffcf7;--ink:#5a2030;font-family:'Montserrat',Arial,sans-serif;color:var(--wine);background:var(--cream);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 13% 15%,#fffefa 0,transparent 34%),radial-gradient(circle at 87% 43%,#f5dce1 0,transparent 39%),#fff4eb}button,textarea{font:inherit}.shell{width:min(100%,850px);margin:auto;padding:14px 18px 34px;text-align:center}.brand{display:flex;flex-direction:column;align-items:center}.brand-logo{display:block;width:clamp(145px,24vw,212px);height:auto;object-fit:contain;margin:-10px auto -5px}.event-id{font-size:10px;font-weight:700;letter-spacing:.22em;color:#9a6070}.event-id span{padding:0 5px}.hero{position:relative}.hero h1{font-family:'Montserrat',Arial,sans-serif;font-weight:700;font-size:clamp(32px,5vw,52px);letter-spacing:-.055em;line-height:1.17;margin:25px 0 2px}.hero h1 span{color:#9b4a60}.hero-description{color:#78515d;font-size:13px;line-height:1.7;margin:8px auto 23px}.hero-description strong{color:var(--wine)}.scribble{position:absolute;color:#bd788e;pointer-events:none}.scribble-one{font-size:31px;left:7%;top:55px;transform:rotate(15deg)}.scribble-two{font-size:29px;right:5%;bottom:35px}.letter{position:relative;text-align:left;background:var(--paper);border:1px solid #e8cfc9;box-shadow:0 8px 38px #62021e1b;border-radius:3px;transform:rotate(-1deg);padding:28px 35px 30px;z-index:1}.letter-top{display:flex;justify-content:space-between;align-items:center}.letter-kicker{font-size:10px;letter-spacing:.23em;font-weight:700;color:#ad7a8c}.little-heart{font-size:30px;color:#c78497;line-height:1}.script-intro{font-family:'Allura','Brush Script MT',cursive;font-size:54px;line-height:.95;margin:22px 0 10px;color:#9e4561}.letter h2{font-family:'Montserrat',sans-serif;font-size:clamp(21px,3.6vw,29px);font-weight:700;line-height:1.32;letter-spacing:-.045em;margin:0 0 10px}.letter-copy{color:#80626b;font-size:13px;line-height:1.75;margin:0 0 24px}.letter label{font-size:12px;display:block;font-weight:700;margin:0 0 10px}.letter textarea{resize:vertical;min-height:133px;width:100%;border:1px solid #e8c9d0;border-radius:5px;background:#fffdfb;padding:16px;color:var(--wine);font-size:13px;line-height:1.6;outline:none;display:block}.letter textarea:focus{border-color:#a75d77;box-shadow:0 0 0 3px #f7e0e8}.letter textarea::placeholder{color:#ad929a}.form-foot{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#a0828b;margin:9px 0 18px}.letter button{cursor:pointer}.letter form button{border:0;width:100%;background:var(--wine);color:#fff8f5;border-radius:5px;font-size:13px;letter-spacing:.02em;font-weight:700;padding:16px;transition:background .2s,transform .2s}.letter form button:hover{background:#8b2445;transform:translateY(-1px)}.letter form button:disabled{opacity:.55;cursor:wait}.letter form button span{font-size:17px;margin-left:7px}.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}#message{font-size:12px;color:#a52c4f;margin:8px 0 0}.footer{font-size:10px;letter-spacing:.15em;font-weight:800;margin:12px 0;color:var(--wine)}.privacy{font-size:10px;color:#95727e;max-width:530px;line-height:1.6;margin:0 auto 18px}.success{text-align:center;padding:35px 5px}.success-icon{font-size:55px;color:#a34d69}.success h2{font-size:25px}.success p{color:#78515d;font-size:13px;line-height:1.8}.subtle{border:1px solid var(--wine);color:var(--wine);border-radius:5px;padding:12px 17px;background:transparent;font-weight:700;font-size:12px;margin-top:12px}[hidden]{display:none!important}
.hero h1 span{font-family:'Allura','Brush Script MT',cursive;font-size:1.25em;font-weight:400;letter-spacing:0;line-height:.8}
.scribble-one,.scribble-two,.little-heart{display:none}
/* Reparte el texto en líneas parejas: evita una palabra sola en la última línea */
.hero-description,.hero h1{text-wrap:balance}
/* ───────── Sobre ───────── */
.envelope-scene{
  --side:42px;        /* margen lateral entre sobre y carta */
  --base:14px;        /* espacio bajo el sobre (sombra) */
  --back-h:410px;     /* alto del cuerpo del sobre: más alto = la hoja se ve más adentro */
  --pocket-h:172px;   /* alto del bolsillo frontal */
  --tuck:calc(var(--pocket-h) * .66); /* cuánto se mete la carta en el bolsillo: debe pasar la "V" (58%) para que no se vea el fondo */
  --flap-h:300px;     /* alto de la solapa: al cerrar, su punta llega al sello */
  --seal:84px;
  --tip:45%;          /* punta de la pieza inferior del bolsillo */
  position:relative;width:min(100%,630px);margin:0 auto 4px;isolation:isolate;
  padding:34px var(--side) calc(var(--base) + var(--pocket-h) - var(--tuck));
  filter:drop-shadow(0 16px 20px #62021e17)
}
/* cuerpo trasero: el interior del sobre */
.envelope-back{
  position:absolute;left:0;right:0;bottom:var(--base);height:var(--back-h);z-index:0;border-radius:14px;
  background:linear-gradient(180deg,#c97d93 0%,#dc9fb0 22%,#e7b5c2 100%);
  box-shadow:0 26px 50px #62021e26,inset 0 18px 26px -10px #62021e40,inset 0 0 0 1px #c9799140
}
/* solapa: abierta apunta hacia arriba; cerrada gira y cae sobre el frente */
.envelope-flap{
  position:absolute;left:5px;right:5px;height:var(--flap-h);z-index:0;
  bottom:calc(var(--base) + var(--back-h) - 1px);
  transform-origin:50% 100%;transform:perspective(1100px) rotateX(0deg);transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.5,0,.3,1),z-index 0s .33s
}
.envelope-flap::before,.envelope-flap::after{content:"";position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.envelope-flap::before{ /* cara interior, con forro de puntitos */
  clip-path:polygon(0 100%,50% 0,100% 100%);border-radius:14px 14px 0 0;
  background:radial-gradient(#fff6 1.2px,transparent 1.6px) 0 0/14px 14px,linear-gradient(0deg,#d48ca1 0%,#ecc0cb 70%,#f4d3da 100%)
}
.envelope-flap::after{ /* cara exterior, se ve al cerrar */
  transform:rotateX(180deg);clip-path:polygon(0 0,50% 100%,100% 0);
  background:linear-gradient(180deg,#f6dbe1 0%,#ebbac6 60%,#df9fb1 100%)
}
/* la ranura recorta la carta al borde inferior del sobre para que pueda "entrar" */
.letter-slot{
  position:relative;z-index:1;overflow:hidden;overflow:clip;
  margin:-34px calc(var(--side) * -1) calc((var(--pocket-h) - var(--tuck)) * -1);
  padding:34px var(--side) calc(var(--pocket-h) - var(--tuck))
}
.letter{
  border-color:#e2c3c2;border-radius:16px 16px 4px 4px;box-shadow:0 12px 38px #62021e24,0 2px 7px #62021e12;
  transform:rotate(-.55deg) translateY(-2px);padding-bottom:calc(var(--tuck) + 10px);
  transition:transform .85s cubic-bezier(.2,.8,.2,1);
  animation:letter-rise 1s .25s cubic-bezier(.2,.8,.2,1) backwards
}
@keyframes letter-rise{from{transform:rotate(0) translateY(48%)}}
/* bolsillo frontal: dos laterales + pieza inferior */
.envelope-pocket{position:absolute;left:0;right:0;bottom:var(--base);height:var(--pocket-h);z-index:2;pointer-events:none;border-radius:0 0 14px 14px;overflow:hidden}
.pocket-side,.pocket-bottom{position:absolute;inset:0}
.pocket-side::before,.pocket-bottom::before{content:"";position:absolute;inset:0}
.pocket-left{filter:drop-shadow(3px 0 3px #62021e1a)}
.pocket-left::before{clip-path:polygon(0 0,52% 58%,0 100%);background:linear-gradient(100deg,#e7b3c0 0%,#dc9cad 100%)}
.pocket-right{filter:drop-shadow(-3px 0 3px #62021e1a)}
.pocket-right::before{clip-path:polygon(100% 0,48% 58%,100% 100%);background:linear-gradient(260deg,#dc9aac 0%,#d38a9f 100%)}
.pocket-bottom{filter:drop-shadow(0 -3px 4px #62021e22)}
.pocket-bottom::before{clip-path:polygon(0 100%,50% var(--tip),100% 100%);background:linear-gradient(180deg,#f1cbd4 0%,#e5aebd 55%,#d897a9 100%)}
/* sello de lacre, centrado en la punta de la pieza inferior */
.seal{
  position:absolute;left:50%;z-index:5;width:var(--seal);height:var(--seal);pointer-events:none;
  bottom:calc(var(--base) + var(--pocket-h) * (1 - .45) - var(--seal) / 2);transform:translateX(-50%);
  background:url('./images/sello-tinto.png') center/contain no-repeat;filter:drop-shadow(0 5px 6px #62021e42)
}
/* ── animación de envío ── */
.envelope-scene.is-sending .letter{transform:rotate(0) translateY(calc(100% + 40px));transition:transform .7s cubic-bezier(.55,0,.75,.2)}
.envelope-scene.is-sealed .envelope-flap{transform:perspective(1100px) rotateX(180deg);z-index:4;transition:transform .65s cubic-bezier(.5,0,.3,1),z-index 0s .2s}
.envelope-scene.is-sealed .seal{animation:seal-press .55s .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes seal-press{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.22) rotate(-8deg)}100%{transform:translateX(-50%) scale(1)}}
.letter{display:flex;flex-direction:column}.success{margin:auto 0}.success h2:focus{outline:none}
@media(prefers-reduced-motion:reduce){.letter,.envelope-flap,.envelope-scene.is-sending .letter,.envelope-scene.is-sealed .envelope-flap{transition-duration:.01ms;animation:none}.envelope-scene.is-sealed .seal{animation:none}}
@media(max-width:560px){
  .shell{padding:0 12px 24px}.brand-logo{width:160px;margin:-2px auto -10px}.event-id{font-size:9px;letter-spacing:.14em}.hero h1{font-size:32px;margin-top:26px}.hero-description{font-size:12px;max-width:280px}.letter{padding:22px 18px calc(var(--tuck) + 8px)}.script-intro{font-size:49px;margin-top:17px}.letter h2{font-size:22px}.letter-copy{font-size:12px}.letter textarea{min-height:120px}.scribble-one{left:0;top:80px;font-size:21px}.scribble-two{right:0}.footer{font-size:9px}.form-foot{font-size:9px}
  .envelope-scene{--side:22px;--base:10px;--back-h:270px;--pocket-h:112px;--flap-h:196px;--seal:60px;padding-top:16px}
  .letter-slot{margin-top:-16px;padding-top:16px}
}
/* ───────── Validación del formulario ───────── */
.field-error{display:flex;align-items:flex-start;gap:7px;margin:8px 0 0;font-size:12px;font-weight:600;line-height:1.45;color:#a52c4f}
.field-error:empty{display:none}
.field-error::before{content:"!";flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#a52c4f;color:#fff;font-size:11px;font-weight:800;line-height:1}
.letter textarea.is-invalid{border-color:#c0476a;background:#fff8f9}
.letter textarea.is-invalid:focus{border-color:#a52c4f;box-shadow:0 0 0 3px #f9d9e2}
#remaining.is-near-limit{color:#a52c4f;font-weight:700}
.field-error:not(:empty){animation:field-error-in .2s ease-out}
@keyframes field-error-in{from{opacity:0;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.field-error:not(:empty){animation:none}}

/* ───────── Panel privado ───────── */
.admin-shell{max-width:1240px;margin:auto;padding:26px 20px 70px}
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;flex-wrap:wrap}
.admin-head h1{font-size:34px;letter-spacing:-.04em;margin:12px 0 4px}
.admin-head a{color:var(--wine);font-size:13px;font-weight:600}
.admin-sub{margin:0;color:#876372;font-size:13px}
.topmark{font-size:17px;letter-spacing:.12em;font-weight:800}
.topmark span{font-size:10px;display:block;letter-spacing:.15em;margin-top:5px}
.toolbar{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;margin:22px 0 18px}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--wine)}
.refresh{border:1px solid #b78d98;background:#fffaf5;color:var(--wine);padding:9px 14px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer}
.sync{font-size:12px;color:#97727e}
.boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.board{background:#fffaf5;border:1px solid #e8c8cd;border-radius:16px;box-shadow:0 5px 25px #630c2b0a;overflow:hidden}
.board-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid #efd6db;background:#fdf1f3}
.board-head h2{margin:0;font-size:20px;letter-spacing:-.02em}
.board-head small{font-size:12px;font-weight:500;color:#97727e;letter-spacing:0;margin-left:6px}
.board-count{font-size:12px;font-weight:700;color:#8b4158}
.qlist{list-style:none;margin:0;padding:0}
.qrow{padding:14px 20px 12px;border-bottom:1px solid #f1dfe2}
.qrow:last-child{border-bottom:0}
.qrow.is-priority{background:#fdeef1;box-shadow:inset 4px 0 0 var(--wine)}
.qcheck{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.qcheck input{flex:none;width:22px;height:22px;margin:3px 0 0;accent-color:var(--wine);cursor:pointer}
.qtext{font-size:18px;line-height:1.5;color:var(--wine);white-space:pre-wrap;overflow-wrap:anywhere}
.qrow.is-answered .qtext{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#b0899566;color:#a88d95}
.qmeta{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:8px 0 0 34px;font-size:12px;color:#97727e}
.qstar,.qdelete{border:0;background:none;padding:4px 0;font:inherit;font-weight:700;cursor:pointer}
.qstar{color:#8b4158}
.qstar[aria-pressed="true"]{color:var(--wine)}
.qdelete{color:#aa2742;opacity:.7;margin-left:auto}
.qdelete:hover{opacity:1}
.qrow.is-answered .qstar{display:none}
.qempty{padding:28px 20px;text-align:center;color:#97727e;font-size:14px}
@media(max-width:820px){.boards{grid-template-columns:1fr}.qtext{font-size:17px}.admin-head h1{font-size:28px}}