/* ==========================================================================
   Maicon Gouveia — etiqueta de transportadora + histórico de rastreamento
   Envelope carmesim como fundo, etiquetas em papel térmico, tinta preta.
   ========================================================================== */

:root{
  --mailer:#B01E28;          /* envelope plástico — cor de marca */
  --mailer-deep:#8C1720;
  --on-mailer:#FFF7F6;
  --on-mailer-soft:#F6CFD1;
  --paper:#F7F6F2;           /* papel térmico */
  --paper-2:#ECEAE3;
  --ink:#141414;
  --ink-2:#4A4743;
  --accent:#B01E28;

  --display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --body:"Barlow", "Segoe UI", system-ui, sans-serif;
  --mono:"Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter:clamp(16px, 4vw, 40px);
  --rule:2px solid var(--ink);
  --lift:0 1px 0 rgba(60,0,8,.28), 0 3px 4px -2px rgba(40,0,6,.35);
  --radius:4px;
  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:72px; scrollbar-color:var(--ink) var(--mailer-deep);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background-color:var(--mailer);
  /* grão do plástico do envelope */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  color:var(--on-mailer);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ink); color:var(--paper);}
.label ::selection, .sheet ::selection, .slip ::selection{background:var(--accent); color:var(--paper);}

a{color:inherit; text-underline-offset:.22em; text-decoration-thickness:1.5px;}
:focus-visible{outline:3px solid currentColor; outline-offset:3px; border-radius:2px;}
.label :focus-visible, .sheet :focus-visible, .slip :focus-visible{outline-color:var(--ink);}
h1,h2,h3{margin:0; font-family:var(--display); text-transform:uppercase; text-wrap:balance; font-weight:800;}
p{margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}
dl,dd{margin:0;}
time, .code, .seq{font-variant-numeric:tabular-nums;}

.ico{width:1em; height:1em; flex:none;}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:var(--gutter);}

.skip{
  position:absolute; left:12px; top:-60px; z-index:50;
  background:var(--paper); color:var(--ink); padding:10px 14px; font-weight:600;
}
.skip:focus{top:12px;}

/* ---------- nav ---------- */
.bar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--mailer-deep) 94%, transparent);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.bar .wrap{display:flex; align-items:center; gap:28px; min-height:60px;}
.mark{
  font-family:var(--display); font-weight:800; font-size:1.25rem; line-height:1;
  text-decoration:none; letter-spacing:.02em;
  border:2px solid var(--on-mailer); padding:5px 8px 4px;
}
.mark:hover{background:var(--on-mailer); color:var(--mailer-deep);}
.bar ul{display:flex; gap:26px; margin-left:auto;}
.bar ul a{
  font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:var(--on-mailer-soft);
}
.bar ul a:hover{color:var(--on-mailer); text-decoration:underline;}
.lang{
  font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.08em;
  text-decoration:none; border:1.5px solid var(--on-mailer-soft); padding:5px 9px;
}
.lang:hover{background:var(--on-mailer); color:var(--mailer-deep); border-color:var(--on-mailer);}

/* ---------- hero: a etiqueta ---------- */
.hero{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 72px); align-items:start;
  padding-block:clamp(36px, 6vw, 72px) clamp(64px, 9vw, 112px);
}

.label{
  position:relative; min-width:0; background:var(--paper); color:var(--ink);
  border-radius:var(--radius); padding:14px; box-shadow:var(--lift);
}
.label::before{ /* moldura impressa */
  content:""; position:absolute; inset:14px; border:var(--rule); border-radius:3px; pointer-events:none;
}
.hero .label{transform:rotate(-.8deg);}

.l-row{position:relative; padding:18px 24px;}
.l-row + .l-row{border-top:var(--rule);}
.l-row.agate{border-top-style:dashed;} /* picote do canhoto */

.f dt{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2);
}
.f dd{font-weight:600; line-height:1.3;}

.l-head{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;}
.sort{
  font-family:var(--display); font-weight:800; font-size:3.4rem; line-height:.8;
  background:var(--ink); color:var(--paper); padding:12px 14px 9px; letter-spacing:.01em;
}
.l-meta{display:grid; grid-template-columns:1fr auto; gap:6px 24px;}
.code{font-family:var(--mono); font-weight:600; font-size:.95rem; letter-spacing:.06em;}

.l-dest{display:grid; grid-template-columns:22px 1fr; gap:18px; padding-block:26px 28px;}
.side{
  writing-mode:vertical-rl; transform:rotate(180deg); justify-self:start; align-self:start;
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
}
.l-dest h1{font-size:clamp(2.6rem, 7.4vw, 6rem); line-height:.86; letter-spacing:-.005em;}
.role{
  font-family:var(--display); font-weight:700; font-size:clamp(1.25rem, 2.2vw, 1.6rem);
  text-transform:uppercase; letter-spacing:.04em; color:var(--accent); margin-top:10px;
}
.pitch{font-size:1.125rem; line-height:1.5; max-width:48ch; margin-top:14px;}

.l-fields{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); padding:0;}
.l-fields .f{padding:14px 18px 16px; min-width:0;}
.l-fields .f + .f{border-left:var(--rule);}
.l-fields .f:first-child{padding-left:24px;}
.l-fields dd{font-family:var(--display); font-weight:700; font-size:1.55rem; line-height:1.1; text-transform:uppercase;}
.l-fields .f:nth-child(3) dd{color:var(--accent);}
.l-fields dd span{display:block; font-family:var(--body); font-weight:600; font-size:.95rem; text-transform:none; color:var(--ink-2); margin-top:2px;}

.l-bars{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 28px; align-items:end;}
.barcode{display:block; text-decoration:none; color:var(--ink);}
.barcode .bars{display:block; width:100%; height:68px; fill:currentColor;}
.barcode .human{
  display:block; margin-top:6px; font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  text-align:center; overflow-wrap:anywhere;
}
.barcode:hover{color:var(--accent);}
.barcode:hover .human{text-decoration:underline;}

.actions{display:flex; flex-direction:column; gap:10px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:10px 18px; border-radius:4px;
  font-family:var(--display); font-weight:700; font-size:1.1rem; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
}
.btn.solid{background:var(--ink); color:var(--paper); border:2px solid var(--ink);}
.btn.solid:hover{background:var(--accent); border-color:var(--accent);}
.btn.line{border:2px solid var(--ink); color:var(--ink);}
.btn.line:hover{background:var(--ink); color:var(--paper);}
.btn:active{transform:translateY(1px);}

.agate{
  font-family:var(--mono); font-size:.78rem; line-height:1.7; color:var(--ink-2);
  padding-block:14px 16px;
}
.agate b{font-weight:600; color:var(--ink); text-transform:uppercase; letter-spacing:.08em;}

/* impressão térmica: cada faixa da etiqueta sai em cortes secos */
@media (prefers-reduced-motion: no-preference){
  .hero .l-row{animation:print .36s steps(6, end) backwards;}
  .hero .l-row:nth-child(2){animation-delay:.12s;}
  .hero .l-row:nth-child(3){animation-delay:.3s;}
  .hero .l-row:nth-child(4){animation-delay:.42s;}
  .hero .l-row:nth-child(5){animation-delay:.54s;}
  .latest li{animation:stamp .2s steps(2, end) backwards;}
  .latest li:nth-child(1){animation-delay:.72s;}
  .latest li:nth-child(2){animation-delay:.84s;}
  .latest li:nth-child(3){animation-delay:.96s;}
}
@keyframes print{from{clip-path:inset(0 0 100% 0);} to{clip-path:inset(0 0 0 0);}}
@keyframes stamp{from{opacity:0;} to{opacity:1;}}

/* ---------- últimos eventos (sobre o envelope) ---------- */
.latest{padding-top:clamp(8px, 2vw, 28px);}
.latest h2{
  font-size:1rem; font-weight:700; letter-spacing:.14em;
  padding-bottom:12px; border-bottom:2px solid var(--on-mailer);
}
.latest ol{position:relative; margin-top:22px;}
.latest ol::before{
  content:""; position:absolute; left:6px; top:10px; bottom:24px; width:2px;
  background:var(--on-mailer-soft); opacity:.55;
}
.latest li{position:relative; padding:0 0 26px 34px; display:grid;}
.latest li::before{
  content:""; position:absolute; left:0; top:5px; width:14px; height:14px; border-radius:50%;
  background:var(--mailer); border:2px solid var(--on-mailer);
}
.latest li.now::before{background:var(--on-mailer); box-shadow:0 0 0 5px rgba(255,247,246,.22);}
.latest time{font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:var(--on-mailer-soft); text-transform:uppercase;}
.latest b{font-family:var(--display); font-weight:800; font-size:2rem; line-height:1.05; text-transform:uppercase;}
.latest span{color:var(--on-mailer-soft); font-size:.95rem; line-height:1.4;}
.full, .more{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase;
}
.full{margin-left:34px;}

/* ---------- histórico de rastreamento ---------- */
.sheet{
  background:var(--paper); color:var(--ink); border-radius:var(--radius); box-shadow:var(--lift);
  padding:clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px) clamp(16px, 3vw, 32px);
}
.sheet-head{
  display:flex; justify-content:space-between; align-items:end; gap:12px 24px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:var(--rule);
}
.sheet-head h2{font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:.95;}
.sheet-head p{font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);}

.track{position:relative;}
.ev{
  position:relative; display:grid;
  grid-template-columns:2.4rem 18px 12.5rem minmax(0,1fr);
  column-gap:20px; padding-block:34px;
}
.ev + .ev{border-top:1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent);}
.seq{font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--ink-2); padding-top:4px;}
.ev{--rail:calc(2.4rem + 20px + 9px);}
.ev::before{ /* trilho contínuo */
  content:""; position:absolute; left:var(--rail); top:0; bottom:0; width:2px; margin-left:-1px; background:var(--ink);
}
.ev:first-child::before{top:44px;}
.ev:last-child::before{bottom:auto; height:44px;}
.dot{position:relative; z-index:1; justify-self:center; width:16px; height:16px; margin-top:6px; border-radius:50%; background:var(--ink); border:2px solid var(--ink);}
.ev.now .dot{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);}

.when time{
  display:block; white-space:nowrap; font-family:var(--mono); font-size:.8rem; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; padding-top:4px;
}
.status{
  display:inline-block; margin-top:10px; padding:3px 7px 2px;
  font-family:var(--mono); font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent); color:var(--paper);
}
.ev h3{font-size:clamp(2rem, 3.6vw, 2.6rem); line-height:.95;}
.team{font-weight:600; color:var(--accent); margin-top:6px;}
.desc{max-width:68ch; margin-top:12px; color:var(--ink);}
.ev-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:10px 24px; margin-top:16px;}
.tags{display:flex; flex-wrap:wrap; font-family:var(--mono); font-size:.75rem; color:var(--ink-2);}
.tags li + li::before{content:"/"; padding-inline:.6em; color:color-mix(in srgb, var(--ink-2) 55%, transparent);}
.site{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.8rem; font-weight:500;
}
.site .ico{width:.8em; height:.8em;}
.site:hover{color:var(--accent);}

/* evento carimbado quando entra na tela (JS opcional) */
.ev.wait .dot{background:var(--paper);}
.ev.wait.now .dot{background:var(--paper); box-shadow:none;}
.ev.lit .dot{animation:ink .24s steps(3, end);}
@keyframes ink{from{background:var(--paper);}}

/* ---------- formação + projetos ---------- */
.pair{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(32px, 5vw, 64px); padding-block:clamp(72px, 10vw, 128px) 0; align-items:start;
}
.pair h2{font-size:clamp(2.2rem, 4.6vw, 3.4rem); line-height:.95; margin-bottom:24px;}
.slips{display:grid; gap:20px;}
.slip{
  position:relative; background:var(--paper); color:var(--ink); border-radius:3px;
  padding:26px 28px 28px; box-shadow:var(--lift);
}
.slip::before{content:""; position:absolute; inset:10px; border:1.5px solid var(--ink); border-radius:3px; pointer-events:none;}
.slip h3{font-size:clamp(1.7rem, 2.8vw, 2.2rem); line-height:1;}
.slip-code{
  display:inline-block; margin:10px 0 14px; padding:3px 8px 2px;
  font-family:var(--mono); font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border:1.5px solid var(--accent); transform:rotate(-1.5deg);
}
.slip p{max-width:62ch;}
.tcc{margin-top:14px; padding-top:14px; border-top:1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent);}
.tcc b{font-weight:600;}
.slip .more{margin-top:12px; color:var(--ink);}
.slip .more:hover{color:var(--accent);}
.pair section:first-child .slip{transform:rotate(.6deg);}
.vol:nth-child(1){transform:rotate(-.4deg);}
.links{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px;}
.lnk{display:inline-flex; align-items:center; gap:6px; font-weight:600;}
.lnk .ico{width:.8em; height:.8em;}
.lnk:hover{color:var(--accent);}

/* ---------- contato ---------- */
.close{padding-block:clamp(80px, 11vw, 140px) 28px;}
.end{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:8px 40px; padding:clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px); align-items:center;
}
.end-copy h2{font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:.9;}
.end-copy p{margin-top:14px; font-size:1.125rem; max-width:42ch;}
.end .barcode .bars{height:84px;}
.channels{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; padding-top:22px; border-top:var(--rule);}
.channels a{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:10px 18px;
  border:2px solid var(--ink); border-radius:4px; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:1.1rem; letter-spacing:.05em; text-transform:uppercase;
}
.channels li:first-child a{background:var(--ink); color:var(--paper);}
.channels a:hover{background:var(--accent); border-color:var(--accent); color:var(--paper);}

.foot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; margin-top:40px;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:var(--on-mailer-soft);
}
.foot a:hover{color:var(--on-mailer);}

/* colunas curtas acompanham a rolagem ao lado da coluna longa */
@media (min-width: 961px){
  .latest, .pair > section:first-child{position:sticky; top:88px;}
}

/* ---------- responsivo ---------- */
@media (max-width: 960px){
  .hero{grid-template-columns:minmax(0,1fr);}
  .hero .label{transform:none;}
  .latest{max-width:560px;}
  .pair{grid-template-columns:minmax(0,1fr);}
  .end{grid-template-columns:minmax(0,1fr);}
}
@media (max-width: 720px){
  .bar ul{display:none;}
  .lang{margin-left:auto;}
  .l-row{padding:16px 16px;}
  .l-row.l-fields{padding:0;}
  .sheet{border-radius:0;}
  .l-fields{grid-template-columns:1fr 1fr;}
  .l-fields .f{padding:12px 16px 14px;}
  .l-fields .f:first-child{padding-left:16px;}
  .l-fields .f:nth-child(3){border-left:none; border-top:var(--rule);}
  .l-fields .f:nth-child(4){border-top:var(--rule);}
  .l-bars{grid-template-columns:minmax(0,1fr);}
  .actions{flex-direction:row; flex-wrap:wrap;}
  .actions .btn{flex:1 1 auto;}
  .l-head{gap:16px;}
  .sort{font-size:2.6rem;}
  .l-meta{grid-template-columns:1fr;}
  .l-dest{grid-template-columns:16px 1fr; gap:12px;}
  .ev{grid-template-columns:18px minmax(0,1fr); column-gap:16px; padding-block:28px;}
  .seq{display:none;}
  .dot{grid-row:1 / span 2;}
  .when{grid-column:2; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
  .when time{padding-top:2px;}
  .status{margin-top:0;}
  .ev-body{grid-column:2;}
  .ev{--rail:9px;}
  .ev:first-child::before{top:36px;}
  .ev:last-child::before{height:36px;}
  .end{row-gap:24px;}
  .slip{padding:24px 22px;}
  .pair section:first-child .slip, .vol:nth-child(1){transform:none;}
}