/* ---------- tablet da rede: o mesmo produto, com a pele de cada direcção ---------- */
.tab { position: absolute; inset: 0; overflow: hidden; background: var(--t-bg); color: var(--t-txt); font-family: var(--t-fonte); -webkit-font-smoothing: antialiased; user-select: none; }
.tab button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.tab button:focus-visible { outline: 3px solid var(--t-acento); outline-offset: 3px; }
.tab section { position: absolute; inset: 0; display: none; }
.tab[data-estado="entrada"] .t-entrada, .tab[data-estado="lista"] .t-lista, .tab[data-estado="ficha"] .t-ficha { display: block; }
.t-meta { font-family: var(--t-mono); font-size: 17px; color: var(--t-sub); letter-spacing: var(--t-meta-esp, 0); }

/* entrada */
.t-media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.t-veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 40%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.9) 100%); }
.t-topo { position: absolute; left: 32px; right: 32px; top: 26px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.t-rede { display: flex; align-items: center; gap: 14px; }
.t-espaco { font-family: var(--t-mono); font-size: 17px; color: rgba(255,255,255,.82); white-space: nowrap; }
.t-acoes { display: flex; align-items: center; gap: 14px; }
.t-lang { font-size: 16px; color: rgba(255,255,255,.8); display: flex; gap: 10px; }
.t-lang b { color: #fff; }
.t-pilula { border-radius: var(--t-raio-p); padding: 10px 18px; font-size: 16px; font-weight: 600; background: rgba(0,0,0,.42); color: #fff; }
.t-prog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 420px; justify-self: center; width: 100%; }
.t-prog i { position: relative; height: 4px; background: rgba(255,255,255,.28); border-radius: 3px; overflow: hidden; }
.t-prog i::after { content: ""; position: absolute; inset: 0; background: var(--t-acento); transform-origin: 0 50%; transform: scaleX(0); }
.t-prog i.feito::after { transform: scaleX(1); }
.t-prog i.agora::after { animation: t-enche var(--t-dur, 6s) linear forwards; }
.tab.parado .t-prog i.agora::after { animation: none; transform: scaleX(.55); }
@keyframes t-enche { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.t-anuncio { position: absolute; left: 40px; bottom: 116px; width: 760px; display: flex; flex-direction: column; gap: 10px; color: #fff; }
.t-logo-a { height: 30px; width: auto; align-self: flex-start; margin-bottom: 4px; }
.t-tit { font-size: 50px; font-weight: var(--t-peso-tit); letter-spacing: var(--t-esp-tit); line-height: 1.02; }
.t-sub { font-size: 22px; font-weight: 600; color: var(--t-acento-claro, #fff); }
.t-leg { font-size: 19px; line-height: 1.4; color: rgba(255,255,255,.82); max-width: 640px; }
.t-ver { align-self: flex-start; margin-top: 8px; background: var(--t-acento) !important; color: var(--t-acento-txt) !important; border-radius: var(--t-raio-p) !important; padding: 15px 26px !important; font-size: 19px; font-weight: 700; }
.t-qrcard { position: absolute; right: 40px; bottom: 116px; background: #fff; color: #111; border-radius: var(--t-raio); padding: 16px 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.t-qrcard span { font-size: 15px; font-weight: 600; }
.t-explorar { position: absolute; left: 0; right: 0; bottom: 0; height: 88px; padding: 0 32px; display: flex; align-items: center; gap: 14px; background: var(--t-barra); border-top: 1px solid var(--t-linha); }
.t-explorar .t-rot { font-size: 18px; font-weight: 700; margin-right: 8px; white-space: nowrap; }
.t-chip { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: var(--t-raio-p); border: 1px solid var(--t-linha-forte); font-size: 18px; font-weight: 600; white-space: nowrap; }
.t-chip b { font-family: var(--t-mono); font-weight: 500; color: var(--t-sub); font-size: 15px; }
.t-chip.on { background: var(--t-acento); color: var(--t-acento-txt); border-color: var(--t-acento); }
.t-chip.on b { color: inherit; opacity: .75; }
.t-tudo { margin-left: auto; }

/* botões de cada marca, no cartão do loop: ver a oferta, catálogo, sobre nós e, se houver, um à medida */
.t-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.t-botoes .t-ver { margin-top: 0; }
.t-botoes [hidden] { display: none !important; }
.t-bt { height: 52px; padding: 0 22px !important; border-radius: var(--t-raio-p) !important; background: rgba(0,0,0,.42) !important; border: 1px solid rgba(255,255,255,.4) !important; color: #fff; font-size: 17px; font-weight: 600; }
.t-bt.t-extra { background: rgba(255,255,255,.16) !important; }

/* lista */
.t-lista { padding: 26px 32px 0; background: var(--t-bg); }
.t-cab { display: flex; align-items: center; gap: 20px; }
.t-voltar { height: 52px; padding: 0 22px !important; border-radius: var(--t-raio-p) !important; border: 1px solid var(--t-linha-forte) !important; font-size: 18px; font-weight: 600; }
.t-cab h3 { margin: 0; font-size: 34px; font-weight: var(--t-peso-tit); letter-spacing: var(--t-esp-tit); }
.t-cab .t-meta { margin-left: auto; }
.t-chips { display: flex; gap: 12px; margin: 20px 0 22px; }
.t-grelha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.t-cartao { text-align: left; background: var(--t-surf) !important; border-radius: var(--t-raio) !important; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--t-linha) !important; }
.t-cartao .t-img { height: 170px; background-size: cover; background-position: center; position: relative; }
.t-cartao .t-tag { position: absolute; left: 12px; top: 12px; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: var(--t-raio-p); background: rgba(0,0,0,.6); color: #fff; letter-spacing: .02em; }
.t-cartao .t-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.t-cartao .t-anun { font-family: var(--t-mono); font-size: 14px; color: var(--t-sub); }
.t-cartao .t-nome { font-size: 20px; font-weight: 700; line-height: 1.15; min-height: 46px; }
.t-cartao .t-preco { font-size: 18px; font-weight: 700; color: var(--t-acento-texto); }
.t-cartao.disp { opacity: .55; }

/* ficha */
.t-ficha { padding: 26px 32px; background: var(--t-bg); }
.t-ficha .t-cab .t-logo-a { height: 26px; margin: 0 0 0 auto; }
.t-fgrid { display: grid; grid-template-columns: 640px 1fr; gap: 36px; margin-top: 22px; }
.t-fimg { width: 640px; height: 400px; background-size: cover; background-position: center; border-radius: var(--t-raio); position: relative; }
.t-polegares { display: flex; gap: 12px; margin-top: 14px; }
.t-polegares button { width: 116px; height: 72px; background-size: cover; background-position: center; border-radius: var(--t-raio-s); opacity: .55; outline-offset: 3px; }
.t-polegares button.on { opacity: 1; outline: 3px solid var(--t-acento); }
.t-ftexto { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.t-ftexto h4 { margin: 0; font-size: 34px; line-height: 1.08; font-weight: var(--t-peso-tit); letter-spacing: var(--t-esp-tit); }
.t-ftexto .t-preco { font-size: 24px; font-weight: 700; color: var(--t-acento-texto); }
.t-ftexto p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--t-sub); }
.t-ftexto ul { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.38; }
.t-fqr { margin-top: auto; display: flex; align-items: center; gap: 16px; background: #fff; color: #111; border-radius: var(--t-raio); padding: 12px 18px 12px 12px; text-align: left; }
.t-fqr b { display: block; font-size: 17px; }
.t-fqr span { font-size: 14px; color: #555; }

/* sobre a marca */
.tab[data-estado="sobre"] .t-sobre { display: block; }
.t-sobre { padding: 26px 32px; background: var(--t-bg); }
.t-sgrid { display: grid; grid-template-columns: 520px 1fr; gap: 36px; margin-top: 22px; }
.t-simg { position: relative; width: 520px; height: 400px; border-radius: var(--t-raio); background-size: cover; background-position: center; background-color: var(--t-surf); }
.t-stexto { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.t-stexto h4 { margin: 0; font-size: 34px; line-height: 1.08; font-weight: var(--t-peso-tit); letter-spacing: var(--t-esp-tit); }
.t-slead { margin: 0; font-size: 19px; line-height: 1.45; }
.t-stexto ul { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.38; color: var(--t-sub); }

/* QR grande e escurecer */
.t-zoom { position: absolute; inset: 0; background: rgba(5,6,10,.78); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 22px; }
.tab.qr .t-zoom { display: flex; }
.t-zcard { background: #fff; color: #111; border-radius: var(--t-raio); padding: 26px; display: flex; gap: 28px; align-items: center; }
.t-zcard b { display: block; font-size: 30px; font-weight: var(--t-peso-tit); line-height: 1.08; max-width: 360px; }
.t-zcard em { display: block; font-style: normal; font-size: 22px; font-weight: 700; margin-top: 8px; color: var(--t-acento-qr, #111); }
.t-zcard span { display: block; font-size: 17px; color: #555; margin-top: 10px; }
.t-zoom > span { color: rgba(255,255,255,.8); font-size: 17px; }
.t-escuro { position: absolute; inset: 0; background: #000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms ease, visibility 0s linear 300ms; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: 20px; }
.tab.escuro .t-escuro { opacity: .92; visibility: visible; pointer-events: auto; transition: opacity 300ms ease; }

/* espaço disponível (casa) */
.t-casa { position: absolute; inset: 0; background: var(--t-casa-bg); display: none; }
.tab.casa .t-casa { display: block; }
.tab.casa .t-media, .tab.casa .t-veu, .tab.casa .t-anuncio, .tab.casa .t-qrcard { display: none; }
.t-casa-txt { position: absolute; left: 56px; top: 150px; width: 760px; display: flex; flex-direction: column; gap: 16px; }
.t-casa-txt .t-meta { color: var(--t-casa-sub); }
.t-casa-txt b { font-size: 56px; line-height: 1.02; font-weight: var(--t-peso-tit); letter-spacing: var(--t-esp-tit); color: var(--t-casa-txt); }
.t-casa-txt p { margin: 0; font-size: 22px; line-height: 1.4; color: var(--t-casa-sub); max-width: 620px; }
.t-casa .t-qrcard { display: flex; right: 56px; bottom: 140px; }

/* peles */
.tab-registo { --t-bg: #0B0D10; --t-surf: #14171C; --t-txt: #E8E9EC; --t-sub: #8B9099; --t-linha: #23272E; --t-linha-forte: #3A3F48; --t-barra: rgba(11,13,16,.92);
  --t-acento: #F6F6F3; --t-acento-txt: #0E1116; --t-acento-texto: #F6F6F3; --t-raio: 3px; --t-raio-s: 2px; --t-raio-p: 3px; --t-fonte: "Geist", system-ui, sans-serif; --t-mono: "Geist Mono", ui-monospace, monospace;
  --t-peso-tit: 600; --t-esp-tit: -0.02em; --t-casa-bg: #F6F6F3; --t-casa-txt: #0E1116; --t-casa-sub: #5F646C; }
.tab-rota { --t-bg: #0F1A31; --t-surf: #1B2949; --t-txt: #FFFFFF; --t-sub: #9AA4B8; --t-linha: rgba(255,255,255,.10); --t-linha-forte: rgba(255,255,255,.22); --t-barra: rgba(15,26,49,.94);
  --t-acento: #FFB547; --t-acento-txt: #0F1A31; --t-acento-texto: #FFB547; --t-acento-claro: #FFD08A; --t-raio: 18px; --t-raio-s: 12px; --t-raio-p: 999px; --t-fonte: "Manrope Variable", "Manrope", system-ui, sans-serif; --t-mono: "Manrope Variable", "Manrope", system-ui, sans-serif;
  --t-peso-tit: 800; --t-esp-tit: -0.025em; --t-casa-bg: #0F1A31; --t-casa-txt: #FFFFFF; --t-casa-sub: #9AA4B8; --t-acento-qr: #0F1A31; }
.tab-sinal { --t-bg: #141519; --t-surf: #1E1F25; --t-txt: #FFFFFF; --t-sub: #A2A5AD; --t-linha: rgba(255,255,255,.09); --t-linha-forte: rgba(255,255,255,.2); --t-barra: rgba(20,21,25,.94);
  --t-acento: #F8333C; --t-acento-txt: #FFFFFF; --t-acento-texto: #FFFFFF; --t-raio: 26px; --t-raio-s: 16px; --t-raio-p: 999px; --t-fonte: "Schibsted Grotesk", system-ui, sans-serif; --t-mono: "Schibsted Grotesk", system-ui, sans-serif;
  --t-peso-tit: 900; --t-esp-tit: -0.03em; --t-casa-bg: #F8333C; --t-casa-txt: #FFFFFF; --t-casa-sub: rgba(255,255,255,.88); --t-acento-qr: #F8333C; }

/* motivos de cada direcção */
.tab-registo .t-espaco::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #1F9D61; margin-right: 8px; vertical-align: 1px; }
.tab-registo .t-qrcard, .tab-registo .t-fimg { box-shadow: none; }
.tab-registo .t-cantos { position: absolute; inset: -10px; pointer-events: none; }
.tab-registo .t-cantos::before, .tab-registo .t-cantos::after { content: ""; position: absolute; width: 26px; height: 26px; border: 0 solid currentColor; }
.tab-registo .t-cantos::before { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; }
.tab-registo .t-cantos::after { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; }
.tab-registo .t-qrcard .t-cantos { color: #fff; inset: -12px; }
.tab-registo .t-fimg .t-cantos { color: var(--t-txt); }
.tab-registo .t-tag { font-family: var(--t-mono); font-weight: 500; letter-spacing: 0; }
.tab-rota .t-prog { display: flex; align-items: center; gap: 0; }
.tab-rota .t-prog i { flex: 1; height: 3px; border-radius: 2px; }
.tab-rota .t-prog .t-par { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255,255,255,.55); flex: none; background: transparent; }
.tab-rota .t-prog .t-par.feita { border-color: var(--t-acento); }
.tab-rota .t-prog .t-par.aqui { border-color: var(--t-acento); background: var(--t-acento); box-shadow: 0 0 0 6px rgba(255,181,71,.22); }
.tab-sinal .t-rede { background: #fff; border-radius: 999px; padding: 9px 16px 9px 18px; }
.tab-sinal .t-espaco { color: #5B5E66; font-family: var(--t-fonte); font-weight: 600; }
.tab-sinal .t-prog { grid-template-columns: repeat(3, 14px); gap: 12px; justify-content: center; }
.tab-sinal .t-prog i { height: 14px; border-radius: 50%; }
.tab-sinal .t-prog i::after { border-radius: 50%; }
.tab-sinal .t-prog i.agora::after { animation: none; transform: scaleX(1); }
.tab-sinal .t-prog i.agora { box-shadow: 0 0 0 5px rgba(248,51,60,.28); }
@media (prefers-reduced-motion: reduce) { .t-prog i.agora::after { animation: none; transform: scaleX(1); } .t-escuro { transition: none; } }

/* painel do que fica medido (fora do tablet) */
.demo-seg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.demo-seg span { font-size: 14px; margin-right: 6px; }
.demo-seg button { font: inherit; font-size: 14px; padding: 8px 14px; cursor: pointer; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; opacity: .78; }
.demo-seg button[aria-pressed="true"] { opacity: 1; }
.v1 .demo-seg button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.v2 .demo-seg button[aria-pressed="true"] { background: var(--ambar); color: var(--noite); border-color: var(--ambar); }
.v3 .demo-seg button[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.tab-host { position: absolute; inset: 0; }
.t-grelha { overflow-y: auto; max-height: 588px; padding-bottom: 20px; scrollbar-width: none; }
.t-grelha::-webkit-scrollbar { display: none; }
.t-chips { overflow-x: auto; scrollbar-width: none; }
.t-chips .t-chip { height: 46px; padding: 0 16px; font-size: 16px; }
.demo-medida .sub, .demo-medida .nota { opacity: .78; }
.demo-medida li { border-top-color: color-mix(in srgb, currentColor 16%, transparent); }
.v1 .demo-medida ol, .v1 .demo-medida .contas b { font-family: var(--mono); }
.v1 .demo-medida .contas div { background: #EBEBE6; }
.v2 .demo-medida .contas div { background: var(--navy); }
.v3 .demo-medida .contas div { background: var(--cinza); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.demo-medida { font-size: 13.5px; line-height: 1.45; min-width: 0; }
.demo-medida h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.demo-medida .contas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 14px; }
.demo-medida .contas div { padding: 10px 12px; border-radius: 4px; }
.demo-medida .contas b { display: block; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.demo-medida ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; max-height: 260px; overflow: hidden; }
.demo-medida li { padding: 7px 0; border-top: 1px solid; display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.demo-medida li span:first-child { font-variant-numeric: tabular-nums; }
.demo-medida .nota { margin-top: 12px; }
@media (max-width: 860px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }