/* Conceito: Correio entre duas cidades — Curitiba ⇄ Maringá.
   Papel de carta, selos picotados, carimbos postais, faixa de correio aéreo, tinta de caneta.
   Layout: app de celular com cartão-postal no topo, rastreamento do próximo encontro e abas fixas embaixo. */
:root{
  --bg:#ECE5D7;        /* papel kraft claro */
  --surface:#FBF8F1;   /* papel de carta */
  --surface2:#E3DACA;
  --ink:#23252A;       /* tinta de caneta */
  --muted:#6E685E;
  --line:#D5CBB8;
  --clay:#9A3328;      /* vermelho de carimbo */
  --wine:#6E2A2A;
  --olive:#55663B;     /* selo verde */
  --ochre:#B4862D;     /* selo dourado */
  --slate:#2D4B6B;     /* azul do correio aéreo */
  --paper:#FBF8F1; --on-accent:#FBF8F1;
  --f-display:"Gloock", "Times New Roman", serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --f-hand:"Kalam", "Bradley Hand", cursive;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15171A; --surface:#1F2226; --surface2:#2A2E33; --ink:#ECE6DA; --muted:#A39D92; --line:#363A40;
  --clay:#D9705F; --wine:#C86F6A; --olive:#9DB27A; --ochre:#D8AE5C; --slate:#86A9CE; --on-accent:#15171A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15171A; --surface:#1F2226; --surface2:#2A2E33; --ink:#ECE6DA; --muted:#A39D92; --line:#363A40;
  --clay:#D9705F; --wine:#C86F6A; --olive:#9DB27A; --ochre:#D8AE5C; --slate:#86A9CE; --on-accent:#15171A; color-scheme:dark}
:root[data-palette="oliva"]{--bg:#E4E2D1;--surface:#F7F6EC;--surface2:#D8D5BF;--line:#C9C5A8;--clay:#55663B;--olive:#9A3328}
:root[data-palette="argila"]{--bg:#EEDFD7;--surface:#FBF3EF;--surface2:#E7D1C6;--line:#D9BEB1;--clay:#A44D5E;--wine:#7E3445}
@media (prefers-color-scheme: dark){
  :root[data-palette="oliva"]:not([data-theme="light"]){--bg:#16180F;--surface:#20231A;--surface2:#2B2F22;--line:#3A3E2C;--clay:#AFC17E;--olive:#D9705F}
  :root[data-palette="argila"]:not([data-theme="light"]){--bg:#1B1416;--surface:#261C1F;--surface2:#33262A;--line:#463338;--clay:#DD8A98;--wine:#D27D8C}}
:root[data-theme="dark"][data-palette="oliva"]{--bg:#16180F;--surface:#20231A;--surface2:#2B2F22;--line:#3A3E2C;--clay:#AFC17E;--olive:#D9705F}
:root[data-theme="dark"][data-palette="argila"]{--bg:#1B1416;--surface:#261C1F;--surface2:#33262A;--line:#463338;--clay:#DD8A98;--wine:#D27D8C}

*{box-sizing:border-box}
html,body{height:100%}
body{background-color:var(--bg);background-image:var(--grain);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
input,textarea,select{font:inherit;color:var(--ink)}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));padding-block:12px 112px}

/* Tipos */
h2{font-family:var(--f-display);font-weight:400;font-size:38px;line-height:1;margin:2px 0 6px;letter-spacing:-.01em;text-wrap:balance}
h3.sec{font-family:var(--f-display);font-weight:400;font-size:27px;line-height:1.05;margin:0}
.sub{color:var(--muted);margin:0 0 18px;font-size:14px;max-width:44ch}
.eyebrow,.label{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:500}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)}
.small{font-size:13px}
.stack{display:flex;flex-direction:column;gap:16px}
.rule{height:0;border-top:1px dashed var(--line)}

/* Seletor de perfil (só no protótipo) */
.whobar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;text-transform:uppercase}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--surface)}
.seg button{border:none;background:transparent;border-radius:6px;padding:4px 10px;font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* Cabeçalho */
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:4px 14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.brand{border:none;background:none;padding:0;display:flex;align-items:center;gap:10px;text-align:left}
.brand svg{width:34px;height:34px;flex:none}
.brand b{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1;display:block}
.brand small{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.hello{font-family:var(--f-hand);font-size:18px;color:var(--clay);line-height:1}

/* Superfícies */
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:12px;position:relative}
.card .head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.field{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:11px 12px}
textarea.field{resize:vertical;min-height:84px}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--bg);border-radius:4px;padding:10px 16px;font-weight:600;font-size:14px;flex:none;letter-spacing:.01em}
.btn.clay{background:var(--clay);border-color:var(--clay);color:var(--on-accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.addrow{display:flex;gap:8px}
.addrow .field{flex:1;min-width:0}
.airmail{position:relative}
.airmail::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:5px;pointer-events:none;
  background:repeating-linear-gradient(-45deg, var(--clay) 0 9px, transparent 9px 16px, var(--slate) 16px 25px, transparent 25px 32px);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* Selo picotado */
.stampf{--sb:var(--surface);padding:4px;background:radial-gradient(circle at 4px 4px, transparent 2.4px, var(--sb) 2.9px) -4px -4px / 8px 8px;filter:drop-shadow(0 1px 1.5px rgba(35,37,42,.25))}
.stampf .si{background:var(--sc,var(--clay));color:var(--on-accent);display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.postmark{position:absolute;pointer-events:none;color:var(--ink);opacity:.55}
.postmark text{font-family:var(--f-mono);font-size:7.6px;letter-spacing:1.4px;fill:currentColor;text-transform:uppercase}

/* ======= INÍCIO ======= */
.postcard{background:#FBF8F1;color:#23252A;border-radius:4px;padding:10px 10px 14px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 14px 30px -14px rgba(35,37,42,.35);rotate:-1.2deg;position:relative}
.postcard .photo{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;border-radius:2px;background:#2A2E33}
.postcard .photo img{width:100%;height:100%;object-fit:cover;display:block;animation:kb 20s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-2%)}}
.postcard .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(20,16,12,.55), transparent 45%)}
.postcard .over{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;color:#FBF8F1}
.postcard .greet{font-family:var(--f-display);font-size:33px;line-height:1.02;text-wrap:balance;animation:inUp .9s var(--out) .15s both}
.postcard .since{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.9;margin-top:4px;animation:inUp .9s var(--out) .3s both}
.postcard .bstamp{position:absolute;top:-10px;right:-8px;z-index:3;rotate:6deg;--sb:#FBF8F1}
.postcard .bstamp .si{width:62px;height:74px;--sc:var(--clay);font-family:var(--f-mono);font-size:8px;letter-spacing:.12em;line-height:1.3;padding:6px 4px;align-content:space-between}
.postcard .bstamp .si svg{width:30px;height:30px}
.postcard .pm{top:30px;right:30px;width:96px;height:96px;z-index:4;color:#23252A;opacity:.6;rotate:-14deg}
.postcard .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px 0}
.postcard .foot .hand{font-family:var(--f-hand);font-size:18px;color:#6E2A2A;line-height:1.1}
.postcard .chg{border:1px solid #D5CBB8;background:transparent;border-radius:4px;padding:5px 9px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6E685E;display:flex;gap:6px;align-items:center}
.postcard .chg .ico{width:14px;height:14px}

/* Rastreamento */
.track .numrow{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.track .num{font-family:var(--f-display);font-size:58px;line-height:.85;font-variant-numeric:tabular-nums}
.track .unit{font-family:var(--f-mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-top:6px}
.route{display:flex;flex-direction:column;gap:6px}
.route .ends{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;font-weight:600}
.route .bar{position:relative;height:2px;margin-block:10px;background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px)}
.route .fill{position:absolute;inset:0 auto 0 0;background:var(--clay);transition:width 1.4s var(--out)}
.route .dot{position:absolute;top:50%;translate:-50% -50%;width:26px;height:26px;border-radius:50%;background:var(--clay);color:var(--on-accent);display:grid;place-items:center;transition:left 1.4s var(--out);box-shadow:0 0 0 4px var(--surface)}
.route .dot .ico{width:14px;height:14px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.steps div{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:5px;line-height:1.25}
.steps div::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface)}
.steps div.ok{color:var(--ink)}
.steps div.ok::before{background:var(--clay);border-color:var(--clay)}
.steps div.now::before{background:var(--surface);border-color:var(--clay);box-shadow:0 0 0 3px color-mix(in srgb, var(--clay) 25%, transparent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--clay) 0%, transparent)}}
.track label{font-family:var(--f-mono);font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;letter-spacing:.04em}
.track input{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:5px 8px;font-family:var(--f-mono);font-size:12px}
.trackno{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.06em}

/* Telegrama de saudade */
.saudade{position:relative;border:none;border-radius:6px;background:var(--ink);color:var(--bg);padding:20px 18px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:14px;overflow:hidden;width:100%}
.saudade .tg{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;display:flex;gap:8px;align-items:center}
.saudade .tg i{font-style:normal;border:1px solid currentColor;border-radius:3px;padding:1px 5px;color:var(--clay);opacity:1}
.saudade b{display:block;font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.05;margin-top:6px}
.saudade small{display:block;font-family:var(--f-mono);font-size:11px;opacity:.7;margin-top:6px;letter-spacing:.02em}
.heart{width:50px;height:50px;flex:none;color:var(--clay);animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.15)}24%{transform:scale(.97)}36%{transform:scale(1.08)}48%{transform:scale(1)}}
.ripple{position:absolute;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb, var(--clay) 45%, transparent);pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:ripple .9s var(--out) forwards}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(28);opacity:0}}
.float-heart{position:absolute;pointer-events:none;color:var(--clay);animation:floatH 1.8s var(--out) forwards}
@keyframes floatH{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0px),-150px) scale(1.5) rotate(var(--dr,0deg))}}

/* Caixa de entrada */
.feed{display:flex;flex-direction:column}
.feed .it{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-top:1px dashed var(--line);font-size:14px}
.feed .it:first-child{border-top:none;padding-top:2px}
.feed .ic{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--clay)}
.feed .ic .ico{width:16px;height:16px}
.feed b{font-weight:600}
.feed small{display:block;color:var(--muted);font-size:12.5px}
.feed .h{font-family:var(--f-mono);font-size:11px;color:var(--muted)}

/* Bilhetes */
.notes{display:flex;gap:12px;overflow-x:auto;padding:12px 4px 10px;margin-inline:-4px;scrollbar-width:none;scroll-snap-type:x mandatory}
.note{flex:0 0 76%;scroll-snap-align:start;background:var(--n);color:#23252A;padding:18px 16px 14px;display:flex;flex-direction:column;gap:6px;rotate:var(--r);position:relative;box-shadow:0 8px 18px -10px rgba(35,37,42,.35);transition:transform .35s var(--spring)}
.note::before{content:"";position:absolute;top:-9px;left:50%;translate:-50% 0;rotate:-3deg;width:64px;height:18px;background:rgba(232,220,196,.82);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.note p{margin:0;font-family:var(--f-hand);font-size:20px;line-height:1.3}
.note .meta{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6E685E}
.note.new{animation:noteDrop .7s var(--spring) both}
@keyframes noteDrop{from{opacity:0;transform:translateY(-30px) rotate(-8deg) scale(.9)}to{opacity:1;transform:none}}

/* Coleção de selos */
.milestone .row2{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.milestone b.n{font-family:var(--f-display);font-size:46px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums}
.meter{height:3px;background:var(--surface2);overflow:hidden;border-radius:2px}
.meter i{display:block;height:100%;background:var(--clay);transition:width 1.4s var(--out)}
.marks{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.marks .stampf{--sb:var(--surface)}
.marks .si{aspect-ratio:4/5;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.15;padding:4px 2px;align-content:center;gap:2px}
.marks .si b{display:block;font-family:var(--f-display);font-weight:400;font-size:20px;letter-spacing:0;line-height:1}
.marks .off .si{background:var(--surface2);color:var(--muted)}
.marks .hit:nth-child(1) .si{--sc:var(--clay)} .marks .hit:nth-child(2) .si{--sc:var(--slate)} .marks .hit:nth-child(3) .si{--sc:var(--olive)} .marks .hit:nth-child(4) .si{--sc:var(--ochre)} .marks .hit:nth-child(5) .si{--sc:var(--wine)}
.marks .hit{animation:stampIn .55s var(--spring) both}

/* Pergunta do dia */
.qday .q{font-family:var(--f-display);font-size:26px;line-height:1.12;text-wrap:balance}
.answers{display:grid;gap:8px}
.ans{border-left:2px solid var(--clay);padding:4px 0 4px 12px;font-size:15px}
.ans b{display:block;font-family:var(--f-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.ans span{font-family:var(--f-hand);font-size:19px;line-height:1.25}
.ans.blur span{filter:blur(6px);user-select:none}

/* Papelzinho do dia */
.jar{flex-direction:row;align-items:center;gap:16px;text-align:left;cursor:pointer;width:100%;font:inherit;color:inherit}
.jar svg.fold{width:52px;height:52px;flex:none;color:var(--ochre)}
.jar .reason{font-family:var(--f-hand);font-size:21px;line-height:1.25}
.jar.shake svg{animation:shake .5s}
@keyframes shake{25%{rotate:-8deg}50%{rotate:8deg}75%{rotate:-4deg}}
.reason.pop{animation:inUp .5s var(--out)}

/* Atalhos */
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-width:0}
.mini .ico{color:var(--clay)}
.mini b{font-size:14px}
.mini span{font-size:12.5px;color:var(--muted)}

/* Chips */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:500;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ======= CORREIO ======= */
.writebtn{width:100%;border:1px dashed var(--muted);background:transparent;border-radius:6px;padding:14px;font-weight:600;color:var(--ink);margin-bottom:16px;display:flex;gap:10px;justify-content:center;align-items:center}
.writebtn .ico{color:var(--clay)}
.letters{display:flex;flex-direction:column;gap:14px}
.env{position:relative;border:none;padding:0;background:none;text-align:left;width:100%}
.env .paper{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px;background:var(--surface);border-radius:4px;padding:18px 18px 16px;min-height:132px;box-shadow:0 10px 22px -16px rgba(35,37,42,.5);overflow:hidden;transition:transform .45s var(--spring), box-shadow .3s}
.env .paper::after{content:"";position:absolute;left:0;right:0;top:0;height:44%;background:linear-gradient(to bottom right, transparent 49.6%, var(--line) 50%, transparent 50.6%) left/50% 100% no-repeat, linear-gradient(to bottom left, transparent 49.6%, var(--line) 50%, transparent 50.6%) right/50% 100% no-repeat;opacity:.7;pointer-events:none}
.env .addr{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:30px}
.env .t{font-family:var(--f-hand);font-size:21px;line-height:1.15;color:var(--ink)}
.env .from{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.env .sideS{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.env .stampf{--sb:var(--surface);rotate:4deg}
.env .si{width:46px;height:56px;--sc:var(--c);font-family:var(--f-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;padding:4px 2px;align-content:space-between}
.env .si .ico{width:20px;height:20px;stroke-width:1.5}
.env .pm{right:24px;top:30px;width:70px;height:70px;rotate:-18deg;opacity:0;transition:opacity .2s, transform .3s var(--spring);transform:scale(1.6)}
.env.read .pm{opacity:.45;transform:none}
.env .tag-new{font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);border:1px solid var(--clay);border-radius:3px;padding:1px 5px}
.env.locked .paper{background:var(--surface2)}
.env.locked .si{filter:grayscale(.85);opacity:.7}
.env.locked .t{color:var(--muted)}
.env .lockline{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.env .lockline .ico{width:13px;height:13px}
.env.opening .paper{transform:translateY(-6px) rotate(-1deg)}
.env.opening .pm{opacity:.75;transform:none}
.env.locked:active .paper{animation:nope .4s}
@keyframes nope{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@media (hover:hover){.env:hover .paper{transform:translateY(-3px)}}

/* Modal / carta aberta */
.modal{position:fixed;inset:0;z-index:50;background:rgba(18,16,14,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .3s ease both;
  padding:max(16px, env(safe-area-inset-top,0px)) max(12px, env(safe-area-inset-right,0px)) max(12px, env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px))}
.sheet{width:100%;max-width:460px;max-height:88vh;overflow:auto;background:#FBF8F1;background-image:var(--grain);color:#23252A;border-radius:4px;padding:30px 26px 22px;animation:sheetIn .6s var(--spring) both;position:relative}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(-45deg, #9A3328 0 9px, transparent 9px 16px, #2D4B6B 16px 25px, transparent 25px 32px)}
.sheet .eyebrow{color:#6E685E}
.sheet .dateline{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:#6E685E;text-align:right}
.sheet h3{font-family:var(--f-display);font-weight:400;font-size:29px;line-height:1.05;margin:8px 0 16px;text-wrap:balance}
.sheet .body{font-family:var(--f-hand);font-size:21px;line-height:32px;white-space:pre-line;background-image:repeating-linear-gradient(transparent 0 31px, rgba(45,75,107,.16) 31px 32px);animation:inUp .7s var(--out) .2s both}
.sheet .sign{font-family:var(--f-hand);font-size:24px;text-align:right;margin-top:10px;color:#6E2A2A;animation:inUp .7s var(--out) .45s both}
.sheet .close{margin-top:20px;width:100%;border:1px solid #D5CBB8;background:transparent;border-radius:4px;padding:12px;font-weight:600;color:#23252A}
.sheet .field{background:#F3EEE2;border-color:#D5CBB8;color:#23252A}
.sheet label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6E685E;display:flex;flex-direction:column;gap:5px}
.sheet form{display:flex;flex-direction:column;gap:12px}
.sheet .btn{background:#23252A;border-color:#23252A;color:#FBF8F1}
.lockmsg{font-size:15px;color:#4a453e}
.lockmsg .num{font-family:var(--f-display);font-size:64px;line-height:1;display:block;color:#9A3328}
@keyframes fadeIn{from{opacity:0}}
@keyframes sheetIn{from{transform:translateY(60px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal.closing{animation:fadeOut .25s ease forwards}
.modal.closing .sheet{animation:sheetOut .25s ease forwards}
@keyframes fadeOut{to{opacity:0}}
@keyframes sheetOut{to{transform:translateY(40px) scale(.97);opacity:0}}

/* ======= FOTOS ======= */
.photos{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.ph{position:relative;background:#FBF8F1;padding:6px 6px 26px;border:none;border-radius:2px;box-shadow:0 10px 20px -14px rgba(35,37,42,.55);rotate:var(--r,0deg);transition:transform .4s var(--spring)}
.ph .img{aspect-ratio:3/4;max-width:100%;overflow:hidden;background:#2A2E33}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph span.cap{position:absolute;left:8px;right:8px;bottom:6px;font-family:var(--f-hand);font-size:14px;color:#23252A;line-height:1.1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph .who{position:absolute;top:12px;right:12px;font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:rgba(251,248,241,.92);color:#23252A;border-radius:2px;padding:2px 5px}
.ph.add{background:transparent;border:1px dashed var(--muted);box-shadow:none;display:grid;place-items:center;color:var(--muted);font-size:13px;text-align:center;min-height:180px}
.ph.add .ico{width:28px;height:28px;color:var(--clay);margin:0 auto 6px}
@media (hover:hover){.ph:hover{transform:translateY(-3px) rotate(0deg)}}

/* Listas */
.list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:none}
.check{width:22px;height:22px;flex:none;border-radius:3px;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center;color:var(--bg);font-size:12px;padding:0}
.row.done .check{background:var(--clay);border-color:var(--clay);color:var(--on-accent)}
.row.done .txt b{text-decoration:line-through;text-decoration-color:var(--clay);color:var(--muted)}
.txt{flex:1;min-width:0}
.txt b{font-weight:500}
.txt small{display:block;color:var(--muted);font-size:12px}
.pill{flex:none;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:3px;padding:2px 7px;color:var(--ink);font-variant-numeric:tabular-nums}
.pill.g{border-color:var(--slate);color:var(--slate)}
.pill.i{border-color:var(--clay);color:var(--clay)}
.stars button{border:none;background:none;padding:0 1px;font-size:15px;color:var(--line)}
.stars button.on{color:var(--ochre)}
.empty{padding:16px;color:var(--muted);font-size:14px}
.row.just .check{animation:checkpop .5s var(--spring)}
@keyframes checkpop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ======= NÓS ======= */
.timeline{position:relative;display:flex;flex-direction:column;gap:24px;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;border-left:1.5px dashed var(--muted)}
.ev{position:relative}
.ev::before{content:"";position:absolute;left:-26px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--clay)}
.ev .d{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.ev .h{font-family:var(--f-display);font-size:25px;line-height:1.1}
.ev p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.ev .evimg{margin-top:10px;width:62%;background:#FBF8F1;padding:5px 5px 16px;rotate:-1.5deg;box-shadow:0 10px 20px -14px rgba(35,37,42,.55)}
.ev .evimg img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.entry{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;background-image:repeating-linear-gradient(transparent 0 29px, color-mix(in srgb, var(--slate) 14%, transparent) 29px 30px)}
.entry .meta{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.entry p{margin:0;font-family:var(--f-hand);font-size:19px;line-height:30px}
.mapbox{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mapbox svg{display:block;width:100%;height:auto}
.mapbox .lbl{fill:var(--ink);font-family:var(--f-display);font-size:16px}
.mapbox .sm{fill:var(--muted);font-family:var(--f-mono);font-size:9px;letter-spacing:1px}
.capsule{display:flex;gap:14px;align-items:center}
.capsule .cap-ic{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--wine);color:var(--wine);display:grid;place-items:center}

/* ======= MAIS ======= */
.moregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:24px}
.moregrid button{border:none;background:var(--surface);padding:16px 10px 14px;text-align:left;display:flex;flex-direction:column;gap:8px;min-width:0;font-size:13px;font-weight:600;line-height:1.2}
.moregrid button .ico{color:var(--clay);width:22px;height:22px}
.moregrid button span{font-weight:400;font-size:11.5px;color:var(--muted)}
.moregrid button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.moregrid button[aria-pressed="true"] .ico,.moregrid button[aria-pressed="true"] span{color:var(--bg);opacity:.85}
.coupons{display:flex;flex-direction:column;gap:12px}
.coupon{position:relative;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.coupon .stub{width:66px;flex:none;border-right:1.5px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--c)}
.coupon .stub b{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1}
.coupon .stub small{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.coupon .info{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.coupon .info b{font-weight:600}
.coupon .info small{color:var(--muted);font-size:12px}
.coupon button{align-self:flex-start;border:1px solid var(--ink);background:transparent;border-radius:3px;padding:4px 11px;font-size:12px;font-weight:600}
.coupon.used .info b{color:var(--muted)}
.stamp{position:absolute;right:12px;top:50%;translate:0 -50%;rotate:-12deg;border:2px double var(--clay);color:var(--clay);font-family:var(--f-mono);font-weight:600;font-size:11px;letter-spacing:.18em;padding:4px 9px;border-radius:4px;text-transform:uppercase;background:color-mix(in srgb, var(--surface) 85%, transparent)}
.stamp.just{animation:stampIn .5s var(--spring) both}
@keyframes stampIn{from{transform:scale(2.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.idea{font-family:var(--f-display);font-size:28px;line-height:1.1;min-height:2.2em;text-wrap:balance}
.idea.spin{animation:flick .08s steps(1) infinite}
@keyframes flick{50%{opacity:.4}}
.idea.land{animation:land .6s var(--spring)}
@keyframes land{0%{transform:scale(.85);opacity:.5}100%{transform:none;opacity:1}}
.song{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.song:first-child{border-top:none}
.song .play{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;flex:none}
.song .play .ico{width:12px;height:12px;fill:currentColor;stroke:none}
.opts{display:grid;gap:8px}
.opts button{border:1px solid var(--line);background:var(--bg);border-radius:4px;padding:11px 12px;text-align:left}
.opts button.ok{background:var(--olive);color:var(--on-accent);border-color:var(--olive)}
.opts button.no{background:var(--clay);color:var(--on-accent);border-color:var(--clay)}
.score{display:flex;gap:10px}
.score div{flex:1;border:1px solid var(--line);border-radius:6px;padding:10px;text-align:center;background:var(--surface)}
.score b{display:block;font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.score span{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.piggy .goal{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.piggy .goal b{font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.piggy .meter{height:6px}
.piggy .meter i{background:var(--ochre)}
.wish{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wish .list{min-width:0}
.wish h4{margin:0;padding:12px 14px 6px;font-family:var(--f-mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.wish .row{padding:10px 14px;font-size:14px}
.wish .row .ico{width:15px;height:15px;color:var(--clay)}

/* Bandeira Branca */
.flag-hero{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:18px;display:flex;gap:14px;align-items:center}
.flag-hero .ico{width:40px;height:40px;stroke-width:1.3}
.flag-hero b{font-family:var(--f-display);font-weight:400;font-size:24px}
.flag-hero p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.pause-opts,.peace-opts{display:flex;gap:6px;flex-wrap:wrap}
.pause-opts button,.peace-opts button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:500}
.status{border-radius:4px;padding:14px;border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;gap:8px}
.status b.big{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.1}
.status.peace{background:var(--olive);border-color:var(--olive);color:var(--on-accent)}
.status.peace .btn{background:var(--paper);color:#23252A;border-color:var(--paper)}
.feel{display:flex;flex-direction:column;gap:8px}
.feel label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.feelmsg{border-left:2px solid var(--slate);padding:6px 0 6px 12px;font-size:14px;display:flex;flex-direction:column;gap:2px}
.feelmsg .meta{font-family:var(--f-mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.rules{counter-reset:r}
.rules .row::before{counter-increment:r;content:counter(r, decimal-leading-zero);font-family:var(--f-mono);font-size:11px;color:var(--clay);width:20px;flex:none}

/* Aparência */
.palettes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.palettes button{border:1px solid var(--line);background:var(--bg);border-radius:4px;padding:12px 10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:13px;font-weight:600}
.palettes button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sw{display:flex;gap:3px}
.sw i{width:16px;height:16px;border-radius:50%}
.iconprev{flex-direction:row;align-items:center;gap:16px}
.iconprev svg.appicon-img{width:72px;height:72px;border-radius:17px;box-shadow:0 6px 16px rgba(0,0,0,.2);flex:none}

/* Barra de abas */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb, var(--surface) 92%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:6px max(10px, env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(10px, env(safe-area-inset-left,0px))}
nav.tabs .in{position:relative;max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
nav.tabs button{position:relative;z-index:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.02em}
nav.tabs button[aria-current="page"]{color:var(--ink);font-weight:700}
nav.tabs button[aria-current="page"] .ico{color:var(--clay);animation:tabbounce .55s var(--spring)}
@keyframes tabbounce{35%{transform:translateY(-4px) scale(1.12)}100%{transform:none}}
.tab-ind{position:absolute;top:0;height:2px;background:var(--clay);border-radius:2px;transition:transform .5s var(--spring), width .5s var(--spring);pointer-events:none}
.badge{position:absolute;top:3px;left:calc(50% + 5px);min-width:16px;height:16px;border-radius:8px;background:var(--clay);color:var(--on-accent);font-family:var(--f-mono);font-size:9.5px;font-weight:600;display:grid;place-items:center;padding:0 4px;animation:badge 2.4s ease-in-out infinite}
@keyframes badge{8%{transform:scale(1.25)}16%{transform:scale(1)}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:4px;font-size:13px;max-width:calc(100% - 32px);text-align:center;transition:opacity .35s var(--out), transform .45s var(--spring)}
.toast.off{opacity:0;transform:translateY(16px)}
.proto{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:28px}

/* Abertura */
.intro{position:fixed;inset:0;z-index:80;background-color:var(--bg);background-image:var(--grain);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;
  padding:max(24px, env(safe-area-inset-top,0px)) max(24px, env(safe-area-inset-right,0px)) max(24px, env(safe-area-inset-bottom,0px)) max(24px, env(safe-area-inset-left,0px))}
.intro .step{display:flex;flex-direction:column;align-items:center;gap:16px}
.intro .step[hidden]{display:none}
.intro .envbig{position:relative;width:min(300px,82vw);aspect-ratio:3/2;cursor:pointer;border:none;background:none;padding:0;animation:hover 3s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-8px) rotate(-1deg)}}
.intro .back{position:absolute;inset:0;background:#FBF8F1;border-radius:4px;box-shadow:0 20px 40px -20px rgba(0,0,0,.45)}
.intro .back::before{content:"";position:absolute;inset:0;border-radius:4px;padding:7px;background:repeating-linear-gradient(-45deg, #9A3328 0 11px, transparent 11px 19px, #2D4B6B 19px 30px, transparent 30px 38px);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.intro .letter{position:absolute;left:9%;right:9%;top:12%;bottom:8%;background:#fff;border-radius:2px;display:grid;place-items:center;font-family:var(--f-hand);font-size:22px;color:#6E2A2A;transition:transform 1s var(--out) .4s;background-image:repeating-linear-gradient(transparent 0 15px, rgba(45,75,107,.15) 15px 16px)}
.intro .lid{position:absolute;left:0;right:0;top:0;height:60%;background:#EFE8DA;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s var(--out);z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.1))}
.intro .front{position:absolute;inset:0;z-index:1;border-radius:4px;background:linear-gradient(to top right, #F5EFE3 50%, transparent 50.5%) left/50.5% 100% no-repeat, linear-gradient(to top left, #F5EFE3 50%, transparent 50.5%) right/50.5% 100% no-repeat}
.intro .wax{position:absolute;left:50%;top:56%;translate:-50% -50%;z-index:3;width:46px;height:46px;border-radius:50%;background:#9A3328;color:#FBF8F1;display:grid;place-items:center;box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.2);transition:opacity .3s, transform .3s}
.intro .wax .ico{width:20px;height:20px}
.intro .addr{position:absolute;z-index:3;left:12%;bottom:12%;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;color:#6E685E;text-transform:uppercase;text-align:left;line-height:1.5}
.intro.open .envbig{animation:none;transform:scale(1.04);transition:transform .8s var(--out)}
.intro.open .lid{transform:rotateX(180deg);z-index:0}
.intro.open .wax{opacity:0;transform:scale(.4)}
.intro.open .letter{transform:translateY(-62%)}
.intro h1{font-family:var(--f-display);font-weight:400;font-size:38px;line-height:1.02;margin:0;text-wrap:balance;max-width:14ch}
.intro p{margin:0;color:var(--muted);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.intro .msg{font-family:var(--f-hand);font-size:21px;line-height:1.4;color:var(--ink);max-width:30ch}
.intro .step > *{animation:inUp .8s var(--out) both}
.intro .step > *:nth-child(2){animation-delay:.12s}
.intro .step > *:nth-child(3){animation-delay:.24s}
.intro .step > *:nth-child(4){animation-delay:.36s}
.intro.leave{animation:introOut .6s var(--out) forwards}
@keyframes introOut{to{opacity:0;transform:scale(1.06)}}
#confetti-cv{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:95}

/* Movimento geral */
@keyframes inUp{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.in{animation:inUp .6s var(--out) both;animation-delay:calc(var(--i,0) * 55ms)}
button,.song,.mini,.chip,.note{transition:transform .35s var(--spring), background-color .25s, color .25s, border-color .25s, box-shadow .25s}
button:active,.song:active{transform:scale(.97)}
.card.jar:active,.saudade:active{transform:scale(.985)}
@media (hover:hover){.mini:hover{transform:translateY(-2px)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== Ajuste 2: mais arredondado, mais leve, fontes mais suaves ===== */
:root{--f-display:"Fraunces", Georgia, serif;--f-body:"DM Sans", system-ui, -apple-system, sans-serif;--f-hand:"Caveat", "Bradley Hand", cursive;--f-ui:"DM Sans", system-ui, sans-serif;
  --soft:0 1px 2px rgba(35,37,42,.04), 0 10px 28px -16px rgba(35,37,42,.22)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--soft:0 1px 0 rgba(255,255,255,.03), 0 12px 28px -16px rgba(0,0,0,.6)}}
:root[data-theme="dark"]{--soft:0 1px 0 rgba(255,255,255,.03), 0 12px 28px -16px rgba(0,0,0,.6)}
body{font-size:15.5px}
h2,h3.sec,.postcard .greet,.track .num,.qday .q,.idea,.ev .h,.milestone b.n,.piggy .goal b,.score b,.coupon .stub b,.flag-hero b,.status b.big,.lockmsg .num,.sheet h3,.intro h1,.brand b,.saudade b{font-family:var(--f-display);font-weight:500;font-variation-settings:"SOFT" 100,"opsz" 72;letter-spacing:-.015em}
h2{font-size:36px}
/* rótulos: frases normais em vez de caixa-alta espaçada */
.eyebrow,.label,.unit,.since,.route .ends,.note .meta,.entry .meta,.ev .d,.feed .h,.pill,.ans b,.sheet label,.feel label,.feelmsg .meta,.saudade .tg,.saudade small,.brand small,.score span,.wish h4,.proto,.intro p,.env .from,.env .lockline,.sheet .dateline,.trackno,.track label,.postcard .chg,.ph .who,.whobar,.seg button{font-family:var(--f-ui);text-transform:none;letter-spacing:0}
.eyebrow{font-size:13.5px;font-weight:600;color:var(--muted)}
.unit{font-size:12.5px}
.route .ends{font-size:12.5px;font-weight:600}
.since{font-size:13.5px;opacity:.92}
.whobar{font-size:12px}
.seg button{font-size:12px;border-radius:999px;padding:4px 12px}
.seg{border-radius:999px}
.brand small{font-size:12px}
.hello{font-size:23px}
/* superfícies sem caixas duras */
.card{border:none;border-radius:24px;padding:20px;box-shadow:var(--soft)}
.list{border:none;border-radius:22px;box-shadow:var(--soft)}
.row{border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);padding:14px 18px}
.field{border-radius:14px;border-color:transparent;background:var(--bg);padding:12px 14px}
.btn{border-radius:999px;padding:11px 20px}
.pill{border-radius:999px;font-size:11.5px;padding:3px 10px}
.check{border-radius:50%}
.mini{border:none;border-radius:22px;box-shadow:var(--soft)}
header.top{border-bottom:none;margin-bottom:12px}
.postcard{border-radius:26px;padding:10px 10px 12px;rotate:-.8deg}
.postcard .photo{border-radius:18px;aspect-ratio:4/4.6}
.postcard .greet{font-size:34px}
.postcard .foot .hand{font-size:23px}
.postcard .chg{border-radius:999px;font-size:12px;padding:6px 12px}
.postcard .pm{width:84px;height:84px;top:26px;right:26px;opacity:.45}
.track{gap:14px}
.track .num{font-size:56px}
.route .bar{height:4px;border-radius:2px;background:var(--surface2)}
.route .fill{border-radius:2px}
.track input{border-radius:999px;border:none;padding:5px 12px;font-family:var(--f-ui)}
.track label{font-size:13px}
.saudade{border-radius:26px;padding:22px 20px}
.saudade .tg i{border-radius:999px;padding:1px 8px}
.saudade b{font-size:31px}
.saudade small{font-size:13px}
.feed .it{border-top:none;padding:8px 0;font-size:14.5px}
.feed .ic{border:none;background:var(--surface2)}
.note{border-radius:18px;padding:18px 18px 14px}
.note::before{border-radius:3px}
.note p{font-size:25px;line-height:1.15;font-weight:500}
.note .meta{font-size:12px}
.qday .q{font-size:26px}
.ans{border-left:none;background:var(--bg);border-radius:16px;padding:10px 14px}
.ans span{font-size:23px;font-weight:500;line-height:1.15}
.jar .reason{font-size:25px;font-weight:500;line-height:1.15}
.chip{padding:7px 15px}
/* cartas */
.writebtn{border-radius:999px;border:1.5px dashed var(--line);padding:13px}
.env .paper{border-radius:22px;padding:20px 20px 18px;min-height:120px;box-shadow:var(--soft)}
.airmail::before{padding:3px}
.env .paper::after{opacity:.45}
.env .t{font-size:26px;font-weight:600;line-height:1.05}
.env .from{border-top:none;padding-top:0;font-size:12.5px}
.env .tag-new{font-family:var(--f-ui);letter-spacing:0;text-transform:none;border-radius:999px;font-size:11.5px;padding:2px 9px}
.env .lockline{font-size:12.5px}
.sheet{border-radius:28px 28px 22px 22px;padding:32px 26px 22px}
.sheet::before{height:5px;border-radius:28px 28px 0 0}
.sheet .body{font-size:27px;line-height:34px;font-weight:500;background-image:repeating-linear-gradient(transparent 0 33px, rgba(45,75,107,.14) 33px 34px)}
.sheet .sign{font-size:28px}
.sheet .field{border-radius:14px}
.sheet .close{border-radius:999px}
.sheet .dateline{font-size:12.5px}
/* fotos */
.photos{gap:16px 14px}
.ph{border-radius:16px;padding:7px 7px 30px}
.ph .img{border-radius:11px}
.ph span.cap{font-size:19px;font-weight:600;bottom:5px;left:10px}
.ph .who{border-radius:999px;font-size:10.5px;padding:2px 8px;top:13px;right:13px}
.ph.add{border-radius:16px;border:1.5px dashed var(--line)}
/* nós */
.entry{border:none;border-radius:22px;box-shadow:var(--soft);background-image:repeating-linear-gradient(transparent 0 33px, color-mix(in srgb, var(--slate) 12%, transparent) 33px 34px)}
.entry p{font-size:24px;line-height:34px;font-weight:500}
.ev .evimg{border-radius:14px;padding:6px 6px 18px}
.ev .evimg img{border-radius:9px}
.mapbox{border:none;border-radius:24px;box-shadow:var(--soft)}
.mapbox .lbl{font-family:var(--f-display)}
.mapbox .sm{font-family:var(--f-ui);letter-spacing:0;font-size:10.5px}
/* mais */
.moregrid{background:none;border:none;gap:10px;border-radius:0;overflow:visible}
.moregrid button{border-radius:20px;box-shadow:var(--soft);padding:16px 12px 14px;font-size:14px}
.coupon{border:none;border-radius:22px;box-shadow:var(--soft)}
.coupon .stub small{font-family:var(--f-ui);letter-spacing:0;text-transform:none;font-size:11px}
.coupon button{border-radius:999px}
.stamp{border-radius:8px}
.score div{border:none;border-radius:20px;box-shadow:var(--soft)}
.score span{font-size:12.5px}
.flag-hero{border:none;border-radius:24px;box-shadow:var(--soft)}
.status{border:none;border-radius:18px}
.palettes button{border-radius:16px}
.opts button{border-radius:14px}
.feelmsg{border-left:none;background:var(--bg);border-radius:16px;padding:10px 14px}
.rules .row::before{font-family:var(--f-ui)}
.song .play{border-width:0;background:var(--surface2)}
/* barra e toast */
.tab-ind{top:4px;height:calc(100% - 8px);border-radius:16px;background:color-mix(in srgb, var(--clay) 12%, transparent)}
nav.tabs button{font-size:11.5px}
.toast{border-radius:999px;padding:11px 18px}
.proto{font-size:11.5px}
.intro .msg{font-size:26px;font-weight:500;line-height:1.25}
.intro p{font-size:13px}
.intro .back,.intro .letter{border-radius:14px}
.intro .back::before{border-radius:14px}

/* ===== App real: login, estados vazios, extras ===== */
.login{position:fixed;inset:0;z-index:90;background-color:var(--bg);background-image:var(--grain);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
  padding:max(24px, env(safe-area-inset-top,0px)) max(24px, env(safe-area-inset-right,0px)) max(24px, env(safe-area-inset-bottom,0px)) max(24px, env(safe-area-inset-left,0px))}
.login[hidden]{display:none}
.login svg.appicon-img{flex:none;width:84px;height:84px;border-radius:20px;box-shadow:0 10px 24px -10px rgba(0,0,0,.35)}
.login h1{font-family:var(--f-display);font-weight:500;font-variation-settings:"SOFT" 100,"opsz" 72;font-size:34px;line-height:1.05;margin:0}
.login p{margin:0;color:var(--muted);max-width:30ch}
.login form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.login .field{background:var(--surface);box-shadow:var(--soft)}
.login .err{color:var(--clay);font-size:13.5px;min-height:1.2em}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 18px;color:var(--muted);background:var(--surface);border-radius:22px;box-shadow:var(--soft)}
.empty-state .ico{width:30px;height:30px;color:var(--clay);stroke-width:1.4}
.empty-state b{color:var(--ink);font-family:var(--f-display);font-weight:500;font-variation-settings:"SOFT" 100;font-size:21px}
.empty-state span{font-size:14px;max-width:32ch}
.list .empty-state{box-shadow:none;border-radius:0}
.photos .empty-state{grid-column:1/-1}
.ph .img{background:var(--surface2)}
.ph .img img{opacity:0;transition:opacity .4s}
.ph .img img.ok{opacity:1}
.postcard .photo.blank{background:linear-gradient(150deg,var(--clay),var(--wine) 60%,#23252A)}
.postcard .blankmsg{position:absolute;inset:0;display:grid;place-items:center;color:#FBF8F1;font-family:var(--f-hand);font-size:24px;padding:0 30px;text-align:center;opacity:.9}
.mini-form{display:flex;flex-direction:column;gap:8px}
.row .del{border:none;background:none;color:var(--muted);padding:4px;flex:none}
.row .del .ico{width:16px;height:16px}
.place-link{color:var(--clay);font-size:12.5px;text-decoration:none;font-weight:600}
.viewer img{width:100%;border-radius:14px;display:block;margin-bottom:12px;max-height:60vh;object-fit:contain;background:#000}
.preview-img{width:100%;max-height:45vh;object-fit:contain;border-radius:14px;background:#000}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.danger{color:#9A3328 !important;border-color:#E2C7C2 !important}
.offline{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;translate:-50% 0;z-index:70;background:var(--clay);color:var(--on-accent);font-size:12.5px;padding:6px 14px;border-radius:999px}
.offline[hidden]{display:none}
.quiz-own .row{align-items:flex-start}
.opts-input{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.opts-input input[type=radio]{width:18px;height:18px;accent-color:var(--clay)}
.sending{opacity:.6;pointer-events:none}

/* ===== Tablet ===== */
@media (min-width: 600px){
  .photos{grid-template-columns:repeat(3,1fr)}
  .moregrid{grid-template-columns:repeat(4,1fr)}
}

/* ===== Computador: barra lateral + conteúdo largo ===== */
@media (min-width: 900px){
  body{font-size:16px}
  .app{max-width:1120px;margin-left:max(260px, calc((100vw - 1120px) / 2 + 130px));margin-right:auto;padding-block:34px 60px;padding-left:40px;padding-right:40px}
  header.top{padding-block:0 22px;margin-bottom:22px}
  .brand svg{width:42px;height:42px}
  .brand b{font-size:30px}
  .hello{font-size:26px}
  h2{font-size:52px;margin-bottom:10px}
  h3.sec{font-size:32px}
  .sub{font-size:15.5px;max-width:60ch}

  /* barra de abas vira menu lateral */
  nav.tabs{top:0;bottom:0;right:auto;width:240px;border-top:none;border-right:1px solid color-mix(in srgb, var(--line) 70%, transparent);
    padding:110px 16px 24px max(16px, env(safe-area-inset-left,0px));background:color-mix(in srgb, var(--surface) 70%, transparent)}
  nav.tabs::before{content:"S.V.V";position:absolute;top:34px;left:30px;font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-size:28px;color:var(--clay);letter-spacing:.02em}
  nav.tabs::after{content:"SempreVouVoltar";position:absolute;top:70px;left:31px;font-size:12px;color:var(--muted)}
  nav.tabs .in{display:flex;flex-direction:column;gap:4px;max-width:none}
  nav.tabs button{flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 14px;font-size:15px;border-radius:14px}
  nav.tabs button:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
  .tab-ind{top:0;left:0;width:100% !important;border-radius:14px;transition:transform .5s var(--spring), height .5s var(--spring)}
  .badge{position:static;margin-left:auto;animation:none}
  .toast{bottom:32px;left:calc(50% + 120px)}

  /* início em duas colunas */
  #v-inicio > .stack{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
  #v-inicio > .stack > .postcard{grid-row:span 3;rotate:-.6deg}
  .postcard .photo{aspect-ratio:4/5}
  .postcard .greet{font-size:42px}
  .track .num{font-size:68px}
  .notes .note{flex-basis:46%}

  /* listas e grades mais largas */
  .letters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .letters .empty-state{grid-column:1/-1}
  .photos{grid-template-columns:repeat(4,1fr);gap:22px 18px}
  .moregrid{grid-template-columns:repeat(6,1fr);gap:12px}
  .moregrid button{padding:18px 14px 16px}
  .sub-v{max-width:820px}
  #s-bandeira,#s-aparencia{max-width:820px}
  .nos-v{max-width:860px}
  #v-agenda .stack{max-width:820px}
  .timeline{max-width:720px}
  .ev .evimg{width:40%}
  .wish{gap:16px}

  /* cartas e janelas no centro da tela */
  .modal{align-items:center;padding:40px}
  .sheet{max-width:600px;border-radius:28px;max-height:86vh;padding:40px 44px 30px}
  .sheet::before{border-radius:28px 28px 0 0}

  /* login e abertura */
  .login h1{font-size:44px}
  .login form{max-width:380px}
  .intro h1{font-size:46px}
  .intro .envbig{width:380px}

  /* hover no computador */
  .card, .list, .mini, .moregrid button, .coupon, .entry{transition:transform .35s var(--spring), box-shadow .3s}
  .moregrid button:hover, .mini:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(35,37,42,.05), 0 16px 32px -16px rgba(35,37,42,.3)}
  .ph:hover{transform:translateY(-4px) rotate(0deg) scale(1.02)}
}
@media (min-width: 1280px){
  .photos{grid-template-columns:repeat(5,1fr)}
  .letters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* cabeçalho: sem quebra de linha no celular; no computador o logo já está no menu lateral */
.hello{white-space:nowrap}
@media (min-width: 900px){ header.top .brand{visibility:hidden} }

/* aviso de notificações no início */
.push-banner{border:1.5px solid color-mix(in srgb, var(--clay) 35%, transparent)}
.push-banner .pb-t{font-family:var(--f-display);font-weight:500;font-variation-settings:"SOFT" 100;font-size:22px;line-height:1.1}
@media (min-width: 900px){ #v-inicio > .stack > .push-banner{grid-column:1/-1} }

/* Botão "voltar ao menu Farina & Rausch" (o mesmo em todos os sites) */
.fr-back{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:var(--soft);border:1px solid color-mix(in srgb, var(--clay) 22%, transparent);transition:transform .35s var(--spring), box-shadow .3s;flex:none}
.fr-back .fr-seal{width:34px;height:34px;border-radius:50%;background:var(--clay);color:var(--on-accent);display:grid;place-items:center;box-shadow:inset 0 -2px 4px rgba(0,0,0,.18);transition:transform .35s var(--spring)}
.fr-back .fr-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.fr-back small{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.fr-back b{font-family:var(--f-display);font-weight:500;font-variation-settings:"SOFT" 100,"opsz" 36;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.fr-back b i{color:var(--clay)}
.fr-back:active{transform:scale(.96)}
@media (hover:hover){.fr-back:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(35,37,42,.05),0 14px 28px -14px rgba(35,37,42,.35)}.fr-back:hover .fr-seal{transform:translateX(-3px)}}
@media (min-width: 900px){ header.top{justify-content:flex-end} }

/* Foto de agora */
.now-pair{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;align-items:end}
.polar{position:relative;background:#FBF8F1;padding:7px 7px 30px;border-radius:12px;box-shadow:0 12px 24px -14px rgba(35,37,42,.5);rotate:var(--r,-1.5deg);border:none;text-align:left;cursor:pointer;font:inherit;color:#23252A;min-width:0}
.polar .img{aspect-ratio:3/4;max-width:100%;border-radius:8px;overflow:hidden;background:var(--surface2)}
.polar img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s}
.polar img.ok{opacity:1}
.polar .cap{position:absolute;left:10px;right:10px;bottom:6px;font-family:var(--f-hand);font-size:17px;font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.polar .tag{position:absolute;top:13px;left:13px;font-size:10.5px;font-weight:700;background:rgba(251,248,241,.92);color:#23252A;border-radius:999px;padding:2px 8px}
.polar .live{position:absolute;top:13px;right:13px;font-size:10.5px;font-weight:700;background:#9A3328;color:#FBF8F1;border-radius:999px;padding:2px 8px;display:flex;align-items:center;gap:4px}
.polar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#FBF8F1;animation:pulse2 1.6s ease-in-out infinite}
@keyframes pulse2{50%{opacity:.3}}
.polar.mine{--r:2deg}
.polar.blank{display:grid;place-items:center;aspect-ratio:3/4.4;background:var(--bg);box-shadow:none;border:1.5px dashed var(--line);color:var(--muted);font-family:var(--f-body);font-size:13px;text-align:center;padding:12px}
.now-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.now-btn .ico{width:18px;height:18px}
.now-archive{display:flex;flex-direction:column;gap:22px}
.now-month h4{margin:0 0 10px;font-family:var(--f-display);font-weight:500;font-variation-settings:"SOFT" 100;font-size:22px}
.now-month h4 small{font-family:var(--f-body);font-size:12.5px;color:var(--muted);margin-left:8px;font-weight:500}
.now-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px}
.now-grid .polar{padding:5px 5px 24px;--r:0deg}
.now-grid .polar .cap{font-size:14px;bottom:4px;left:7px}
.now-grid .polar .tag{top:9px;left:9px;font-size:9.5px}
@media (min-width:600px){.now-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.now-grid{grid-template-columns:repeat(6,1fr)}}

/* Início: no celular é uma coluna só (na ordem certa); no computador, duas colunas independentes, sem buracos */
.home-col{display:contents}
#v-inicio [data-o="1"]{order:1} #v-inicio [data-o="2"]{order:2} #v-inicio [data-o="3"]{order:3} #v-inicio [data-o="4"]{order:4}
#v-inicio [data-o="5"]{order:5} #v-inicio [data-o="6"]{order:6} #v-inicio [data-o="7"]{order:7}
@media (min-width: 900px){
  #v-inicio > .stack{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
  #v-inicio > .stack > .push-banner{grid-column:1/-1}
  .home-col{display:flex;flex-direction:column;gap:22px;min-width:0}
  #v-inicio > .stack > .postcard{grid-row:auto}
  .home-col > .postcard{rotate:-.6deg}
}