/* ============================================================ LIMONCELLO.PT — sistema de design "riviera editorial" Amalfi ao meio-dia, impressão de luxo: serif italic de display, luz quente em movimento lento, grão de película, filetes de limão, o rótulo de filete duplo como assinatura. Light-first; dark = "sera na costiera" (luz de vela). ============================================================ */ :root{ --bg:#FFFCF4; /* creme */ --surface:#FFFFFF; --surface-2:#FBF6E8; --line:#EDE4D0; --line-strong:#D5C8A8; --line-campo:#948366; /* contorno de controlos — ≥3:1 sobre superfícies claras */ --text:#3B2F24; /* tinta castanha */ --text-2:#635645; --text-3:#766A57; --limao:#EBB61F; /* amarelo-limão profundo — enchimentos e decoração */ --limao-text:#8A6900; /* amarelo legível sobre claro */ --limao-suave:rgba(235,182,31,.16); --folha:#2E5233; /* verde-folha — ações */ --folha-ink:#FFFFFF; --folha-hover:#254428; --erro:#A03535; --header-bg:rgba(255,252,244,.82); --sombra-suave:0 10px 30px -18px rgba(59,47,36,.35); --sombra-cartao:0 18px 40px -22px rgba(59,47,36,.35),0 2px 8px -4px rgba(59,47,36,.12); --glow-1:rgba(255,224,130,.55); --glow-2:rgba(235,182,31,.28); --glow-3:rgba(255,244,214,.9); --marca:rgba(235,182,31,.2); /* letra de água */ --grelha:#A08C58; /* grelha dos radares — 3,29:1 sobre branco (WCAG 1.4.11) */ --radius:3px; --maxw:1100px; --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:linear(0,0.437 7.2%,0.732 13.7%,0.936 20.4%,1.05 27.5%,1.093 34.2%,1.083 42.9%,1.022 59.8%,0.998 76.9%,1); --font-display:"DM Serif Display",Georgia,serif; --font-body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif; color-scheme:light; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#211B12;--surface:#292217;--surface-2:#31291C; --line:#42382A;--line-strong:#5A4D38;--line-campo:#8A7A5E; --text:#F2EAD9;--text-2:#C9BCA4;--text-3:#A8977B; --limao:#EBB61F;--limao-text:#F0C246; --limao-suave:rgba(235,182,31,.12); --folha:#9CC3A4;--folha-ink:#16281A;--folha-hover:#B0D2B7; --erro:#D98080; --header-bg:rgba(33,27,18,.78); --sombra-suave:0 10px 30px -18px rgba(0,0,0,.7); --sombra-cartao:0 18px 40px -20px rgba(0,0,0,.65),0 2px 8px -4px rgba(0,0,0,.4); --glow-1:rgba(240,194,70,.14); --glow-2:rgba(235,182,31,.08); --glow-3:rgba(80,60,30,.25); --marca:rgba(235,182,31,.13); --grelha:#82724F; color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#211B12;--surface:#292217;--surface-2:#31291C; --line:#42382A;--line-strong:#5A4D38;--line-campo:#8A7A5E; --text:#F2EAD9;--text-2:#C9BCA4;--text-3:#A8977B; --limao:#EBB61F;--limao-text:#F0C246; --limao-suave:rgba(235,182,31,.12); --folha:#9CC3A4;--folha-ink:#16281A;--folha-hover:#B0D2B7; --erro:#D98080; --header-bg:rgba(33,27,18,.78); --sombra-suave:0 10px 30px -18px rgba(0,0,0,.7); --sombra-cartao:0 18px 40px -20px rgba(0,0,0,.65),0 2px 8px -4px rgba(0,0,0,.4); --glow-1:rgba(240,194,70,.14); --glow-2:rgba(235,182,31,.08); --glow-3:rgba(80,60,30,.25); --marca:rgba(235,182,31,.13); --grelha:#82724F; color-scheme:dark; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* o elemento que faz scroll é o : sem isto, uma sangria em vw (a galeria d'A Prova) arrasta a página o valor da barra de deslocamento */ html{scroll-behavior:smooth;overflow-x:clip} body{ background:var(--bg);color:var(--text); font-family:var(--font-body);font-size:1.02rem;line-height:1.7; -webkit-font-smoothing:antialiased; min-height:100dvh;display:flex;flex-direction:column; overflow-x:clip; } main{flex:1} main:focus{outline:none} img,svg{max-width:100%;height:auto} a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .18s ease,text-decoration-color .18s ease} a:hover{color:var(--folha)} :focus-visible{outline:2px solid var(--folha);outline-offset:3px;border-radius:2px} ::selection{background:var(--limao);color:#3B2F24} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.1;letter-spacing:-.008em;text-wrap:balance} h1{font-size:clamp(2.2rem,4.6vw,3.4rem)} h2{font-size:clamp(1.5rem,3.2vw,2.2rem)} h3{font-size:1.3rem} p{max-width:68ch} strong{font-weight:700} .num{font-variant-numeric:tabular-nums} code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:.06em .3em} em,.it{font-style:italic} .wrap{width:min(var(--maxw),100% - 2.5rem);margin-inline:auto} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* controlos que só fazem sentido com JS ligado (guardam estado no browser) */ .so-js{display:none} html.js .so-js{display:inline-flex} .skip-link{position:absolute;left:1rem;top:-4rem;z-index:400;background:var(--folha);color:var(--folha-ink);padding:.55rem 1rem;border-radius:var(--radius);font-weight:700;text-decoration:none;transition:top .15s ease} .skip-link:focus{top:1rem;color:var(--folha-ink)} /* etiqueta em maiúsculas espaçadas (kicker) */ .etiqueta{display:block;font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--text-3);margin-bottom:1rem} /* o filete só marca kickers de secção (

); os kickers compactos dentro de cartões usam e ficam limpos */ p.etiqueta::before{content:"";display:block;width:3.2rem;height:2px;background:var(--limao);border-radius:2px;margin-bottom:.9rem} .etiqueta .acc{color:var(--limao-text)} /* filete de limão — marcador de secção */ .filete{display:block;width:3.2rem;height:2px;background:var(--limao);margin-bottom:1.1rem;border-radius:2px} /* ---------- O RÓTULO — moldura de filete duplo ---------- */ .rotulo{border:1px solid var(--line-strong);position:relative;padding:2rem 1.8rem;background:var(--surface)} .rotulo::before{content:"";position:absolute;inset:5px;border:1px solid var(--line-strong);pointer-events:none} .rotulo-titulo{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--text-2);margin-bottom:1rem} .rotulo-titulo::after{content:"";display:block;width:2.4rem;height:1px;background:var(--line-strong);margin:.7rem auto 0} /* ---------- header ---------- */ /* a primeira faixa da página sobe 68px (a altura do cabeçalho) e devolve-os em padding: assim o sun-glow do hero e o halo do .page-head correm POR BAIXO da barra, em vez de serem cortados a direito pelo overflow:hidden logo abaixo dela — era essa a costura horizontal dura nos dois temas. */ main > .hero:first-child,main > .page-head:first-child{margin-top:-68px} main > .hero:first-child{padding-top:calc(5.2rem + 68px)} main > .page-head:first-child{padding-top:calc(3.6rem + 68px)} /* à posição 0 o cabeçalho é transparente: em fluxo por cima do hero, um fundo opaco cortava o sun-glow com uma costura horizontal dura logo abaixo da barra. O vidro fosco entra com .scrolled (main.js). */ .site-header{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease} .site-header.scrolled{background:var(--header-bg);backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);border-bottom-color:var(--line);box-shadow:var(--sombra-suave)} .site-header .wrap{display:flex;align-items:center;gap:1.25rem;min-height:68px} .brand{display:flex;align-items:baseline;gap:.3rem;text-decoration:none;color:var(--text);white-space:nowrap} .brand:hover{color:var(--text)} .brand .nome{font-family:var(--font-display);font-size:1.35rem;letter-spacing:.06em} .brand .pt{font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--limao-text)} .site-nav{margin-left:auto} .site-nav ul{list-style:none;display:flex;gap:.15rem;align-items:center} .site-nav a{display:block;position:relative;padding:.5rem .6rem;text-decoration:none;font-size:.9rem;color:var(--text-2);border-radius:var(--radius);white-space:nowrap} .site-nav a::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.2rem;height:2px;background:var(--limao);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)} .site-nav a:hover{color:var(--text)} .site-nav a:hover::after{transform:scaleX(1)} .site-nav a[aria-current="page"]{color:var(--text)} .site-nav a[aria-current="page"]::after{transform:scaleX(1)} .header-actions{display:flex;align-items:center;gap:.55rem} .theme-toggle,.cart-link{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-campo);border-radius:var(--radius);color:var(--text-2);position:relative;text-decoration:none;transition:border-color .2s ease,color .2s ease,transform .2s ease} .theme-toggle:hover,.cart-link:hover{color:var(--text);border-color:var(--text);transform:translateY(-1px)} .theme-toggle:active,.cart-link:active{transform:scale(.96)} .cart-count{position:absolute;top:-6px;right:-6px;background:var(--folha);color:var(--folha-ink);font-size:.66rem;font-weight:700;min-width:1.15rem;height:1.15rem;border-radius:999px;display:grid;place-items:center;padding-inline:.2rem;font-variant-numeric:tabular-nums} .cart-count[hidden]{display:none} .theme-toggle .icon-moon{display:none} :root[data-theme="dark"] .theme-toggle .icon-moon{display:block} :root[data-theme="dark"] .theme-toggle .icon-sun{display:none} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block} :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none} } .nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line-campo);border-radius:var(--radius);place-items:center;color:var(--text)} /* ---------- botões — verde-folha com brilho quente e varrimento ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.3rem;min-height:44px;border-radius:var(--radius);border:1px solid transparent;font-weight:700;font-size:.94rem;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .25s ease} .btn::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none;transition:transform .55s ease;will-change:transform} .btn:hover::after{transform:translateX(260%) skewX(-18deg)} .btn-primary{background:var(--folha);color:var(--folha-ink);border-color:var(--folha)} .btn-primary:hover{background:var(--folha-hover);border-color:var(--folha-hover);color:var(--folha-ink);transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(46,82,51,.55),0 4px 26px -10px var(--glow-2)} .btn-ghost{border-color:var(--line-campo);color:var(--text)} .btn-ghost:hover{border-color:var(--text);color:var(--text);transform:translateY(-1px);box-shadow:var(--sombra-suave)} .btn:active{transform:scale(.98)} .btn[disabled],.btn[aria-disabled="true"]{opacity:.7;cursor:default} .btn-sm{padding:.4rem .85rem;min-height:38px;font-size:.86rem} /* spinner inline dos botões */ .btn .spin{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:girar .7s linear infinite;flex:none} @keyframes girar{to{transform:rotate(360deg)}} /* ---------- secções ---------- */ .section{padding-block:4.4rem} .section + .section{border-top:1px solid var(--line)} .section-lead{color:var(--text-2);margin-top:.8rem;max-width:62ch;font-size:1.05rem} .page-head{padding-block:3.6rem 2.8rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden} .page-head::before{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,var(--glow-2),transparent 70%);pointer-events:none} .page-head .wrap{position:relative} .page-head h1{font-style:italic;font-size:clamp(2.2rem,5vw,3.6rem)} .page-head .sub{color:var(--text-2);font-size:1.08rem;max-width:62ch;margin-top:1rem} .lead{font-size:1.14rem;color:var(--text-2);max-width:62ch} .prose{max-width:66ch} /* .wrap.prose: o .wrap dá o eixo da grelha e a medida de leitura passa para os filhos — assim o corpo alinha à esquerda com o .page-head em vez de ficar centrado no viewport (eixo partido). */ .wrap.prose{max-width:none} .wrap.prose > p,.wrap.prose > ul,.wrap.prose > ol, .wrap.prose > h2,.wrap.prose > h3,.wrap.prose > h4, .wrap.prose > dl,.wrap.prose > blockquote{max-width:66ch} /* páginas de cabeçalho centrado (receitas): o corpo centra de propósito */ .wrap.prose.prose-centro{max-width:66ch;margin-inline:auto} .prose p{margin-top:1rem;color:var(--text-2)} .prose p:first-child{margin-top:0} .prose h2{margin-top:2.8rem} .prose h3{margin-top:2rem} .prose ul,.prose ol{margin:1rem 0 0 1.2rem;color:var(--text-2);display:grid;gap:.55rem} .prose strong{color:var(--text)} /* capitular editorial (capítulos do guia) */ /* a cap-height tem de valer duas entrelinhas + a cap-height do corpo, ou a capitular não alinha nem em cima nem em baixo das três linhas */ .prose-guia > p:first-of-type::first-letter{font-family:var(--font-display);font-size:5.2em;float:left;line-height:.74;margin-top:.06em;padding:0 .14em 0 0;color:var(--limao-text)} /* citação destacada */ .pull-quote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.35rem,2.8vw,1.8rem);line-height:1.32;color:var(--text);border:0;margin:2.6rem 0;padding-left:1.4rem;position:relative;max-width:34ch;text-wrap:balance} .pull-quote::before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:3px;background:var(--limao);border-radius:2px} .pull-quote cite{display:block;font-family:var(--font-body);font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin-top:.8rem} /* espiral de casca — divisor */ .zest-divider{display:flex;justify-content:center;margin:2.8rem auto 0;color:var(--limao-text);opacity:.85} .zest-divider svg{width:64px;height:64px} /* ---------- HERO (index) — Amalfi ao meio-dia ---------- */ .hero{position:relative;overflow:hidden;padding-block:5.2rem 4.6rem} .hero::before{content:"";position:absolute;inset:-30% -20%;background: radial-gradient(38% 42% at 72% 18%,var(--glow-1),transparent 70%), radial-gradient(30% 36% at 14% 68%,var(--glow-2),transparent 70%), radial-gradient(48% 52% at 50% 110%,var(--glow-3),transparent 72%); pointer-events:none;animation:soldrift 48s ease-in-out infinite alternate} @keyframes soldrift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-2.5%,1.8%,0) scale(1.05)} 100%{transform:translate3d(2%,-1.5%,0) scale(1.02)} } /* grão de película: o feTurbulence também gera ruído no canal alfa, que voltava a dividir a opacidade e deixava o efeito ~15x abaixo do pedido. Dessatura-se o ruído e força-se alfa=1 antes de compor; o multiply escurece sem lavar a cor. Modulação medida: ~2,5%. */ .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")} /* O sun-glow pinta o fundo real do hero mais claro do que --bg, e os rótulos pequenos caíam abaixo de 4,5:1 no tema claro (medido por amostragem de píxeis). Aqui sobem de --text-3 para --text-2. */ .hero .etiqueta,.hero .stats-band .stat .l{color:var(--text-2)} .hero .wrap{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:3rem;align-items:center} .hero h1{font-style:italic;font-size:clamp(2.6rem,6vw,5rem);line-height:1.04;letter-spacing:-.012em} .hero h1 .romano{font-style:normal} .hero-acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem} /* ramo de limoeiro — desenha-se ao carregar. O não tem width/height: sem width:100% + aspect-ratio, num contexto shrink-to-fit (o margin-inline:auto abaixo de 960px) colapsava para 0. */ .hero-arte{width:100%} .ramo{color:var(--text-2);display:block;width:100%;height:auto;aspect-ratio:440/430} .ramo path{stroke-dasharray:1;stroke-dashoffset:0} html.js .ramo path{stroke-dashoffset:1;animation:desenhar 2.2s var(--ease-out) forwards} html.js .ramo path:nth-child(2){animation-delay:.25s} html.js .ramo path:nth-child(3){animation-delay:.45s} html.js .ramo path:nth-child(4){animation-delay:.6s} html.js .ramo path:nth-child(5){animation-delay:.75s} html.js .ramo path:nth-child(6){animation-delay:.9s} html.js .ramo path:nth-child(7){animation-delay:1.05s} html.js .ramo path:nth-child(8){animation-delay:1.2s} html.js .ramo path:nth-child(9){animation-delay:1.35s} html.js .ramo path:nth-child(10){animation-delay:1.5s} html.js .ramo path:nth-child(11){animation-delay:1.62s} html.js .ramo path:nth-child(12){animation-delay:1.74s} html.js .ramo path:nth-child(13){animation-delay:1.86s} html.js .ramo path:nth-child(14){animation-delay:1.98s} html.js .ramo path:nth-child(15){animation-delay:2.1s} html.js .ramo path:nth-child(16){animation-delay:2.2s} @keyframes desenhar{to{stroke-dashoffset:0}} /* rede de segurança: se o motor de animação não correr (frames a faltar, separador em segundo plano), o ramo fica desenhado à mesma — main.js marca .ramo-feito passado o tempo total do traço. */ html.js .ramo.ramo-feito path{animation:none;stroke-dashoffset:0} /* números do estúdio */ /* 4 números numa coluna de ~600 px: 2x2 deliberado em vez de um órfão na 2.ª linha */ .stats-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2.4rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)} .stats-band .stat .n{font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--text);font-variant-numeric:tabular-nums;line-height:1} .stats-band .stat .l{display:block;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-top:.35rem} /* ---------- marquee serif italic ---------- */ .marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--surface-2);padding-block:.8rem;position:relative} /* as pontas esbatem-se: sem isto o botão de pausa (opaco) aparecia por cima de uma palavra a meio, e os cortes laterais eram duros */ .marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;z-index:1;pointer-events:none} .marquee::before{left:0;width:4.5rem;background:linear-gradient(90deg,var(--surface-2),transparent)} .marquee::after{right:0;width:6.5rem;background:linear-gradient(270deg,var(--surface-2),transparent)} .marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite;will-change:transform} /* sem JS não há botão de pausa: a faixa fica estática (WCAG 2.2.2) */ html:not(.js) .marquee-track{animation:none} .marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee.parado .marquee-track{animation-play-state:paused} .marquee-pausa{position:absolute;top:50%;right:.9rem;transform:translateY(-50%);z-index:2;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:1px solid var(--line-campo);border-radius:999px;background:var(--bg);color:var(--text-2);transition:color .2s ease,border-color .2s ease} .marquee-pausa:hover{color:var(--text);border-color:var(--text)} .marquee-pausa .icon-play{display:none} .marquee.parado .marquee-pausa .icon-play{display:block} .marquee.parado .marquee-pausa .icon-pause{display:none} .marquee-track span{font-family:var(--font-display);font-style:italic;font-size:1.25rem;color:var(--text-2);white-space:nowrap;padding-right:.6rem} .marquee-track span .sep{color:var(--limao-text);font-style:normal} @keyframes marquee{to{transform:translateX(-50%)}} /* ---------- grelhas e cartões ---------- */ .card-grid{display:grid;gap:1.5rem;margin-top:2.2rem} .card-grid.cols-3{grid-template-columns:repeat(3,1fr)} .card-grid.cols-2{grid-template-columns:repeat(2,1fr)} .cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;transition:border-color .25s ease,transform .45s var(--ease-spring),box-shadow .3s ease} a.cell{text-decoration:none;color:inherit} a.cell:hover{border-color:var(--limao);color:inherit;transform:translateY(-3px);box-shadow:var(--sombra-cartao)} a.cell:hover .cell-cta{color:var(--folha)} .cell h3{font-size:1.25rem} .cell p{font-size:.95rem;color:var(--text-2)} .cell .cell-cta{margin-top:auto;padding-top:.7rem;font-size:.85rem;font-weight:700;color:var(--text-3);transition:color .2s ease} .cell .icone-limao{color:var(--limao-text);margin-bottom:.3rem} /* cartão de garrafa (estilo rótulo, com letra de água) */ .garrafa-card{border:1px solid var(--line-strong);position:relative;background:var(--surface);padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;text-align:center;overflow:hidden;transition:border-color .25s ease,transform .45s var(--ease-spring),box-shadow .3s ease} .garrafa-card::before{content:"";position:absolute;inset:5px;border:1px solid var(--line-strong);pointer-events:none;z-index:2} .garrafa-card > *{position:relative;z-index:1} /* a letra fica INTEIRA dentro do filete interno (inset 5px): antes sangrava para fora e o overflow:hidden do cartão amputava-a a direito, com o filete a atravessar o glifo por cima. */ /* a letra desce para o canto inferior: em cima colidia com títulos compridos (a 1024 em 5 de 6 cartões da curadoria) */ .garrafa-card .letra{position:absolute;z-index:0;bottom:.3rem;right:.9rem;font-family:var(--font-display);font-style:italic;font-size:6.4rem;line-height:.9;color:var(--marca);pointer-events:none;user-select:none} .garrafa-card .tipo{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)} .garrafa-card h3{font-size:1.3rem} .garrafa-card .origem{font-size:.85rem;color:var(--text-2)} .garrafa-card .medidas{font-size:.82rem;color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:.04em} .garrafa-card .acoes{display:flex;gap:.6rem;justify-content:center;margin-top:.6rem;flex-wrap:wrap} /* o CTA tanto é (loja) como dentro de um cartão-link (index/prova) */ .garrafa-card .cell-cta{margin-top:auto;padding-top:.9rem;font-size:.85rem;font-weight:700;color:var(--text-3);text-decoration:none;transition:color .2s ease} .garrafa-card a.cell-cta:hover,a.garrafa-card:hover .cell-cta{color:var(--folha)} a.garrafa-card{text-decoration:none;color:inherit} a.garrafa-card:hover{border-color:var(--limao);transform:translateY(-3px);box-shadow:var(--sombra-cartao)} /* ---------- A PROVA — galeria horizontal com scroll-snap ---------- */ /* a galeria sangra até ao viewport e esbate-se na ponta: dentro do .wrap o terceiro cartão era fatiado a direito, com creme vazio ao lado — lia-se como layout partido em vez de «há mais para o lado» */ .prova-gal{display:grid;grid-auto-flow:column;grid-auto-columns:min(400px,84vw);gap:1.6rem;overflow-x:auto;scroll-snap-type:x proximity;padding:1.4rem 0 1.8rem;margin-top:1.6rem;scrollbar-width:thin; margin-inline:calc(50% - 50vw); padding-inline:max(1.25rem,calc(50vw - 550px)); scroll-padding-inline:max(1.25rem,calc(50vw - 550px)); -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 5rem),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 5rem),transparent)} .prova-gal > *{scroll-snap-align:center} .prova-gal-dica{font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:.5rem;margin-top:.6rem} .prova-card{border:1px solid var(--line-strong);position:relative;background:var(--surface);padding:2rem 1.7rem 1.7rem;display:flex;flex-direction:column;gap:.6rem;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .25s ease,transform .45s var(--ease-spring),box-shadow .3s ease} .prova-card::before{content:"";position:absolute;inset:5px;border:1px solid var(--line-strong);pointer-events:none;z-index:2} .prova-card:hover{border-color:var(--limao);transform:translateY(-4px);box-shadow:var(--sombra-cartao);color:inherit} .prova-card > *{position:relative;z-index:1} .prova-card .letra{position:absolute;z-index:0;top:.5rem;right:1.1rem;font-family:var(--font-display);font-style:italic;font-size:8.6rem;line-height:.9;color:var(--marca);pointer-events:none;user-select:none} .prova-card .tipo{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)} .prova-card h3{font-size:1.45rem;font-style:italic} .prova-card .origem{font-size:.85rem;color:var(--text-2)} .prova-card .medidas{font-size:.82rem;color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:.04em} /* 3 linhas fixas: sem isto um resumo de 3 linhas empurrava o radar desse cartão ~25px para baixo e os gráficos deixavam de comparar. */ .prova-card .resumo{font-size:.92rem;color:var(--text-2)} @media (min-width: 721px){.prova-card .resumo{min-height:5.2em}} .prova-card .card-radar{margin-top:.4rem} .prova-card .card-radar svg{display:block;max-width:300px;margin-inline:auto} .prova-card .cell-cta{margin-top:auto;padding-top:.8rem;font-size:.85rem;font-weight:700;color:var(--text-3);transition:color .2s ease} .prova-card:hover .cell-cta{color:var(--folha)} @media (max-width: 720px){ .prova-gal{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;overflow-x:visible;scroll-snap-type:none;padding-inline:0} .prova-gal-dica{display:none} } /* letra de água grande (fichas de garrafa) */ .ficha-letra{position:absolute;top:-1.5rem;right:0;font-family:var(--font-display);font-style:italic;font-size:clamp(9rem,20vw,17rem);line-height:1;color:var(--marca);pointer-events:none;user-select:none;z-index:0} /* ---------- tabela ---------- */ .spec-table{width:100%;border-collapse:collapse;font-size:.93rem;margin-top:1.6rem;background:var(--surface)} .spec-table th,.spec-table td{border-bottom:1px solid var(--line);padding:.75rem .9rem;text-align:left;vertical-align:top} .spec-table thead th{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)} .spec-table td.num{text-align:right;font-variant-numeric:tabular-nums} .table-scroll{overflow-x:auto} th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--text)} th[aria-sort] .seta{color:var(--limao-text)} /* ---------- radar ---------- */ .radar-bloco{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;margin-top:1.6rem} .radar-bloco svg text,.card-radar svg text{font-family:var(--font-body);font-size:11.5px;fill:var(--text-2)} /* o SVG (viewBox 420) é reduzido no cartão: 20px caem em ~13px reais */ .card-radar svg text{font-size:20px} .radar-bloco svg .grelha,.card-radar svg .grelha{stroke:var(--grelha);fill:none} .radar-bloco svg .grelha-fora,.card-radar svg .grelha-fora{stroke-width:1.5} .radar-bloco svg .eixo-l,.card-radar svg .eixo-l{stroke:var(--grelha)} /* hexágono-fantasma: reserva a altura do gráfico no comparador vazio */ .radar-fantasma{opacity:.5;max-width:420px;margin-inline:auto} .radar-vazio{position:relative} .radar-vazio p{text-align:center;color:var(--text-3);font-size:.95rem;margin:.4rem auto 0;max-width:34ch} /* escolha de garrafas do comparador — cartões-rótulo em vez de checkboxes */ .escolha-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1.2rem} .escolha-card{border:1px solid var(--line-strong);background:var(--surface);position:relative;overflow:hidden;padding:.85rem 1rem;text-align:left;display:flex;flex-direction:column;gap:.1rem;cursor:pointer;transition:border-color .2s ease,transform .25s var(--ease-out),box-shadow .25s ease} .escolha-card::before{content:"";position:absolute;inset:4px;border:1px solid var(--line-strong);pointer-events:none;z-index:2} .escolha-card > *{position:relative;z-index:1} .escolha-card .letra{position:absolute;z-index:0;top:.15rem;right:1rem;font-family:var(--font-display);font-style:italic;font-size:2.8rem;line-height:.9;color:var(--marca);pointer-events:none;user-select:none} .escolha-card .nome{font-family:var(--font-display);font-size:1.02rem;line-height:1.2} .escolha-card .arq{font-size:.82rem;color:var(--text-2)} .escolha-card .sel{display:none;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--folha);margin-top:.3rem} .escolha-card:hover{border-color:var(--limao);transform:translateY(-2px);box-shadow:var(--sombra-cartao)} .escolha-card:active{transform:scale(.99)} .escolha-card[aria-pressed="true"]{border-color:var(--folha)} .escolha-card[aria-pressed="true"]::before{border-color:var(--folha)} .escolha-card[aria-pressed="true"] .sel{display:block} @media (max-width: 560px){.escolha-grid{grid-template-columns:1fr}} /* estado vazio d'A minha lista */ .estado-vazio{text-align:center;max-width:520px;margin-inline:auto} .estado-vazio .linha{font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.3;margin-top:.9rem;color:var(--text)} .estado-vazio p{color:var(--text-2);margin:.7rem auto 0;max-width:40ch;font-size:.95rem} .estado-vazio .acoes{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem} main svg .poli-a{fill:rgba(235,182,31,.22);stroke:var(--limao-text);stroke-width:2} main svg .poli-b{fill:rgba(46,82,51,.14);stroke:var(--folha);stroke-width:2} main svg .poli-c{fill:rgba(160,53,53,.12);stroke:var(--erro);stroke-width:2} .radar-legenda{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.8rem;font-size:.86rem;color:var(--text-2)} .radar-legenda .amostra{display:inline-block;width:.85rem;height:.85rem;border-radius:2px;vertical-align:-2px;margin-right:.35rem} /* eixos em texto: são o conteúdo real da nota de prova quando não há JavaScript e o radar em SVG não chega a ser desenhado */ .eixos-texto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.6rem;font-size:.95rem} .eixos-texto dt{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)} .eixos-texto dd{color:var(--text);margin-top:.15rem;font-variant-numeric:tabular-nums} html.js .eixos-texto{display:none} /* fichas (dl) */ .ficha-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 2rem;margin-top:1.6rem;font-size:.95rem} .ficha-specs dt{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)} .ficha-specs dd{color:var(--text);margin-top:.15rem;font-variant-numeric:tabular-nums} /* ---------- filtros ---------- */ .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem} .chip{border:1px solid var(--line-campo);border-radius:999px;padding:.42rem 1rem;min-height:40px;font-size:.87rem;font-weight:500;color:var(--text-2);cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease,transform .2s ease} .chip:hover{border-color:var(--text);color:var(--text);transform:translateY(-1px)} .chip:active{transform:scale(.97)} .chip[aria-pressed="true"]{background:var(--folha);border-color:var(--folha);color:var(--folha-ink)} /* ---------- receitas ---------- */ /* título de grupo dentro de uma página que já tem h1 — mesma linguagem de marcação de secção do resto do site (filete de limão + itálico) */ .grupo-titulo{font-style:italic;font-size:clamp(1.5rem,2.4vw,1.85rem)} .grupo-titulo::before{content:"";display:block;width:3.2rem;height:2px;background:var(--limao);border-radius:2px;margin-bottom:.9rem} .grupo-titulo.espacado{margin-top:3.4rem} .receita-head{max-width:640px;margin-inline:auto} .receita-head h1{font-style:italic;font-size:clamp(2rem,4.6vw,3rem)} .receita-meta{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center;margin-top:1.2rem;font-size:.84rem;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;font-weight:700} .ingredientes{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.6rem;margin-top:1.8rem} /* anula as heranças do .prose (h2 margin-top:2.8rem, ul margin-left:1.2rem) que partiam o espaçamento e desalinhavam a lista do próprio título */ .ingredientes h2{font-size:1.15rem;margin:0 0 .7rem;max-width:none} .ingredientes ul{list-style:none;display:grid;gap:.55rem;font-size:.95rem;color:var(--text-2);margin:0;max-width:none} .ingredientes li{display:flex;align-items:baseline;gap:.6rem} .ingredientes li::before{content:"";order:1;flex:1;min-width:2ch;border-bottom:1px dotted var(--text-3);opacity:.85;transform:translateY(-.28em)} .ingredientes li > span:first-child{order:0} .ingredientes .q{order:2;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)} /* em ecrã estreito o leader não cabe: com o pontilhado a crescer (flex:1) e a quantidade em nowrap, o nome era espremido até uma palavra por linha. Abaixo de 720px cai para duas colunas — nome que quebra, quantidade à direita. */ @media (max-width: 720px){ .ingredientes li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:.15rem .8rem;align-items:baseline} .ingredientes li::before{display:none} .ingredientes .q{text-align:right;white-space:normal} } /* ---------- faixas ---------- */ .aviso{border:1px solid var(--line-strong);border-left:3px solid var(--limao);border-radius:var(--radius);background:var(--surface);padding:1.1rem 1.3rem;margin-top:1.6rem;font-size:.92rem;color:var(--text-2);max-width:82ch} .aviso p{max-width:75ch} .moderacao{max-width:none;border-top:1px solid var(--line);background:var(--surface-2);padding:.8rem 0;font-size:.82rem;color:var(--text-2);text-align:center;letter-spacing:.04em} /* ---------- CTA ---------- */ .cta-band{border:1px solid var(--line-strong);position:relative;padding:2.6rem 2.2rem;margin-block:3.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;justify-content:space-between;background:var(--surface);overflow:hidden} .cta-band::before{content:"";position:absolute;inset:5px;border:1px solid var(--line-strong);pointer-events:none;z-index:2} .cta-band::after{content:"";position:absolute;inset:auto -10% -60% auto;width:50%;aspect-ratio:1;background:radial-gradient(closest-side,var(--limao-suave),transparent 70%);pointer-events:none} .cta-band > *{position:relative;z-index:1} .cta-band h2{max-width:24ch} .cta-band p{color:var(--text-2)} /* ---------- formulários ---------- */ .form-shell{max-width:620px} /* contacto: formulário alinhado à esquerda com o título + coluna editorial */ .contacto-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:3rem;align-items:start} .contacto-aside{position:sticky;top:100px} .contacto-aside h2{font-size:1.12rem;font-style:italic;margin-top:1.6rem} .contacto-aside h2:first-of-type{margin-top:0} .contacto-aside p{font-size:.92rem;color:var(--text-2);margin-top:.5rem;max-width:none} @media (max-width: 960px){ .contacto-grid{grid-template-columns:1fr;gap:2.4rem} .contacto-aside{position:static} } .field{margin-top:1.3rem} .field label{display:block;font-weight:700;font-size:.94rem;margin-bottom:.4rem} .field .req{color:var(--folha)} .field .help{font-size:.84rem;color:var(--text-3);margin-bottom:.45rem;max-width:56ch} .field input[type="text"],.field input[type="email"],.field input[type="number"],.field select,.field textarea{width:100%;background:var(--surface);border:1px solid var(--line-campo);border-radius:var(--radius);color:var(--text);padding:.68rem .85rem;min-height:46px;font:inherit;transition:border-color .2s ease,box-shadow .2s ease} .field textarea{min-height:110px;resize:vertical} .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--folha);outline-offset:2px} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--erro)} .field-error{display:none;color:var(--erro);font-size:.85rem;margin-top:.4rem} .field.invalid .field-error,.check-field.invalid .field-error{display:block} .check-field{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.2rem;flex-wrap:wrap} .check-field.invalid input{outline:2px solid var(--erro);outline-offset:2px} .check-field .field-error{flex-basis:100%;margin-top:.35rem} .check-field input{width:1.1rem;height:1.1rem;margin-top:.25rem;accent-color:var(--folha);flex:none} .check-field label{font-size:.9rem;color:var(--text-2);flex:1 1 12rem;min-width:0} .error-summary{display:none;border:1px solid var(--erro);border-radius:var(--radius);padding:1rem 1.2rem;margin-top:1.5rem;color:var(--erro);font-size:.92rem} .error-summary.visible{display:block} .error-summary ul{margin:.5rem 0 0 1.1rem} .error-summary a{color:inherit} .form-confirm{border:1px solid var(--line-strong);border-left:3px solid var(--folha);border-radius:var(--radius);padding:2rem 1.8rem;background:var(--surface);position:relative;overflow:hidden} .form-confirm::after{content:"";position:absolute;inset:auto -20% -70% auto;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,var(--limao-suave),transparent 70%);pointer-events:none} .form-confirm > *{position:relative} @media (prefers-reduced-motion: no-preference){ html.js .form-confirm:not([hidden]){animation:confirmar .6s var(--ease-out)} } @keyframes confirmar{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} /* ---------- a minha lista (ex-carrinho) ---------- */ .carrinho-linha{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line)} .carrinho-linha .nome{font-family:var(--font-display);font-size:1.1rem} .carrinho-linha .letra-mini{font-family:var(--font-display);font-style:italic;font-size:1.7rem;color:var(--limao-text);line-height:1;min-width:1.4rem} .carrinho-linha .qty{display:flex;align-items:center;gap:.4rem} .carrinho-linha .qty button{width:34px;height:34px;border:1px solid var(--line-campo);border-radius:var(--radius);display:grid;place-items:center;font-weight:700;transition:border-color .2s ease,transform .15s ease} .carrinho-linha .qty button:hover{border-color:var(--text)} .carrinho-linha .qty button:active{transform:scale(.94)} .carrinho-linha .qty input{width:3.2rem;text-align:center;border:1px solid var(--line-campo);border-radius:var(--radius);min-height:34px;background:var(--surface);color:var(--text);font:inherit;font-variant-numeric:tabular-nums} .carrinho-remover{color:var(--text-3);font-size:.85rem} .carrinho-remover:hover{color:var(--erro)} .carrinho-resumo{margin-top:1.6rem;max-width:420px} .carrinho-resumo .linha{display:flex;justify-content:space-between;padding:.5rem 0;font-size:.95rem;color:var(--text-2)} .carrinho-resumo .total{border-top:2px solid var(--text);margin-top:.5rem;padding-top:.8rem;font-weight:700;font-size:1.1rem;color:var(--text)} .carrinho-resumo .v{font-variant-numeric:tabular-nums} /* ---------- porta de idade —

nativo no top-layer ---------- showModal() dá foco preso, inert do resto e Esc de série; o ::backdrop é um vidro de entardecer sobre a página. Sem suporte (ou sem JS) o dialog nunca abre — dialog:not([open]) cobre browsers antigos que renderizariam o elemento como bloco. */ dialog.idade-dialogo:not([open]){display:none} dialog.idade-dialogo{position:fixed;inset:0;margin:auto;width:min(460px,calc(100% - 3rem));background:var(--surface);color:var(--text);border:1px solid var(--line-strong);padding:2.6rem 2.2rem;text-align:center} dialog.idade-dialogo::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-strong);pointer-events:none} dialog.idade-dialogo > *{position:relative} dialog.idade-dialogo h2{font-size:1.6rem;margin-top:1rem;font-style:italic} dialog.idade-dialogo p{color:var(--text-2);margin-top:.8rem;font-size:.95rem} .idade-acoes{display:flex;gap:.8rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap} /* browsers sem : painel fixo com véu próprio (sem top-layer) */ dialog.idade-dialogo.idade-sem-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);inset:auto;z-index:500;box-shadow:0 0 0 100vmax rgba(30,24,15,.72)} body.idade-bloqueada{overflow:hidden} dialog.idade-dialogo::backdrop{background:rgba(30,24,15,.6);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)} @media (prefers-reduced-motion: no-preference){ dialog.idade-dialogo[open]{animation:confirmar .5s var(--ease-out)} dialog.idade-dialogo::backdrop{animation:velar .45s ease both} } @keyframes velar{from{opacity:0}to{opacity:1}} /* ---------- footer ---------- */ .site-footer{border-top:1px solid var(--line);padding-block:3rem 0;margin-top:4rem;font-size:.92rem;color:var(--text-2)} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem} .site-footer h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin-bottom:.8rem;font-weight:700} .site-footer ul{list-style:none;display:grid;gap:.45rem;font-size:.9rem} .site-footer a{text-decoration:none;color:var(--text-2)} .site-footer a:hover{color:var(--text)} .footer-legal{padding-block:1.4rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--text-3);display:grid;gap:.4rem} .footer-legal a{color:inherit;text-decoration:underline} .footer-brand p{max-width:34ch;margin-top:.8rem;font-size:.95rem} /* ---------- MOTOR DE REVELAÇÃO (scroll reveal) ---------- Estado inicial escondido só com JS ligado (html.js) e sem preferência por movimento reduzido — sem JS, tudo visível. */ @media (prefers-reduced-motion: no-preference){ html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)} html.js .rv.in-view{opacity:1;transform:none} /* radar: o polígono cresce do centro quando entra no ecrã */ html.js main .in-view svg .poli-a, html.js main .in-view svg .poli-b, html.js main .in-view svg .poli-c, html.js main .rv.in-view svg .poli-a, html.js main .rv.in-view svg .poli-b, html.js main .rv.in-view svg .poli-c{animation:crescer-poli .9s var(--ease-out) both} } @keyframes crescer-poli{from{transform:scale(.5);opacity:0;transform-origin:210px 196px}to{transform:scale(1);opacity:1;transform-origin:210px 196px}} /* ============================================================ RIVIERA VIVA — camada de tecnologia de ponta (ago 2026) Cada bloco só se aplica quando o browser suporta a API (@supports / at-rules ignoradas) — sem suporte, sem JS ou com movimento reduzido, o site fica exatamente como era. ============================================================ */ /* ---------- navegação instantânea: view transitions entre páginas ---------- */ @view-transition{navigation:auto} .site-header{view-transition-name:cabecalho} .site-footer{view-transition-name:rodape} /* as letras A–H viajam do cartão para a letra de água da ficha */ a[href$="garrafa-a.html"] .letra{view-transition-name:garrafa-a} a[href$="garrafa-b.html"] .letra{view-transition-name:garrafa-b} a[href$="garrafa-c.html"] .letra{view-transition-name:garrafa-c} a[href$="garrafa-d.html"] .letra{view-transition-name:garrafa-d} a[href$="garrafa-e.html"] .letra{view-transition-name:garrafa-e} a[href$="garrafa-f.html"] .letra{view-transition-name:garrafa-f} a[href$="garrafa-g.html"] .letra{view-transition-name:garrafa-g} a[href$="garrafa-h.html"] .letra{view-transition-name:garrafa-h} .ficha-letra[data-garrafa="A"]{view-transition-name:garrafa-a} .ficha-letra[data-garrafa="B"]{view-transition-name:garrafa-b} .ficha-letra[data-garrafa="C"]{view-transition-name:garrafa-c} .ficha-letra[data-garrafa="D"]{view-transition-name:garrafa-d} .ficha-letra[data-garrafa="E"]{view-transition-name:garrafa-e} .ficha-letra[data-garrafa="F"]{view-transition-name:garrafa-f} .ficha-letra[data-garrafa="G"]{view-transition-name:garrafa-g} .ficha-letra[data-garrafa="H"]{view-transition-name:garrafa-h} @media (prefers-reduced-motion: no-preference){ ::view-transition-old(root){animation:vt-sair .34s var(--ease-out) both} ::view-transition-new(root){animation:vt-entrar .38s var(--ease-out) both} ::view-transition-group(garrafa-a),::view-transition-group(garrafa-b), ::view-transition-group(garrafa-c),::view-transition-group(garrafa-d), ::view-transition-group(garrafa-e),::view-transition-group(garrafa-f), ::view-transition-group(garrafa-g),::view-transition-group(garrafa-h){ animation-duration:.52s;animation-timing-function:var(--ease-spring,var(--ease-out))} } /* a garrafa voa para a lista (carrinho.js, same-document) */ ::view-transition-group(voo-garrafa){animation-duration:.5s;animation-timing-function:var(--ease-spring,var(--ease-out))} @keyframes vt-sair{to{opacity:0;transform:translateY(-8px)}} @keyframes vt-entrar{from{opacity:0;transform:translateY(10px)}} /* círculo de luz a partir de um botão — usado pelo toggle de tema e pela porta 18+ */ html.vt-circulo::view-transition-old(root){animation:none;mix-blend-mode:normal} html.vt-circulo::view-transition-new(root){animation:tema-circulo .55s ease-in-out both;mix-blend-mode:normal} @keyframes tema-circulo{ from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,0px))} to{clip-path:circle(var(--vt-r,141vmax) at var(--vt-x,50%) var(--vt-y,0px))} } /* ---------- fio de leitura: progresso ao rolar, só CSS ---------- */ .leitura-progresso{position:fixed;top:0;left:0;width:100%;height:3px;z-index:320;background:linear-gradient(90deg,var(--limao),var(--limao-text));transform:scaleX(0);transform-origin:0 50%;display:none;pointer-events:none;view-transition-name:leitura} @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){ .leitura-progresso{display:block;animation:ler-progresso linear both;animation-timeline:scroll(root)} } } @keyframes ler-progresso{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ---------- a espiral de casca desenha-se quando entra no ecrã ---------- */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .zest-divider svg{stroke-dasharray:1;stroke-dashoffset:1;animation:desenhar-espiral linear both;animation-timeline:view();animation-range:entry 20% cover 55%} } } @keyframes desenhar-espiral{to{stroke-dashoffset:0}} /* ---------- profundidade ao rolar: deriva lenta de arte e letras ---------- */ @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){ .hero-arte{animation:arte-deriva linear both;animation-timeline:scroll(root);animation-range:0px 620px} .ficha-letra{animation:letra-deriva linear both;animation-timeline:scroll(root);animation-range:0px 520px} } } @keyframes arte-deriva{to{transform:translateY(44px) rotate(1.1deg)}} @keyframes letra-deriva{to{transform:translateY(56px)}} /* ---------- cartões com profundidade: tilt 3D + brilho especular ---------- */ @property --mx{syntax:"";inherits:false;initial-value:50%} @property --my{syntax:"";inherits:false;initial-value:38%} @property --rx{syntax:"";inherits:false;initial-value:0deg} @property --ry{syntax:"";inherits:false;initial-value:0deg} @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){ html.js .garrafa-card.tilt,html.js .prova-card.tilt{ transition:border-color .25s ease,transform .09s linear,box-shadow .3s ease; transform:perspective(950px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px)} html.js .garrafa-card::after,html.js .prova-card::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0; transition:opacity .3s ease;mix-blend-mode:soft-light; background:radial-gradient(340px circle at var(--mx) var(--my),rgba(255,241,196,.55),rgba(255,241,196,0) 62%)} html.js .garrafa-card.tilt::after,html.js .prova-card.tilt::after{opacity:1} } /* ---------- tipografia cinética no hero (mola linear()) ---------- */ html.js .hero h1 .palavra{display:inline-block} @media (prefers-reduced-motion: no-preference){ html.js .hero h1.tipo-viva .palavra{ opacity:0;transform:translateY(.55em) rotate(1.8deg); animation:palavra-nasce .86s var(--ease-out) both; animation-timing-function:linear(0,0.437 7.2%,0.732 13.7%,0.936 20.4%,1.05 27.5%,1.093 34.2%,1.083 42.9%,1.022 59.8%,0.998 76.9%,1)} html.vt-instante .hero h1.tipo-viva .palavra, html.js .hero h1.tipo-feita .palavra{animation:none;opacity:1;transform:none} } @keyframes palavra-nasce{from{opacity:0;transform:translateY(.55em) rotate(1.8deg)}to{opacity:1;transform:none}} /* «limoncello» apanha sol: um varrimento único de luz dourada percorre a palavra depois de ela assentar */ @media (prefers-reduced-motion: no-preference){ @supports ((-webkit-background-clip: text) or (background-clip: text)){ html.js .hero h1.tipo-viva .palavra-sol{ background:linear-gradient(105deg,currentColor 40%,var(--limao-text) 50%,currentColor 60%); background-size:300% 100%;background-position:100% 0; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; animation:palavra-nasce .86s var(--ease-out) both,sol-varre 1.5s ease-in-out 1.3s both} } } @keyframes sol-varre{from{background-position:100% 0}to{background-position:0% 0}} /* glossário sem Popover API: o termo volta a texto simples */ .termo.termo-plano{cursor:auto;text-decoration:none;color:inherit} /* chegada por view transition: a página aterra completa, sem duplo reveal */ html.vt-instante .rv{transition:none} /* ---------- glossário vivo: popover nativo + ancoragem CSS ---------- */ .termo{font:inherit;font-style:italic;color:var(--limao-text);background:none;border:0;padding:0;cursor:help;text-decoration:underline dotted;text-decoration-color:var(--limao);text-decoration-thickness:2px;text-underline-offset:3px;transition:color .18s ease} .termo:hover{color:var(--text)} .pop-termo{position:fixed;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);padding:1.35rem 1.5rem;max-width:min(30rem,88vw);box-shadow:var(--sombra-cartao);margin:auto} .pop-termo::before{content:"";position:absolute;inset:5px;border:1px solid var(--line-strong);pointer-events:none} .pop-termo::backdrop{background:rgba(30,24,15,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .pop-termo h3{font-style:italic;font-size:1.2rem;margin-bottom:.35rem} .pop-termo h3 .lingua{font-family:var(--font-body);font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin-left:.5rem} .pop-termo p{font-size:.92rem;color:var(--text-2);max-width:52ch} @supports (anchor-name: --t) and (position-area: block-end){ .pop-termo[data-ancorado]{position-area:block-end;position-try-fallbacks:flip-block;margin:.55rem 0;inset:auto} .pop-termo[data-ancorado]::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} } @media (prefers-reduced-motion: no-preference){ .pop-termo{opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s var(--ease-out),overlay .22s ease allow-discrete,display .22s ease allow-discrete} .pop-termo:popover-open{opacity:1;transform:none} @starting-style{.pop-termo:popover-open{opacity:0;transform:translateY(8px)}} } /* ---------- «luce»: luz líquida do hero (WebGL, luce.js) ---------- */ .luce{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease;pointer-events:none} .hero.luce-pronta .luce{opacity:1} .hero.luce-pronta::before{animation:none} /* ---------- movimento reduzido: tudo visível e parado ---------- */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} ::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){animation:none !important} .leitura-progresso{display:none !important} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;animation-delay:0s !important} .hero::before{animation:none} .marquee-track{animation:none;transform:none} html.js .ramo path{animation:none;stroke-dashoffset:0} html.js .rv{opacity:1;transform:none} } /* ---------- responsivo ---------- */ @media (max-width: 1020px){ .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);margin-left:0;padding:.8rem 1.25rem 1.2rem} .site-nav.open{display:block;box-shadow:var(--sombra-cartao);z-index:1} /* com o menu aberto no topo, a barra ficava transparente sobre o herói enquanto o painel logo abaixo era opaco — cabeçalho a duas cores */ .site-header:has(.site-nav.open){background:var(--header-bg);border-bottom-color:var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .site-nav ul{flex-direction:column;align-items:stretch;gap:.15rem} .site-nav a{padding:.8rem .65rem;font-size:1rem} .site-nav a::after{display:none} .site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--limao);text-decoration-thickness:2px;text-underline-offset:6px} .nav-toggle{display:grid;margin-left:auto} } @media (max-width: 960px){ .card-grid.cols-3{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr 1fr} .ficha-specs{grid-template-columns:1fr} .hero-grid{grid-template-columns:1fr} .hero-arte{width:100%;max-width:420px;margin-inline:auto;margin-top:.5rem} } @media (max-width: 720px){ .card-grid.cols-3,.card-grid.cols-2{grid-template-columns:1fr} .garrafa-card .letra{font-size:5rem;right:.6rem} .footer-grid{grid-template-columns:1fr} .section{padding-block:3.2rem} .hero{padding-block:3.6rem 3.2rem} main > .hero:first-child{padding-top:calc(3.6rem + 68px)} .cta-band{padding:1.9rem 1.5rem} .stats-band{gap:1.4rem 1.6rem} .carrinho-linha{grid-template-columns:auto 1fr auto} } /* ---------- prove connosco — a prova guiada (prova/prove-connosco.html) ---------- Sem JS a página é uma ficha de prova em papel: escalas 0–10 para circular à mão e linhas para notas (.pc-manual). Com html.js entram os sliders (.pc-slider), o radar e a leitura (.pc-lado); os blocos de papel escondem-se — e voltam todos na impressão. */ /* layout: uma coluna sem JS; duas colunas com JS em ecrã largo */ .pc-grid{display:block} .pc-lado{display:none} html.js .pc-lado{display:block;margin-top:2.6rem} @media (min-width: 901px){ html.js .pc-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.8rem;align-items:start} html.js .pc-lado{position:sticky;top:84px;margin-top:0} } .pc-prep{color:var(--text-2);max-width:60ch;margin-top:1rem} .pc-manual-nota{font-size:.92rem;color:var(--text-2);max-width:56ch;margin-top:1rem} /* um eixo da prova */ .pc-eixo{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:1.6rem} .pc-eixo-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap} .pc-eixo-nome{font-size:1.28rem;font-style:italic} .pc-eixo-nome label{cursor:pointer} .pc-eixo-desc{font-size:.92rem;color:var(--text-2);max-width:56ch;margin-top:.35rem} .pc-out{display:none;font-size:.9rem;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums} html.js .pc-out{display:inline-block} /* slider nativo, vestido com a casa: trilho fino com enchimento limão (o valor a sério está no e no aria-valuetext) */ .pc-slider{display:none;margin-top:.7rem} html.js .pc-slider{display:block} input.pc-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer} input.pc-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--limao) var(--pc-pct,50%),var(--line-strong) var(--pc-pct,50%))} input.pc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--folha);box-shadow:var(--sombra-suave);margin-top:-9px;transition:transform .18s var(--ease-out)} input.pc-range:hover::-webkit-slider-thumb{transform:scale(1.12)} input.pc-range:active::-webkit-slider-thumb{transform:scale(1.04)} input.pc-range::-moz-range-track{height:4px;border-radius:2px;background:var(--line-strong)} input.pc-range::-moz-range-progress{height:4px;border-radius:2px;background:var(--limao)} input.pc-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--folha);box-shadow:var(--sombra-suave);transition:transform .18s var(--ease-out)} input.pc-range:hover::-moz-range-thumb{transform:scale(1.12)} input.pc-range:focus-visible{outline:2px solid var(--folha);outline-offset:4px;border-radius:2px} .pc-extremos{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-3);margin-top:-.35rem} /* a ficha de papel: escala 0–10 para circular e linhas para notas */ .pc-manual{margin-top:.9rem} html.js .pc-manual{display:none} .pc-escala{display:flex;justify-content:space-between;gap:.3rem;max-width:34rem;font-size:.9rem;color:var(--text-2);border-top:1px solid var(--line-strong);padding-top:.5rem} .pc-escala span{min-width:1.5em;text-align:center} .pc-linhas{margin-top:1.3rem;display:grid;gap:1.35rem;max-width:34rem} .pc-linhas span{display:block;border-bottom:1px dotted var(--text-3)} /* a coluna do radar e da leitura */ .pc-radar-bloco .rotulo-titulo{margin-bottom:.3rem} #pc-radar svg{display:block;max-width:420px;margin-inline:auto} .pc-resultado{margin-top:1.4rem} #pc-perto{font-family:var(--font-display);font-style:italic;font-size:1.22rem;line-height:1.35;color:var(--text);text-wrap:balance} #pc-seguinte{font-size:.9rem;color:var(--text-2);margin-top:.6rem} #pc-link-p{margin-top:.8rem;font-size:.95rem} .pc-acoes{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem} .pc-estado{font-size:.85rem;color:var(--folha);margin-top:.6rem;min-height:1.3em} .pc-nota{font-size:.8rem;color:var(--text-3);margin-top:.9rem;max-width:52ch} /* movimento reduzido: o brilho do polegar fica quieto (o radar já salta direto — guarda no prove.js) */ @media (prefers-reduced-motion: reduce){ input.pc-range::-webkit-slider-thumb{transition:none;transform:none} input.pc-range::-moz-range-thumb{transition:none;transform:none} } /* impressão: volta sempre a ficha de papel, com ou sem JS */ @media print{ html.js .pc-manual{display:block} .pc-slider{display:none !important} .pc-lado{display:none !important} .pc-out{display:none !important} .pc-eixo{break-inside:avoid} } /* ---------- radar vivo — comparador que morfa, barras divergentes, partilha no URL, eixos que acendem nas fichas (radar.js) ---------- */ /* eixos do radar agrupados (g.eixo-g): acendem quando o par eixo/valor da ficha está em hover/focus */ .radar-bloco svg .eixo-g .eixo-l{transition:stroke .18s ease,stroke-width .18s ease} .radar-bloco svg .eixo-g text{transition:fill .18s ease} .radar-bloco svg .eixo-g.aceso .eixo-l{stroke:var(--limao-text);stroke-width:2} .radar-bloco svg .eixo-g.aceso text{fill:var(--limao-text);font-weight:700} /* vértice do polígono da ficha: só aparece com o eixo aceso */ .radar-bloco svg .poli-v{fill:var(--limao-text);stroke:var(--surface);stroke-width:1.5;opacity:0;transition:opacity .18s ease} .radar-bloco svg .poli-v.aceso{opacity:1} /* nas fichas, os pares eixo/valor deixam de se esconder com JS: passam a legenda interativa do radar (hover/focus acende o raio) */ html.js .radar-bloco .eixos-texto{display:grid;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)} html.js .radar-bloco .eixos-texto [data-eixo]{padding:.3rem .5rem;margin:-.3rem -.5rem;border-radius:var(--radius);transition:background-color .18s ease} html.js .radar-bloco .eixos-texto [data-eixo].aceso{background:var(--limao-suave)} html.js .radar-bloco .eixos-texto [data-eixo].aceso dt{color:var(--limao-text)} /* o seletor acompanha a leitura: a coluna esquerda acabava 721px acima da direita e a metade da página parecia conteúdo por carregar */ @media (min-width: 861px){ .comp-escolha-col{position:sticky;top:84px} } /* nota de partilha do comparador (a seleção vive no URL — só com JS) */ html.js .comp-partilha{display:block;font-size:.82rem;color:var(--text-3);margin-top:.9rem;max-width:52ch} /* «Onde diferem mais»: barras divergentes por eixo — para a direita o valor mais alto, para a esquerda o mais baixo, na cor da série */ .dif-titulo{font-size:1.15rem;margin-top:1.6rem} .dif-barras{display:grid;gap:.6rem;margin-top:1rem} .dif-linha{display:grid;grid-template-columns:6.8rem minmax(0,1fr) 3.4rem;gap:.8rem;align-items:center} .dif-eixo{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);white-space:nowrap} .dif-vis{position:relative;display:block;height:14px;background:var(--surface-2);border-radius:2px;overflow:hidden} .dif-vis::before{content:"";position:absolute;left:calc(50% - .5px);top:0;bottom:0;width:1px;background:var(--line-strong);z-index:1} .dif-bar{position:absolute;top:3px;bottom:3px;display:block} .dif-esq{right:50%;transform-origin:100% 50%;border-radius:2px 0 0 2px} .dif-dir{left:50%;transform-origin:0 50%;border-radius:0 2px 2px 0} .dif-s0{background:var(--limao-text)} .dif-s1{background:var(--folha)} .dif-s2{background:var(--erro)} .dif-delta{font-size:.85rem;color:var(--text-2);text-align:right} .dif-nota{font-size:.8rem;color:var(--text-3);margin-top:.7rem;max-width:60ch} .dif-lista{margin:.9rem 0 0 1.1rem;color:var(--text-2);display:grid;gap:.5rem;font-size:.95rem} .dif-proximos{margin-top:1rem;color:var(--text-2)} /* revelação: scaleX do centro para fora, escalonada — só com JS e sem movimento reduzido (com reduce nem sequer há estado escondido) */ @media (prefers-reduced-motion: no-preference){ html.js .dif-barras .dif-bar{transform:scaleX(0);transition:transform .55s var(--ease-out)} html.js .dif-barras.dif-on .dif-bar{transform:scaleX(1)} html.js .dif-barras .dif-linha:nth-child(2) .dif-bar{transition-delay:.05s} html.js .dif-barras .dif-linha:nth-child(3) .dif-bar{transition-delay:.1s} html.js .dif-barras .dif-linha:nth-child(4) .dif-bar{transition-delay:.15s} html.js .dif-barras .dif-linha:nth-child(5) .dif-bar{transition-delay:.2s} html.js .dif-barras .dif-linha:nth-child(6) .dif-bar{transition-delay:.25s} } @media (max-width: 480px){ .dif-linha{grid-template-columns:5.6rem minmax(0,1fr) 2.9rem;gap:.55rem} .dif-eixo{font-size:.6rem;letter-spacing:.1em} } /* ============================================================ PALCO D'A PROVA — «A prova, diante de si» (prova/metodologia.html · palco.js) Scrollytelling do protocolo cego: palco sticky em line-art (garrafa → forro → carimbo «?» → mesa → radar de 6 eixos → assinatura) comandado por data-passo e classes cumulativas p1…p13 que o palco.js comuta ao rolar. Guards: por omissão o CSS mostra o estado FINAL — os estados escondidos e as transições vivem só sob html.js + .palco-vivo (classe que o palco.js só adiciona sem movimento reduzido) e dentro de @media (prefers-reduced-motion: no-preference). O palco é decorativo (aria-hidden): toda a informação está no texto dos passos à direita. ============================================================ */ /* ---------- layout: palco sticky à esquerda, passos à direita ---------- */ .palco-sec{padding-block:4rem 1.5rem} .palco-sec + .section{border-top:1px solid var(--line)} .palco-cabeca{margin-bottom:2.2rem} .palco-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(2rem,5vw,4.2rem)} .palco-sticky{position:sticky;top:84px;align-self:start} .palco-moldura{border:1px solid var(--line-strong);background:var(--surface);position:relative;padding:1.1rem 1.1rem 1.3rem} .palco-moldura::before{content:"";position:absolute;inset:5px;border:1px solid var(--line-strong);pointer-events:none} .palco-legenda{text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--text-3);margin-bottom:.6rem} .palco-svg{display:block;width:100%;height:auto;max-height:calc(100dvh - 190px);margin-inline:auto} /* passos: trilho editorial com filete que acende no passo ativo */ .palco-passos{padding-block:2vh 4vh} .palco-passo{min-height:56vh;display:flex;flex-direction:column;justify-content:center;border-left:2px solid var(--line);padding:2rem 0 2rem clamp(1.1rem,2.5vw,1.8rem)} .palco-passo .passo-num{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);transition:color .35s ease} .palco-passo h3{font-style:italic;font-size:clamp(1.4rem,2.5vw,1.75rem);margin-top:.55rem} .palco-passo .passo-escala{font-family:var(--font-body);font-style:normal;font-size:.82rem;font-weight:700;letter-spacing:.14em;color:var(--text-3);margin-left:.4rem} .palco-passo p{color:var(--text-2);margin-top:.85rem;max-width:52ch} .palco-passo .passo-acoes{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem;max-width:none} /* ---------- a tinta do palco (estado final por omissão) ---------- */ .palco-svg .tr{fill:none;stroke:var(--text-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .palco-svg .tr-brilho{opacity:.5;stroke-width:1.2} .palco-svg .ac-limao{stroke:var(--limao-text)} .palco-svg .ac-folha{stroke:var(--folha)} .palco-svg .rot-linha{stroke:var(--text-3);stroke-width:1;opacity:.6} .palco-svg .pf-papel{fill:var(--surface-2);stroke:var(--text-2);stroke-width:1.5;stroke-linejoin:round} .palco-svg .pf-vinco{fill:none;stroke:var(--text-3);stroke-width:1;opacity:.4} .palco-svg .pf-cordel{fill:none;stroke:var(--folha);stroke-width:1.5;stroke-linecap:round} .palco-svg .pf-no{fill:var(--folha);stroke:none} .palco-svg .pg-carimbo-anim circle{fill:none;stroke:var(--folha);stroke-width:1.5} .palco-svg .carimbo-int{stroke-width:1;opacity:.65} .palco-svg .carimbo-q{font-family:var(--font-display);font-style:italic;font-size:50px;fill:var(--folha)} .palco-svg .pm-tempg line{stroke:var(--text-3);stroke-width:1} .palco-svg .pm-temp{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.06em;fill:var(--text-3)} .palco-svg .anel{fill:none;stroke:var(--grelha);stroke-width:1} .palco-svg .anel-fora{stroke-width:1.5} .palco-svg .pr-raio line{stroke:var(--grelha);stroke-width:1} .palco-svg .pr-raio text{font-family:var(--font-body);font-size:13.5px;fill:var(--text-2)} .palco-svg .pr-poli{fill:var(--limao);fill-opacity:.22;stroke:var(--limao-text);stroke-width:2;stroke-linejoin:round} .palco-svg .pr-verts circle{fill:var(--limao-text);stroke:var(--surface);stroke-width:1.5} .palco-svg .pr-filete{stroke:var(--limao);stroke-width:3;stroke-linecap:round} /* no estado final a mesa recolhe ao canto, em miniatura, e o radar assina */ .palco-svg .pg{transform-box:view-box;transform-origin:210px 190px;transform:translate(-125px,-118px) scale(.34)} /* ---------- a máquina de estados (só com JS armado e sem reduce) ---------- */ @media (prefers-reduced-motion: no-preference){ /* passos: o corrente acende, os outros baixam meio tom (AA mantém-se) */ html.js .palco-sec.palco-vivo .palco-passo{opacity:.85;transition:opacity .4s ease,border-color .4s ease} /* a .85 de opacidade o kicker em --text-3 media 3,79:1: compensa-se a transparência com uma tinta mais escura no passo que não está ativo */ html.js .palco-sec.palco-vivo .palco-passo .passo-num{color:var(--text-2)} html.js .palco-sec.palco-vivo .palco-passo.ativo .passo-num{color:var(--limao-text)} html.js .palco-sec.palco-vivo .palco-passo.ativo{opacity:1;border-color:var(--limao)} html.js .palco-sec.palco-vivo .palco-passo.ativo .passo-num{color:var(--limao-text)} /* traços por desenhar: dash escondido até ao passo respetivo */ html.js .palco.palco-vivo .pg-corpo .tr, html.js .palco.palco-vivo .pm-c .tr, html.js .palco.palco-vivo .pf-vinco, html.js .palco.palco-vivo .pf-cordel, html.js .palco.palco-vivo .pr-grelha .anel, html.js .palco.palco-vivo .pr-filete{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease-out)} /* p1 — a garrafa desenha-se, traço a traço */ html.js .palco.palco-vivo .pg-corpo .tr{transition-duration:.9s} html.js .palco.palco-vivo .pg-corpo .tr-bocal{transition-delay:.42s;transition-duration:.4s} html.js .palco.palco-vivo .pg-corpo .tr-rolha{transition-delay:.5s;transition-duration:.5s} html.js .palco.palco-vivo .pg-corpo .tr-brilho{transition-delay:.75s;transition-duration:.6s} html.js .palco.palco-vivo .pg-rotulo .tr{transition-delay:.35s;transition-duration:.7s} html.js .palco.palco-vivo .pg-rotulo .rot-limao, html.js .palco.palco-vivo .pg-rotulo .rot-folha{transition-delay:.85s;transition-duration:.5s} html.js .palco.palco-vivo .pg-rotulo .rot-linha{transition-delay:.7s;transition-duration:.45s} html.js .palco.palco-vivo.p1 .pg-corpo .tr{stroke-dashoffset:0} /* p2 — o forro desliza e cobre; vincos e cordel desenham-se */ html.js .palco.palco-vivo .pg-forro{opacity:0;transform:translateY(46px);transition:opacity .5s ease,transform .8s var(--ease-out)} html.js .palco.palco-vivo.p2 .pg-forro{opacity:1;transform:none} html.js .palco.palco-vivo .pf-vinco{transition-delay:.45s;transition-duration:.5s} html.js .palco.palco-vivo .pf-cordel{transition-delay:.6s;transition-duration:.6s} html.js .palco.palco-vivo .pf-no{opacity:0;transition:opacity .3s ease .95s} html.js .palco.palco-vivo.p2 .pf-vinco, html.js .palco.palco-vivo.p2 .pf-cordel{stroke-dashoffset:0} html.js .palco.palco-vivo.p2 .pf-no{opacity:1} /* p3 — o carimbo «?» cai com mola */ html.js .palco.palco-vivo .pg-carimbo-anim{opacity:0;transform:scale(1.55);transform-box:view-box;transform-origin:210px 218px;transition:opacity .3s ease,transform .55s var(--ease-spring,var(--ease-out))} html.js .palco.palco-vivo.p3 .pg-carimbo-anim{opacity:1;transform:scale(1)} /* p4 — a mesa: 8 °C e o cálice; p5 — o painel completa-se */ html.js .palco.palco-vivo .pm-tempg{opacity:0;transition:opacity .5s ease .3s} html.js .palco.palco-vivo.p4 .pm-tempg{opacity:1} html.js .palco.palco-vivo .pm-c .tr{transition-duration:.65s} html.js .palco.palco-vivo .pm-c .tr:nth-child(2){transition-delay:.22s} html.js .palco.palco-vivo .pm-c .tr:nth-child(3){transition-delay:.32s} html.js .palco.palco-vivo .pm-c .tr:nth-child(4){transition-delay:.42s} html.js .palco.palco-vivo.p4 .pm-c1 .tr{stroke-dashoffset:0} html.js .palco.palco-vivo.p5 .pm-c2 .tr, html.js .palco.palco-vivo.p5 .pm-c3 .tr{stroke-dashoffset:0} /* p6 — a mesa recolhe ao canto; a grelha do radar desenha-se */ html.js .palco.palco-vivo .pg{transform:none;transition:transform .9s var(--ease-out)} html.js .palco.palco-vivo.p6 .pg{transform:translate(-125px,-118px) scale(.34)} html.js .palco.palco-vivo .pr-grelha .anel{transition-duration:.7s} html.js .palco.palco-vivo .pr-grelha .anel:nth-child(2){transition-delay:.08s} html.js .palco.palco-vivo .pr-grelha .anel:nth-child(3){transition-delay:.16s} html.js .palco.palco-vivo .pr-grelha .anel:nth-child(4){transition-delay:.24s} html.js .palco.palco-vivo .pr-grelha .anel:nth-child(5){transition-delay:.32s} html.js .palco.palco-vivo.p6 .pr-grelha .anel{stroke-dashoffset:0} /* p7–p12 — os seis raios, um por passo; o corrente acende a limão */ html.js .palco.palco-vivo .pr-raio line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .55s var(--ease-out),stroke .3s ease,stroke-width .3s ease} html.js .palco.palco-vivo .pr-raio text{opacity:0;transform:translateY(5px);transform-box:fill-box;transform-origin:center;transition:opacity .45s ease .2s,transform .45s var(--ease-out) .2s,fill .3s ease} html.js .palco.palco-vivo.p7 .pr-raio-1 line, html.js .palco.palco-vivo.p8 .pr-raio-2 line, html.js .palco.palco-vivo.p9 .pr-raio-3 line, html.js .palco.palco-vivo.p10 .pr-raio-4 line, html.js .palco.palco-vivo.p11 .pr-raio-5 line, html.js .palco.palco-vivo.p12 .pr-raio-6 line{stroke-dashoffset:0} html.js .palco.palco-vivo.p7 .pr-raio-1 text, html.js .palco.palco-vivo.p8 .pr-raio-2 text, html.js .palco.palco-vivo.p9 .pr-raio-3 text, html.js .palco.palco-vivo.p10 .pr-raio-4 text, html.js .palco.palco-vivo.p11 .pr-raio-5 text, html.js .palco.palco-vivo.p12 .pr-raio-6 text{opacity:1;transform:none} html.js .palco.palco-vivo[data-passo="7"] .pr-raio-1 line, html.js .palco.palco-vivo[data-passo="8"] .pr-raio-2 line, html.js .palco.palco-vivo[data-passo="9"] .pr-raio-3 line, html.js .palco.palco-vivo[data-passo="10"] .pr-raio-4 line, html.js .palco.palco-vivo[data-passo="11"] .pr-raio-5 line, html.js .palco.palco-vivo[data-passo="12"] .pr-raio-6 line{stroke:var(--limao-text);stroke-width:1.5} html.js .palco.palco-vivo[data-passo="7"] .pr-raio-1 text, html.js .palco.palco-vivo[data-passo="8"] .pr-raio-2 text, html.js .palco.palco-vivo[data-passo="9"] .pr-raio-3 text, html.js .palco.palco-vivo[data-passo="10"] .pr-raio-4 text, html.js .palco.palco-vivo[data-passo="11"] .pr-raio-5 text, html.js .palco.palco-vivo[data-passo="12"] .pr-raio-6 text{fill:var(--limao-text)} /* p13 — o polígono fecha, enche, ganha vértices e assina em limão */ html.js .palco.palco-vivo .pr-poli{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;transition:stroke-dashoffset 1.05s var(--ease-out),fill-opacity .6s ease .85s} html.js .palco.palco-vivo.p13 .pr-poli{stroke-dashoffset:0;fill-opacity:.22} html.js .palco.palco-vivo .pr-verts circle{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .3s ease .85s,transform .5s var(--ease-spring,var(--ease-out)) .85s} html.js .palco.palco-vivo .pr-verts circle:nth-child(2){transition-delay:.92s} html.js .palco.palco-vivo .pr-verts circle:nth-child(3){transition-delay:.99s} html.js .palco.palco-vivo .pr-verts circle:nth-child(4){transition-delay:1.06s} html.js .palco.palco-vivo .pr-verts circle:nth-child(5){transition-delay:1.13s} html.js .palco.palco-vivo .pr-verts circle:nth-child(6){transition-delay:1.2s} html.js .palco.palco-vivo.p13 .pr-verts circle{opacity:1;transform:scale(1)} html.js .palco.palco-vivo .pr-filete{transition-duration:.6s;transition-delay:1.25s} html.js .palco.palco-vivo.p13 .pr-filete{stroke-dashoffset:0} } /* ---------- <900px: empilha, palco compacto e sticky no topo ---------- */ @media (max-width: 899px){ .palco-grid{grid-template-columns:1fr;gap:0} .palco-sticky{top:68px;z-index:40;padding:.7rem 0 .9rem} /* fundo a sangrar até às goteiras do .wrap, para os passos não aparecerem a deslizar nas margens por trás do palco */ .palco-sticky::before{content:"";position:absolute;inset:0 -1.25rem;background:var(--bg);border-bottom:1px solid var(--line);z-index:-1} .palco-moldura{max-width:min(72vw,300px);margin-inline:auto;padding:.7rem} .palco-legenda{display:none} .palco-svg{max-height:32vh} .palco-passo{min-height:46vh;padding-block:1.6rem} } @media (max-width: 480px){ .palco-moldura{max-width:min(80vw,280px)} .palco-svg{max-height:30vh} } /* ---------- movimento reduzido: o palco vira ilustração ---------- Sem animação, 13 passos de 56vh são 13 ecrãs de espaço vazio a percorrer sem ganho nenhum: aqui os passos compactam-se e o palco sai do sticky para o topo da coluna, como a figura de um artigo. */ @media (prefers-reduced-motion: reduce){ /* relative, não static: o ::before do palco sangra -1.25rem e precisa deste elemento como bloco contentor, senão arrasta a página 20px */ .palco-sticky{position:relative} .palco-passos{padding-block:0 1rem} .palco-passo{min-height:0;padding-block:1.3rem} .palco-svg{max-height:none} } /* o mesmo vale sem JavaScript: o palco.js nunca corre, o desenho fica no estado final e os 13 passos altos não teriam nada a acompanhar */ html:not(.js) .palco-sticky{position:relative} html:not(.js) .palco-passos{padding-block:0 1rem} html:not(.js) .palco-passo{min-height:0;padding-block:1.3rem} html:not(.js) .palco-svg{max-height:none} /* ---------- impressão: tudo no estado final, sem sticky ---------- */ @media print{ .palco-sticky{position:static} .palco-passo{min-height:0} html.js .palco-sec.palco-vivo .palco-passo{opacity:1 !important} html.js .palco.palco-vivo .pg{transform:translate(-125px,-118px) scale(.34) !important} html.js .palco.palco-vivo *{opacity:1 !important;stroke-dashoffset:0 !important;transition:none !important} html.js .palco.palco-vivo .pg-forro, html.js .palco.palco-vivo .pg-carimbo-anim, html.js .palco.palco-vivo .pr-verts circle, html.js .palco.palco-vivo .pr-raio text{transform:none !important} html.js .palco.palco-vivo .pr-poli{fill-opacity:.22 !important} html.js .palco.palco-vivo .tr-brilho{opacity:.5 !important} html.js .palco.palco-vivo .pf-vinco{opacity:.4 !important} html.js .palco.palco-vivo .rot-linha{opacity:.6 !important} html.js .palco.palco-vivo .carimbo-int{opacity:.65 !important} } /* ---------- impressão ---------- */ @media print{ :root{--bg:#fff;--surface:#fff;--surface-2:#f6f6f6;--line:#999;--line-strong:#666;--text:#000;--text-2:#222;--text-3:#555} body{background:#fff;color:#000} .site-header,.site-footer,.cta-band,.skip-link,.theme-toggle,.nav-toggle,.btn,.idade-overlay,.moderacao,.marquee,.leitura-progresso,.luce{display:none !important} a{text-decoration:none;color:#000} .hero::before,.hero::after,.page-head::before{display:none} }