:root { --fm-ink: #263238; --fm-muted: #6f777b; --fm-paper: #fffdf8; --fm-coral: #ff695c; --fm-yellow: #ffc83d; --fm-teal: #2ab7a9; --fm-line: #e9e5dc; }
.fm-ot-tracker, .fm-ot-tracker * { box-sizing: border-box; }
.fm-ot-tracker { width: 100%; margin: 0 auto 48px; color: var(--fm-ink); font-family: inherit; }
.fm-ot-tracking-page .woocommerce-breadcrumb,
.fm-ot-tracking-page #secondary,
.fm-ot-tracking-page article.page > .entry-header,
.fm-ot-tracking-page .entry-title { display: none !important; }
.fm-ot-tracking-page #content .col-full { max-width: none; padding-right: 0; padding-left: 0; }
.fm-ot-tracking-page #primary,
.fm-ot-tracking-page #main,
.fm-ot-tracking-page article.page,
.fm-ot-tracking-page article.page .entry-content { width: 100% !important; max-width: none; margin: 0 !important; padding: 0 !important; float: none !important; }
.fm-ot-tracker .screen-reader-text { position: absolute !important; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.fm-ot-hero-shell { position: relative; left: 50%; width: 100vw; margin-left: -50vw; }
.fm-ot-hero { position: relative; display: flex; min-height: min(760px, calc(100vh - 70px)); align-items: center; overflow: hidden; padding: clamp(48px, 7vw, 100px) max(24px, calc((100vw - 1120px) / 2)); background-image: linear-gradient(90deg, rgba(255,253,248,.98) 0%, rgba(255,253,248,.94) 31%, rgba(255,253,248,.62) 52%, rgba(255,253,248,.08) 78%), url('tracking-hero.png'); background-position: center; background-size: cover; }
.fm-ot-hero-content { position: relative; z-index: 1; width: min(650px, 100%); }
.fm-ot-eyebrow { color: var(--fm-coral); font-size: 12px; font-weight: 900; letter-spacing: .17em; }
.fm-ot-hero h1 { max-width: 620px; margin: 12px 0 10px; color: var(--fm-ink); font-family: inherit; font-size: clamp(38px, 5.4vw, 70px); font-weight: 850; line-height: 1.02; letter-spacing: -.045em; }
.fm-ot-hero .fm-ot-hero-intro { max-width: 510px; margin: 0 0 28px; color: #665f5a; font-size: clamp(16px, 2vw, 20px); line-height: 1.5; }
.fm-ot-security { display: flex; gap: 14px; max-width: 620px; margin-bottom: 22px; padding: 18px 20px; border-left: 5px solid var(--fm-coral); border-radius: 3px 13px 13px 3px; background: rgba(255,255,255,.94); box-shadow: 0 12px 34px rgba(59, 45, 36, .14); backdrop-filter: blur(5px); }
.fm-ot-security-icon { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #fff0c2; color: #9d5b00; font-weight: 900; }
.fm-ot-security strong { color: var(--fm-coral); font-size: 12px; letter-spacing: .08em; }
.fm-ot-security p { margin: 5px 0 0; color: #5e5d5a; font-size: 14px; line-height: 1.55; }
.fm-ot-search { display: flex; width: min(620px, 100%); margin: 0; padding: 5px; border: 1px solid rgba(70, 50, 40, .14); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(82, 58, 46, .16); }
.fm-ot-search input { min-width: 0; flex: 1; height: 52px; padding: 0 16px; border: 0 !important; outline: 0; background: transparent; box-shadow: none !important; font: inherit; font-size: 16px; }
.fm-ot-search button { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--fm-coral); color: #fff; font: inherit; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.fm-ot-search button b { font-size: 22px; line-height: 1; }
.fm-ot-search button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 105, 92, .32); }
.fm-ot-search button:disabled { opacity: .72; cursor: wait; }
.fm-ot-hero .fm-ot-search-help { margin: 12px 0 0; color: #716b66; font-size: 12px; }
.fm-ot-loading { display: none; align-items: center; gap: 6px; margin-top: 18px; color: #745c55; font-size: 14px; }
.is-loading .fm-ot-loading { display: flex; }
.fm-ot-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--fm-coral); animation: fm-dot 1s infinite alternate; }
.fm-ot-loading span:nth-child(2) { animation-delay: .2s; }.fm-ot-loading span:nth-child(3) { animation-delay: .4s; }
.fm-ot-has-result .fm-ot-hero-shell { left: auto; width: 100%; margin-left: 0; background: #f8f6f2; }
.fm-ot-has-result .fm-ot-hero { min-height: 0; padding: 22px max(16px, calc((100% - 1120px) / 2)); background: transparent; }
.fm-ot-has-result .fm-ot-hero-content { width: 100%; }
.fm-ot-has-result .fm-ot-eyebrow,
.fm-ot-has-result .fm-ot-hero h1,
.fm-ot-has-result .fm-ot-hero-intro,
.fm-ot-has-result .fm-ot-security,
.fm-ot-has-result .fm-ot-search-help { display: none; }
.fm-ot-has-result .fm-ot-search { width: 100%; max-width: none; box-shadow: 0 5px 18px rgba(82, 58, 46, .1); }
.fm-ot-has-result .fm-ot-loading { margin: 10px 0 0; }
.fm-ot-has-result .fm-ot-result { margin-top: 22px; }
.fm-ot-notice { width: min(1120px, calc(100% - 32px)); margin: 18px auto; padding: 15px 18px; border-radius: 12px; }
.fm-ot-error { border: 1px solid #ffd0cc; background: #fff3f1; color: #8a352e; }
.fm-ot-result { width: min(1120px, calc(100% - 32px)); margin: 26px auto 0; overflow: hidden; border: 1px solid var(--fm-line); border-radius: 26px; background: var(--fm-paper); box-shadow: 0 16px 48px rgba(37, 45, 48, .08); }
.fm-ot-result.is-revealed { animation: fm-reveal .55s ease-out both; }
.fm-ot-summary { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 32px clamp(22px, 5vw, 52px); border-bottom: 1px solid var(--fm-line); }
.fm-ot-order-number { color: var(--fm-coral); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.fm-ot-summary h3 { margin: 5px 0; font-size: clamp(24px, 4vw, 35px); letter-spacing: -.025em; }
.fm-ot-summary p { max-width: 620px; margin: 0; color: var(--fm-muted); }
.fm-ot-delivery-card { min-width: 190px; padding: 18px 22px; border-radius: 16px; background: #e9f8f5; text-align: left; }
.fm-ot-delivery-card span, .fm-ot-delivery-card small { display: block; color: #47736d; font-size: 12px; }
.fm-ot-delivery-card strong { display: block; margin: 3px 0; color: #157d72; font-size: 25px; }
.fm-ot-contact-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 26px clamp(22px, 5vw, 54px) 0; padding: 22px 24px; border: 1px solid #f04438; border-left: 7px solid #d92d20; border-radius: 16px; background: #fff1f0; box-shadow: 0 12px 30px rgba(180, 35, 24, .16); }
.fm-ot-contact-alert-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: #d92d20; color: #fff; font-size: 27px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 6px rgba(217, 45, 32, .1); }
.fm-ot-contact-alert-copy > span { display: block; margin-bottom: 3px; color: #b42318; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.fm-ot-contact-alert-copy strong { display: block; color: #7a271a; font-size: 18px; line-height: 1.3; }
.fm-ot-contact-alert-copy p { margin: 5px 0 0; color: #7a3830; font-size: 14px; line-height: 1.5; }
.fm-ot-contact-alert > a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 16px; border-radius: 10px; background: #167f72; color: #fff; font-size: 13px; font-weight: 800; text-align: center; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.fm-ot-contact-alert > a:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(22, 127, 114, .25); }
.fm-ot-progress { position: relative; padding: 58px clamp(22px, 5vw, 54px) 45px; }
.fm-ot-progress-track { position: absolute; z-index: 0; top: 96px; right: calc(clamp(22px, 5vw, 54px) + 45px); left: calc(clamp(22px, 5vw, 54px) + 45px); height: 7px; overflow: hidden; border-radius: 20px; background: var(--fm-line); }
.fm-ot-progress-track span { display: block; width: var(--fm-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fm-yellow), var(--fm-coral)); animation: fm-grow 1.1s .2s ease-out both; }
.fm-ot-timeline { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.fm-ot-step { min-width: 0; text-align: center; }
.fm-ot-character { position: relative; display: grid; width: 78px; height: 78px; margin: 0 auto 16px; place-items: center; border: 6px solid var(--fm-paper); border-radius: 19px; background: #f1efea; color: #9b9d99; box-shadow: 0 0 0 2px #dfdcd4; }
.fm-ot-character i { position: absolute; right: -8px; bottom: -4px; display: grid; width: 26px; height: 26px; place-items: center; border: 3px solid var(--fm-paper); border-radius: 50%; background: #a9aaa6; color: #fff; font-style: normal; font-weight: 900; }
.fm-ot-process-svg { width: 58px; height: 58px; overflow: visible; }
.fm-ot-svg-surface, .fm-ot-printer-paper-top, .fm-ot-photo-sheet, .fm-ot-package-back, .fm-ot-frame-piece { fill: #fff; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fm-ot-svg-line, .fm-ot-svg-muted, .fm-ot-svg-accent, .fm-ot-crop-mark, .fm-ot-package-flap, .fm-ot-speed-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fm-ot-svg-muted { opacity: .5; }
.fm-ot-svg-accent { color: var(--fm-coral); }
.fm-ot-edit-canvas, .fm-ot-frame-photo { fill: #fff4df; stroke: currentColor; stroke-width: 1.8; }
.fm-ot-crop-mark { stroke-dasharray: 4 3; }
.fm-ot-photo-sheet { fill: #fffaf0; }
.fm-ot-package-back { fill: #f8e8cd; }
.fm-ot-package-flap { stroke: #b88752; }
.fm-ot-frame-piece { fill: #fff7e8; }
.fm-ot-wheel { fill: #fff; stroke: currentColor; stroke-width: 3; }
.fm-ot-speed-line { opacity: .65; }
.is-done .fm-ot-character, .is-active .fm-ot-character { background: #f7fbfa; box-shadow: 0 0 0 2px var(--fm-teal), 0 8px 20px rgba(42, 183, 169, .15); }
.is-done .fm-ot-character { color: #287f77; }
.is-done .fm-ot-character i { background: var(--fm-teal); }
.is-active .fm-ot-character { color: #454e50; background: #fff8f5; box-shadow: 0 0 0 3px var(--fm-coral), 0 10px 26px rgba(255, 105, 92, .2); }
.is-active .fm-ot-character i { background: var(--fm-coral); animation: fm-pulse 1.1s infinite; }
.fm-ot-needs-attention .fm-ot-progress-track span { background: #d92d20; }
.fm-ot-needs-attention .is-active .fm-ot-character { color: #7a271a; background: #fff1f0; box-shadow: 0 0 0 4px #d92d20, 0 12px 28px rgba(217, 45, 32, .24); }
.fm-ot-needs-attention .is-active .fm-ot-character i { background: #d92d20; color: #fff; }
.fm-ot-needs-attention .is-active .fm-ot-step-state,
.fm-ot-needs-attention .is-active .fm-ot-step strong { color: #d92d20; }
.is-active .fm-ot-check-path { stroke-dasharray: 22; animation: fm-draw-check 1.7s ease-in-out infinite; }
.is-active .fm-ot-crop-mark { animation: fm-crop-pulse 1.4s ease-in-out infinite; }
.is-active .fm-ot-photo-output { animation: fm-print-photo 1.8s ease-in-out infinite; }
.is-active .fm-ot-frame-piece, .is-active .fm-ot-frame-photo { transform-origin: 32px 41px; animation: fm-pack-frame 2s ease-in-out infinite; }
.is-active .fm-ot-delivery-vehicle { animation: fm-delivery-move 1.35s ease-in-out infinite; }
.is-active .fm-ot-speed-line { animation: fm-speed-lines 1.35s ease-in-out infinite; }
.fm-ot-step-copy { display: flex; flex-direction: column; align-items: center; }
.fm-ot-step-state { min-height: 18px; color: #a1a19c; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.is-active .fm-ot-step-state { color: var(--fm-coral); }
.is-done .fm-ot-step-state { color: var(--fm-teal); }
.fm-ot-step strong { max-width: 145px; margin: 3px 0; font-size: 14px; line-height: 1.25; }
.fm-ot-step time { color: var(--fm-muted); font-size: 12px; }
.fm-ot-shipping-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin: 0 clamp(22px, 5vw, 54px) 42px; padding: 22px 26px; border-radius: 17px; background: #283b3d; color: #fff; }
.fm-ot-shipping-card--motoboy { background: #713b1e; }
.fm-ot-shipping-card--retirada { background: #315269; }
.fm-ot-truck { display: grid; width: 58px; height: 58px; place-items: center; color: #d7efec; }
.fm-ot-truck .fm-ot-process-svg { width: 54px; height: 54px; }
.fm-ot-truck .fm-ot-svg-surface { fill: transparent; }
.fm-ot-truck .fm-ot-svg-accent { color: #ff9a74; }
.fm-ot-truck .fm-ot-delivery-vehicle { animation: fm-delivery-move 1.6s ease-in-out infinite; }
.fm-ot-truck .fm-ot-speed-line { animation: fm-speed-lines 1.6s ease-in-out infinite; }
.fm-ot-shipping-card span { display: block; color: #9fc5c2; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.fm-ot-shipping-card strong { display: block; margin-top: 3px; font-size: 19px; }
.fm-ot-shipping-card a { padding: 12px 16px; border-radius: 10px; background: #fff; color: #263c3d; font-size: 13px; font-weight: 800; text-decoration: none; }
.fm-ot-result-footer { display: flex; justify-content: space-between; gap: 15px; padding: 16px clamp(22px, 5vw, 54px); border-top: 1px solid var(--fm-line); color: #888981; font-size: 11px; }
@keyframes fm-reveal { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes fm-grow { from { width: 0; } }
@keyframes fm-pulse { 50% { transform: scale(1.15); } }
@keyframes fm-dot { to { transform: translateY(-5px); opacity: .45; } }
@keyframes fm-draw-check { 0%,20% { stroke-dashoffset: 22; } 55%,100% { stroke-dashoffset: 0; } }
@keyframes fm-crop-pulse { 0%,100% { opacity: .35; stroke-dashoffset: 0; } 50% { opacity: 1; stroke-dashoffset: 7; } }
@keyframes fm-print-photo { 0%,18% { transform: translateY(-9px); opacity: .25; } 55%,82% { transform: translateY(4px); opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes fm-pack-frame { 0%,18% { transform: translateY(-7px) scale(1); } 58%,82% { transform: translateY(9px) scale(.82); } 100% { transform: translateY(9px) scale(.82); opacity: .35; } }
@keyframes fm-delivery-move { 0%,100% { transform: translateX(-2px) translateY(0); } 50% { transform: translateX(3px) translateY(-1px); } }
@keyframes fm-speed-lines { 0%,100% { transform: translateX(4px); opacity: .2; } 50% { transform: translateX(-2px); opacity: .85; } }
@media (max-width: 760px) {
  .fm-ot-hero { min-height: 0; padding: 52px 20px 60px; background-image: linear-gradient(180deg, rgba(255,253,248,.97) 0%, rgba(255,253,248,.9) 68%, rgba(255,253,248,.72) 100%), url('tracking-hero.png'); background-position: 64% center; }
  .fm-ot-hero h1 { font-size: clamp(37px, 12vw, 54px); }
  .fm-ot-security { padding: 15px; }
  .fm-ot-search { display: grid; }
  .fm-ot-has-result .fm-ot-hero { padding: 14px 12px; background: transparent; }
  .fm-ot-has-result .fm-ot-search { display: flex; }
  .fm-ot-has-result .fm-ot-search input { height: 46px; padding: 0 12px; font-size: 14px; }
  .fm-ot-has-result .fm-ot-search button { min-height: 46px; padding: 0 15px; }
  .fm-ot-search button { justify-content: center; }
  .fm-ot-summary { align-items: stretch; flex-direction: column; }
  .fm-ot-delivery-card { min-width: 0; }
  .fm-ot-contact-alert { grid-template-columns: auto 1fr; padding: 18px; }
  .fm-ot-contact-alert > a { grid-column: 1 / -1; width: 100%; }
  .fm-ot-progress { padding-top: 30px; }
  .fm-ot-progress-track { top: 30px; bottom: 50px; left: 53px; width: 7px; height: auto; }
  .fm-ot-progress-track span { width: 100%; height: var(--fm-progress); animation-name: fm-grow-vertical; }
  .fm-ot-timeline { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .fm-ot-step { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 16px; text-align: left; }
  .fm-ot-character { width: 58px; height: 58px; margin: 0; border-width: 5px; border-radius: 15px; }
  .fm-ot-process-svg { width: 46px; height: 46px; }
  .fm-ot-step-copy { align-items: flex-start; }
  .fm-ot-step strong { max-width: none; }
  .fm-ot-shipping-card { grid-template-columns: auto 1fr; }
  .fm-ot-shipping-card a { grid-column: 1 / -1; text-align: center; }
  .fm-ot-result-footer { flex-direction: column; }
}
@keyframes fm-grow-vertical { from { height: 0; } }
@media (prefers-reduced-motion: reduce) { .fm-ot-tracker *, .fm-ot-tracker *:before, .fm-ot-tracker *:after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
