/* Página «Envía una postal» (postal.html + assets/postal.js?v=8bfa6dc2f4).
   La postal misma es "papel": se ve siempre clara, también en modo oscuro. */
#postal{
  --pc-paper:#FFFBF4; --pc-paper-2:#F6EDDD; --pc-ink:#1D1712; --pc-soft:#6B5D4F;
  --pc-line:#D9C9AE; --pc-red:#CA2632; --pc-blue:#2B4C8C;
  --pc-hand:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --pc-w:min(780px, calc(100vw - 40px));
  max-width:1140px; margin:0 auto; padding:0 20px 110px; color:var(--ink);
}
#postal *{box-sizing:border-box}
:where(#postal) button{font:inherit; color:inherit; cursor:pointer}
#postal [hidden]{display:none !important}

/* ── Encabezado ── */
.pc-head{text-align:center; margin:6px auto 16px; max-width:640px}
.pc-kicker{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; padding:5px 12px; border:1.5px dashed currentColor; border-radius:999px}
.pc-title{font-family:var(--font-display); font-weight:800; font-size:clamp(34px,6.4vw,64px); line-height:.95; text-transform:uppercase; letter-spacing:-.015em; margin:0 0 12px}
.pc-title .pc-title-ink{color:var(--accent); display:inline-block; transform:rotate(-2deg)}
.pc-sub{font-size:16px; font-weight:600; color:var(--ink); margin:12px 0 0; min-height:1.5em; transition:opacity .25s}
.pc-steps{list-style:none; display:flex; justify-content:center; gap:6px; margin:18px 0 0; padding:0; counter-reset:pcs}
.pc-steps li{counter-increment:pcs; display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:6px 12px 6px 6px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper-raised); transition:all .35s}
.pc-steps li::before{content:counter(pcs); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--line); color:var(--ink); font-size:11px; transition:all .35s}
.pc-steps li.is-on{border-color:var(--ink); color:var(--ink)}
.pc-steps li.is-on::before{background:var(--accent); color:#fff}
.pc-steps li.is-done::before{content:"✓"; background:var(--ink); color:var(--paper)}
@media (max-width:560px){ .pc-steps li{font-size:0; padding:4px} .pc-steps li::before{font-size:11px} .pc-steps li.is-on{font-size:10.5px; padding-right:10px} }

/* ── Paso 1: elegir ── */
.pc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; perspective:1200px; max-width:1100px; margin:0 auto}
@media (max-width:980px){ .pc-grid{grid-template-columns:repeat(2,1fr); max-width:720px} }

.pc-opt{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:12px; position:relative;
  transform:rotate(var(--r,0deg)); transition:transform .45s cubic-bezier(.2,.9,.25,1.2); animation:pcIn .7s cubic-bezier(.2,.9,.25,1.15) backwards; animation-delay:calc(var(--i) * 90ms)}
@keyframes pcIn{from{opacity:0; transform:translateY(40px) rotate(calc(var(--r,0deg) * 4)) scale(.9)}}
.pc-opt-card{position:relative; aspect-ratio:984/608; border-radius:10px; background:var(--pc-paper); padding:7px; border:2px solid var(--pc-ink);
  box-shadow:0 2px 0 var(--pc-ink), 0 14px 30px -12px rgba(29,23,18,.45); transform-style:preserve-3d;
  transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)); transition:transform .2s ease-out, box-shadow .3s}
.pc-opt-card img{display:block; width:100%; height:100%; object-fit:cover; border-radius:5px; pointer-events:none}
.pc-opt-card::after{content:""; position:absolute; inset:0; border-radius:8px; pointer-events:none; mix-blend-mode:soft-light; opacity:0; transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.95), transparent 55%)}
.pc-opt:focus-visible{transform:translateY(-8px) rotate(0deg) scale(1.03); z-index:2}
@media (hover:hover){
  .pc-opt:hover{transform:translateY(-8px) rotate(0deg) scale(1.03); z-index:2}
  .pc-opt:hover .pc-opt-card::after{opacity:.9}
  .pc-opt:hover .pc-opt-card{box-shadow:0 2px 0 var(--pc-ink), 0 26px 40px -14px rgba(29,23,18,.55)}
  }
.pc-opt:focus-visible .pc-opt-card{outline:3px solid var(--accent); outline-offset:4px}
.pc-opt-tag{position:absolute; top:-10px; left:14px; z-index:3; transform:translateZ(30px) rotate(-3deg); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; background:var(--pc-red); color:#fff; padding:4px 9px; border-radius:4px; border:1.5px solid var(--pc-ink)}
.pc-opt-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 4px}
.pc-opt-name{font-family:var(--font-display); font-weight:800; font-size:15px; text-transform:uppercase; line-height:1.1}
.pc-opt-go{flex:none; font-family:var(--font-display); font-weight:700; font-size:11.5px; text-transform:uppercase; border:2px solid var(--ink); border-radius:999px; padding:6px 12px; transition:all .2s}
.pc-opt:hover .pc-opt-go{background:var(--accent); color:#fff; border-color:var(--accent)}
.pc-grid.is-leaving .pc-opt{transition:transform .5s, opacity .4s; opacity:0; transform:translateY(30px) scale(.94)}
.pc-grid.is-leaving .pc-opt.is-picked{opacity:0; transition:none}

/* ── Paso 2-3: la postal ── */
.pc-stage{display:flex; flex-direction:column; align-items:center; gap:26px}
.pc-scene{width:var(--pc-w); perspective:2200px; position:relative}
.pc-card{position:relative; width:100%; aspect-ratio:984/608; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.3,1.25,.4,1)}
.pc-card.is-flipped{transform:rotateY(180deg)}
.pc-card.is-flat{transform:none; transition:none}
.pc-face{position:absolute; inset:0; border-radius:14px; background:var(--pc-paper); border:2px solid var(--pc-ink); backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 3px 0 var(--pc-ink), 0 30px 60px -24px rgba(29,23,18,.55); overflow:hidden; color:var(--pc-ink)}
.pc-front{padding:10px}
.pc-front img{display:block; width:100%; height:100%; object-fit:cover; border-radius:7px}
.pc-front-tag{position:absolute; left:22px; bottom:20px; font-family:var(--pc-hand); font-size:clamp(22px,3.4vw,34px); color:#fff; text-shadow:0 2px 0 var(--pc-ink), 0 0 14px rgba(0,0,0,.35); transform:rotate(-4deg)}
.pc-back{transform:rotateY(180deg); display:grid; grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr); gap:0 22px; padding:22px 24px;
  background:var(--pc-paper) repeating-linear-gradient(0deg, transparent 0 3px, rgba(160,130,90,.035) 3px 4px)}
.pc-card.is-flat .pc-front{visibility:hidden}
.pc-card.is-flat .pc-back{transform:none}
.pc-back::before{content:"POSTAL · LLAMITIENDA"; position:absolute; top:10px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.32em; color:var(--pc-soft); opacity:.7}
.pc-divider{background:repeating-linear-gradient(180deg, var(--pc-line) 0 8px, transparent 8px 13px); margin:26px 0 8px}

/* mensaje */
.pc-msg{display:flex; flex-direction:column; min-height:0; padding-top:14px}
.pc-tabs{display:flex; gap:4px; background:var(--pc-paper-2); border-radius:999px; padding:4px; align-self:flex-start; margin-bottom:12px; border:1.5px solid var(--pc-line)}
.pc-tab{all:unset; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:11.5px; text-transform:uppercase; padding:6px 12px; border-radius:999px; color:var(--pc-soft); display:flex; align-items:center; gap:5px; transition:all .2s}
.pc-tab:hover{color:var(--pc-ink)}
.pc-tab.is-on{background:var(--pc-ink); color:var(--pc-paper)}
.pc-tab:focus-visible{outline:2px solid var(--pc-red); outline-offset:2px}
.pc-pane{flex:1; min-height:0; display:flex; flex-direction:column; position:relative}
.pc-text{flex:1; width:100%; resize:none; border:0; outline:0; background:transparent; color:var(--pc-ink); font-family:var(--pc-hand); font-size:clamp(20px,2.6vw,26px); line-height:34px; padding:0 2px;
  background-image:linear-gradient(transparent 33px, var(--pc-line) 33px, var(--pc-line) 34px); background-size:100% 34px; background-attachment:local}
.pc-text::placeholder{color:#b4a58f}
.pc-count{position:absolute; right:2px; bottom:-2px; font-family:var(--font-mono); font-size:10.5px; color:var(--pc-soft)}
.pc-count.is-max{color:var(--pc-red)}
.pc-drop{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; cursor:pointer; border:2px dashed var(--pc-line); border-radius:12px; padding:12px; color:var(--pc-soft); transition:all .2s; position:relative; overflow:hidden; background:var(--pc-paper)}
.pc-drop:hover, .pc-drop.is-over{border-color:var(--pc-red); color:var(--pc-ink); background:#FFF5EE}
.pc-drop-ico{font-size:30px; line-height:1}
.pc-drop b{font-family:var(--font-display); font-size:13px; text-transform:uppercase; color:var(--pc-ink)}
.pc-drop small{font-size:11.5px}
.pc-drop input{position:absolute; inset:0; opacity:0; cursor:pointer}
.pc-media{flex:1; min-height:0; position:relative; border-radius:10px; overflow:hidden; background:#000; border:2px solid var(--pc-ink); transform:rotate(-1.2deg); box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.pc-media img, .pc-media video{display:block; width:100%; height:100%; object-fit:cover}
.pc-media-x{position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; border:2px solid var(--pc-ink) !important; background:var(--pc-paper) !important; color:var(--pc-ink) !important; font-size:13px; display:grid; place-items:center; z-index:2}
.pc-caption{margin-top:10px; border:0; border-bottom:1.5px solid var(--pc-line); outline:0; background:transparent; font-family:var(--pc-hand); font-size:22px; color:var(--pc-ink); padding:2px; width:100%}
.pc-caption:focus{border-color:var(--pc-ink)}

/* dirección + sello */
.pc-addr{display:flex; flex-direction:column; justify-content:flex-end; gap:14px; position:relative; padding-top:6px}
.pc-stamprow{position:absolute; top:4px; right:0; display:flex; align-items:flex-start}
.pc-stampbox{width:clamp(78px,11vw,104px); aspect-ratio:4/5; border:2px dashed var(--pc-line); border-radius:6px; display:grid; place-items:center; text-align:center; font-family:var(--font-mono); font-size:9.5px; line-height:1.35; letter-spacing:.06em; text-transform:uppercase; color:#b4a58f; padding:6px; position:relative; transition:all .25s}
.pc-stampbox.is-target{border-color:var(--pc-red); color:var(--pc-red); background:#FFF0EA; transform:scale(1.06)}
.pc-stampbox.is-pulse{animation:pcPulse 1.6s ease-in-out infinite}
@keyframes pcPulse{0%,100%{box-shadow:0 0 0 0 rgba(202,38,50,.0)}50%{box-shadow:0 0 0 7px rgba(202,38,50,.18)}}
.pc-stampbox .pc-stamp-wrap{position:absolute; inset:-4px; animation:pcThump .55s cubic-bezier(.2,1.6,.4,1) both}
.pc-stampbox .pc-stamp{width:100%; height:100%}
@keyframes pcThump{0%{transform:scale(2.1) rotate(-22deg); opacity:0} 60%{opacity:1} 100%{transform:scale(1) rotate(-4deg)}}
.pc-postmark{position:absolute; top:22px; right:clamp(52px,8vw,74px); width:clamp(96px,13vw,124px); pointer-events:none; color:rgba(29,23,18,.72); animation:pcInk .45s .45s ease-out both; mix-blend-mode:multiply}
@keyframes pcInk{0%{opacity:0; transform:scale(1.5) rotate(18deg)} 100%{opacity:1; transform:scale(1) rotate(-8deg)}}
.pc-addr-lines{display:flex; flex-direction:column; gap:12px; margin-top:auto}
.pc-line{display:flex; align-items:flex-end; gap:10px; border-bottom:1.5px solid var(--pc-line); padding-bottom:3px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pc-soft); transition:border-color .2s}
.pc-line:focus-within{border-color:var(--pc-red); border-bottom-width:2px}
.pc-line.is-bad{border-color:var(--pc-red)}
.pc-line > span{flex:none; padding-bottom:5px; min-width:46px}
.pc-line input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:var(--pc-hand); font-size:clamp(20px,2.4vw,25px); color:var(--pc-ink); padding:0; text-transform:none; letter-spacing:0}
.pc-line input::placeholder{color:#c3b49d}
/* el foco se ve en la línea (se pone roja), no con el recuadro general */
#postal .pc-line input:focus-visible, #postal .pc-text:focus-visible, #postal .pc-caption:focus-visible{outline:none !important}
.pc-de b{font-family:var(--pc-hand); font-size:clamp(20px,2.4vw,25px); font-weight:400; color:var(--pc-ink); text-transform:none; letter-spacing:0; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pc-de b.is-anon{font-family:var(--font-body); font-size:12px; color:var(--pc-soft); padding-bottom:6px}
.pc-de button{all:unset; cursor:pointer; color:var(--pc-red); text-decoration:underline; font-weight:600}

/* sellos */
.pc-stamp{--r:3.5px; width:76px; aspect-ratio:4/5; position:relative; display:block; padding:calc(2*var(--r)); background:#fffdf8;
  -webkit-mask:linear-gradient(#000 0 0) content-box, radial-gradient(var(--r), #0000 98%, #000) calc(-1.5*var(--r)) calc(-1.5*var(--r)) / calc(3*var(--r)) calc(3*var(--r)) round;
          mask:linear-gradient(#000 0 0) content-box, radial-gradient(var(--r), #0000 98%, #000) calc(-1.5*var(--r)) calc(-1.5*var(--r)) / calc(3*var(--r)) calc(3*var(--r)) round}
.pc-stamp-wrap{display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
.pc-stamp-in{width:100%; height:100%; border-radius:2px; background:var(--sc,#CA2632); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:5px 3px 4px; color:#fff; overflow:hidden; position:relative}
.pc-stamp-in::after{content:""; position:absolute; inset:2px; border:1px solid rgba(255,255,255,.55); border-radius:1px}
.pc-stamp-art{font-size:30px; line-height:1; flex:1; display:grid; place-items:center; width:100%}
.pc-stamp-art img{width:88%; height:auto; display:block}
.pc-stamp-txt{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.12em; line-height:1; font-weight:700}
.pc-stamp-val{font-family:var(--font-display); font-size:10px; line-height:1}

.pc-tray{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none; display:flex; flex-direction:column; align-items:center; gap:10px; width:var(--pc-w)}
.pc-tray-label{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:8px}
.pc-tray-label b{color:var(--ink)}
.pc-stamps{display:flex; gap:22px; justify-content:center; flex-wrap:wrap}
.pc-stamp-btn{all:unset; cursor:grab; touch-action:none; transition:transform .25s cubic-bezier(.2,1.4,.4,1); transform:rotate(var(--r,0deg))}
.pc-stamp-btn:hover{transform:translateY(-6px) rotate(0deg) scale(1.06)}
.pc-stamp-btn:focus-visible{outline:3px solid var(--accent); outline-offset:4px; border-radius:6px}
.pc-stamp-btn.is-used{opacity:.3; transform:scale(.9)}
.pc-stamp-btn .pc-stamp{pointer-events:none}
.pc-ghost{position:fixed; z-index:9999; pointer-events:none; left:0; top:0; transform:translate(-50%,-50%) rotate(-6deg) scale(1.15); transition:none; cursor:grabbing}

/* acciones */
.pc-actions{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; width:var(--pc-w)}
.pc-btn{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.02em; border:2px solid var(--ink); border-radius:999px; padding:12px 20px; color:var(--ink); background:transparent; transition:transform .15s, background .2s, color .2s, box-shadow .2s}
.pc-btn:hover{transform:translateY(-2px)}
.pc-btn:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.pc-btn--primary{background:var(--accent); color:#fff; border-color:var(--ink); box-shadow:0 3px 0 var(--ink); padding:14px 30px; font-size:14.5px}
.pc-btn--primary:hover{box-shadow:0 5px 0 var(--ink)}
.pc-btn--primary:active{transform:translateY(2px); box-shadow:0 1px 0 var(--ink)}
.pc-btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.pc-btn--ghost{border-color:transparent; text-decoration:underline; text-underline-offset:3px; padding:10px 8px; font-size:12px}
.pc-hint{font-size:13.5px; color:var(--ink-soft); margin:-10px 0 0; text-align:center; min-height:1.4em}
.pc-hint.is-err{color:var(--accent); font-weight:600}
.pc-progress{width:min(320px,80%); height:6px; border-radius:99px; background:var(--line); overflow:hidden}
.pc-progress i{display:block; height:100%; width:0; background:var(--accent); transition:width .2s}

/* animaciones de envío */
.pc-card.is-floating{animation:pcFloat 1.6s ease-in-out infinite}
@keyframes pcFloat{0%,100%{translate:0 0} 50%{translate:0 -8px}}
.pc-scene.is-sending .pc-card{transition:transform .9s cubic-bezier(.6,-.3,.7,.4), opacity .9s; transform:translate(70vw,-60vh) rotate(28deg) scale(.4) !important; opacity:0}

/* ── Enviada ── */
.pc-done{text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px 0 10px; position:relative}
.pc-done-env{width:150px; height:108px; position:relative; margin-bottom:6px; animation:pcPop .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pcPop{from{transform:scale(.3) rotate(-14deg); opacity:0}}
.pc-done h2{font-family:var(--font-display); font-size:clamp(28px,5vw,44px); text-transform:uppercase; line-height:1; margin:0}
.pc-done p{color:var(--ink-soft); font-size:15.5px; line-height:1.6; margin:0; max-width:46ch}
.pc-done p b{color:var(--ink)}
.pc-done .pc-actions{margin-top:10px}
.pc-confetti{position:fixed; inset:0; pointer-events:none; z-index:50; overflow:hidden}
.pc-confetti i{position:absolute; top:-20px; width:9px; height:14px; border-radius:2px; animation:pcFall linear forwards}
@keyframes pcFall{to{transform:translate3d(var(--dx,0),110vh,0) rotate(var(--rot,720deg))}}

/* ── Vista de quien recibe (?id=) ── */
.pc-view-media{width:var(--pc-w); border-radius:14px; overflow:hidden; border:2px solid var(--ink); background:#000; box-shadow:0 3px 0 var(--ink)}
.pc-view-media img, .pc-view-media video{display:block; width:100%; max-height:76vh; object-fit:contain; margin:0 auto}
.pc-view-text{font-family:var(--pc-hand); font-size:clamp(22px,2.8vw,30px); line-height:1.25; white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; flex:1; min-height:0; padding:2px}
.pc-view-note{font-family:var(--font-body); font-size:13px; color:var(--pc-soft); display:flex; align-items:center; gap:8px; margin-top:8px}
.pc-view-thumb{flex:1; min-height:0; border-radius:10px; overflow:hidden; border:2px solid var(--pc-ink); transform:rotate(-1.2deg); position:relative; background:#000}
.pc-view-thumb img, .pc-view-thumb video{width:100%; height:100%; object-fit:cover; display:block}
.pc-view-thumb.is-video video{object-fit:cover; background:#000; cursor:pointer}
.pc-view-thumb.is-video.is-playing{transform:none}
.pc-card:not(.is-flipped) .pc-front{cursor:pointer}
.pc-card--tap{cursor:pointer; -webkit-tap-highlight-color:transparent}
#postal .pc-actions--sm{gap:10px}
#postal .pc-actions--sm .pc-btn{font-size:11.5px; padding:9px 15px; border-width:2px}
#postal .pc-actions--sm .pc-btn--primary{font-size:12px; padding:10px 18px; box-shadow:0 2px 0 var(--ink)}
#postal .pc-view-play{all:unset; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; background:var(--pc-red); color:#fff; border:2.5px solid var(--pc-ink); box-shadow:0 3px 0 var(--pc-ink); display:grid; place-items:center; font-size:22px; padding-left:4px; box-sizing:border-box; cursor:pointer; transition:transform .15s}
#postal .pc-view-play:hover{transform:translate(-50%,-50%) scale(1.08)}
#postal .pc-view-play:focus-visible{outline:3px solid #fff !important; outline-offset:3px !important}
#postal .pc-view-zoom{all:unset; display:block; width:100%; height:100%; cursor:zoom-in; position:relative}
.pc-view-zoom span{position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:50%; background:rgba(255,251,244,.92); color:var(--pc-ink); border:2px solid var(--pc-ink); display:grid; place-items:center; font-size:15px}
.pc-lightbox{position:fixed; inset:0; z-index:10060; background:rgba(15,10,6,.88); display:grid; place-items:center; padding:20px; cursor:zoom-out; animation:pcFade .2s ease}
@keyframes pcFade{from{opacity:0}}
.pc-lightbox img{max-width:100%; max-height:100%; border-radius:12px; border:2px solid #fff; object-fit:contain}
.pc-lightbox button{position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:2px solid #fff; background:transparent; color:#fff; font-size:18px; cursor:pointer}
.pc-loading{display:flex; flex-direction:column; align-items:center; gap:14px; padding:60px 0; color:var(--ink-soft)}
.pc-loading::before{content:""; width:44px; height:44px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:pcSpin .9s linear infinite}
@keyframes pcSpin{to{transform:rotate(360deg)}}

/* toast */
.pc-toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,30px); opacity:0; z-index:10050; background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:12px; font-size:14px; max-width:min(92vw,440px); text-align:center; transition:all .35s cubic-bezier(.2,1.4,.4,1); pointer-events:none; box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.pc-toast.show{opacity:1; transform:translate(-50%,0)}

/* ── Celular: la postal se para (vertical) ── */
@media (max-width:680px){
  #postal{--pc-w:calc(100vw - 32px); padding:0 16px 90px}
  .pc-card{aspect-ratio:5/7.2}
  .pc-back{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:12px; padding:30px 16px 16px}
  .pc-divider{display:none}
  .pc-addr{order:-1; min-height:150px; padding-right:0}
  .pc-addr-lines{margin-top:0; padding-right:clamp(86px,25vw,100px)}
  .pc-stampbox{width:78px}
  .pc-postmark{right:44px; top:18px; width:92px}
  .pc-msg{order:1; padding-top:0; min-height:0; border-top:2px dashed var(--pc-line); padding-top:12px}
  .pc-front-tag{left:18px; bottom:16px}
  .pc-stamp{width:64px}
  .pc-stamps{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .pc-opt, .pc-card, .pc-stampbox .pc-stamp, .pc-postmark, .pc-done-env{animation:none !important; transition:none !important}
  .pc-card.is-floating{animation:none}
}

/* Celular: las 4 postales en un carrusel que se desliza (una grande a la vez),
   en vez de la grilla de 2 que se salía de la pantalla. */
.pc-dots{display:none}
@media (max-width:680px){
  #postal{overflow-x:clip}
  .pc-grid{display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin:0 -16px; padding:20px 16px 16px; scroll-padding:0 16px; perspective:none; max-width:none; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .pc-grid::-webkit-scrollbar{display:none}
  .pc-opt{--r:0deg; flex:0 0 84%; min-width:0; scroll-snap-align:center; scroll-snap-stop:always}
  .pc-opt:last-child{margin-right:0}
  .pc-opt-card{transform:none}
  .pc-opt-foot{min-width:0}
  .pc-opt-name{min-width:0; overflow-wrap:anywhere}
  .pc-dots{display:flex; justify-content:center; align-items:center; gap:8px; margin:2px 0 0}
  .pc-grid[hidden] + .pc-dots{display:none}
  .pc-dots button{all:unset; cursor:pointer; width:8px; height:8px; border-radius:99px; background:var(--line-strong, #cbb98f); transition:width .25s, background .25s}
  .pc-dots button.is-on{width:22px; background:var(--accent)}
  .pc-back::before{white-space:nowrap; font-size:8.5px; letter-spacing:.2em}
  .pc-dots-txt{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-left:6px}
}

/* Sellos (Configuración › Postales): nombre arriba, imagen PNG/GIF al medio,
   precio abajo y color de fondo; el borde perforado lo pone la página. */
.pc-stampbox:has(.pc-stamp-wrap){border-color:transparent; background:transparent}
.pc-stamp-txt{text-transform:uppercase; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px}
.pc-stamp-art{min-height:0; overflow:hidden}
.pc-stamp-art img{width:auto; max-width:88%; max-height:100%; object-fit:contain; -webkit-user-drag:none; user-select:none}
.pc-stamp-val{white-space:nowrap}

/* Frente: <picture> con versión vertical para celular */
.pc-front picture, .pc-opt-card picture{display:block; width:100%; height:100%}
@media (max-width:680px){ .pc-opt-card{aspect-ratio:5/7.2} }

/* Postal recibida: «Ver el frente» al centro y abajo el enlace «Envía una postal» */
.pc-view-actions{display:flex; flex-direction:column; align-items:center; gap:14px; width:var(--pc-w)}
#postal .pc-view-actions .pc-btn{font-size:11.5px; padding:9px 18px}
#postal .pc-view-link{font-family:var(--font-body); font-weight:800; font-size:14px; color:#1D1712; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px}
#postal .pc-view-link:hover{opacity:.75}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #postal .pc-view-link{color:var(--ink)} }
:root[data-theme="dark"] #postal .pc-view-link{color:var(--ink)}

/* shared.css le pone margin-top:64px a todo <section>: acá sobraba ese espacio
   entre los pasos y la postal. */
#postal > section{margin-top:10px}

/* Menos aire entre los sellos y los botones de abajo: el texto de ayuda vacío
   ya no ocupa lugar y el espacio entre bloques baja de 26 a 16 px. */
#pcStage{gap:16px}
#pcStage .pc-hint{margin:-4px 0 0}
#pcStage .pc-hint:empty{display:none}

/* «Enviar postal» con la misma altura que «Ver el frente» (mismo relleno y
   tamaño de letra; la "sombra" de abajo no suma altura a la caja). */
#pcStage .pc-actions .pc-btn--primary{padding:12px 24px; font-size:13px; line-height:inherit}

/* «Cargando postales…»: en celular la grilla es un carrusel (flex), donde
   grid-column no sirve y el aviso quedaba corrido a la izquierda. */
.pc-grid > .pc-loading{flex:0 0 100%; width:100%; box-sizing:border-box; text-align:center; justify-content:center}

/* Estampitas: alto fijo (4:5). Con aspect-ratio solo, en algunos navegadores
   (Safari) la imagen del centro estiraba la estampita hacia abajo. La imagen
   va absoluta dentro de su espacio para que nunca empuje el alto. */
.pc-stamp{height:95px; min-height:0}
@media (max-width:680px){ .pc-stamp{height:80px} }
.pc-stampbox .pc-stamp{width:100%; height:100%}
.pc-stamp-in{min-height:0}
.pc-stamp-art{flex:1 1 0; position:relative; min-height:0}
.pc-stamp-art img{position:absolute; inset:0; margin:auto; width:auto; height:auto; max-width:88%; max-height:100%}

/* Enlace «Pasaporte» dentro del texto de ayuda */
:where(#postal) .pc-sub-link{all:unset; cursor:pointer; color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-weight:800}
#postal .pc-sub-link:focus-visible{outline:2px solid var(--accent) !important; outline-offset:2px !important}
.pc-ghost, .pc-ghost *{box-sizing:border-box}