/* The look of the site: Menta. Icy mint white, deep pine, candy-cane red; Bricolage Grotesque and Figtree.
   It sets the kit's palette tokens (--p-*) and adds the site's own touches. Linked last in <head>. */

:root {
  --p-bg: #f2f8f4; --p-surface: #e2f0e7; --p-ink: #0d2a1e; --p-muted: #4a6156;
  --p-accent: #d7263d; --p-accent-ink: #ffffff; --p-action: #d7263d; --p-action-ink: #ffffff;
  --p-inv-bg: #0b3d2a; --p-inv-surface: #12503a; --p-inv-ink: #effaf3; --p-inv-muted: #a9d4bf;
  --p-inv-accent: #7fe3b7; --p-inv-accent-ink: #0b3d2a; --p-inv-action: #effaf3; --p-inv-action-ink: #0b3d2a;
  /* the site's own colours */
  --menta: #7fe3b7; --menta-soft: #d8f5e6; --pinho: #0b3d2a; --vermelho: #d7263d;
  --gold: var(--menta); --fir: var(--pinho); --snow: 239 250 243; --arvore: #12503a;
  /* the candy-cane stripe: the one recurring motif */
  --riscas: repeating-linear-gradient(135deg, var(--vermelho) 0 6px, #ffffff 6px 12px);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-text: "Figtree", system-ui, sans-serif;
  --display-weight: 600; --display-tracking: -0.025em; --display-tracking-xl: -0.045em;
  /* the thank-you card (js/sorriso-core.js) */
  --cartao-bg: #f2f8f4; --cartao-ink: #0d2a1e; --cartao-muted: #4a6156; --cartao-red: #d7263d; --cartao-band: #0b3d2a; --cartao-pop: #7fe3b7; --cartao-logo: black;
}
::selection { background: var(--menta); color: var(--pinho); }

/* the countdown as a pill badge */
.hero__over .hero-notice, .app-kicker { font-weight: 600; }
/* (the hero's countdown is mint words on the pine box, starting on the box's inner left line) */
.hero__over .hero-notice { color: var(--menta); letter-spacing: .01em; }
.big-tag__string { background: repeating-linear-gradient(180deg, var(--p-action) 0 7px, #ffffff 7px 11px); }
.flow::backdrop { background: rgb(6 10 8 / .6); }

/* white gift tags with a soft shadow */
.tag.card { border-color: transparent; background: #ffffff; box-shadow: 0 1px 0 rgb(13 42 30 / .06), 0 12px 32px -20px rgb(13 42 30 / .35); }
.tag__state { font-weight: 600; }
.ground-inverse .tag.card { --card: #ffffff; --bg: #ffffff; background: #ffffff; }
.chip[aria-pressed="true"] { background: var(--p-inv-bg); border-color: var(--p-inv-bg); }

/* opened from disk: a slim notice above the bar, and the page pushed down under it (js/disco.js) */
.aviso-disco { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 10px 16px; background: #1e1a16; color: #fff; font: 400 14px/1.4 var(--font-text); text-align: center; }
.aviso-disco code { background: rgb(255 255 255 / .14); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
html.em-disco .nav { top: 42px; }
@media (max-width: 639px) { .aviso-disco { font-size: 13px; } html.em-disco .nav { top: 76px; } }

/* ================================================================ Menta, further */
/* the mint highlighter behind one key word of a heading */
.marca { background: linear-gradient(var(--marca-cor, color-mix(in oklab, var(--menta) 75%, transparent)), var(--marca-cor, color-mix(in oklab, var(--menta) 75%, transparent))) no-repeat 0 88% / 100% 32%; padding-inline: .06em; margin-inline: -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ground-inverse .marca, .app-top .marca { --marca-cor: color-mix(in oklab, var(--menta) 42%, transparent); }

/* focus: a pine ring on light grounds, a mint ring on the dark ones */
:where(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--pinho); outline-offset: 3px; }
:where(.ground-inverse, .app-top, .app-footer--natal, .hero__over) :where(a, button, [tabindex]):focus-visible { outline-color: var(--menta); }
:where(input, textarea, select):focus-visible { outline: 2px solid var(--pinho); outline-offset: 1px; box-shadow: 0 0 0 5px color-mix(in oklab, var(--menta) 45%, transparent); }

/* buttons press in; arrows nudge on hover; chips warm up in mint */
.btn:active { transform: scale(.97); }
.btn .m-arrow { transition: transform 200ms var(--ease, ease); }
.btn:hover .m-arrow { transform: translateX(3px); }
.chip:not([aria-pressed="true"]):hover { background: var(--menta-soft); border-color: var(--pinho); }

/* the homepage hero: frosted pine over the photograph, so the tree shows through */
.hero--film .hero__over > :first-child { background: rgb(11 61 42 / .8); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 30px 60px -30px rgb(0 0 0 / .5); }

/* the campaign page's top band: a slow mint-and-teal aurora behind the snow */
.app-top.ground-inverse::before { content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none; background: radial-gradient(38% 46% at 18% 28%, rgb(127 227 183 / .26), transparent 70%), radial-gradient(34% 44% at 82% 74%, rgb(52 196 170 / .22), transparent 70%), radial-gradient(26% 30% at 60% 10%, rgb(215 38 61 / .12), transparent 70%); animation: aurora 20s ease-in-out infinite alternate; }
@keyframes aurora { to { transform: translate(5%, -4%) rotate(7deg) scale(1.06); } }

/* the 50 cells of the big meter are little sweatshirts that fill up: half, then whole, in red */
.app-top .app-meter .meter__cells--big { gap: 4px 6px; }
.app-top .app-meter .meter__cells--big > li { background: none; border-radius: 0; }
.meter__cells--big > li::after { display: none; }
.meter__cells--big > li::before { content: ""; position: absolute; inset: 0; --sweat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 5.6 4.2C4.1 4.7 3.1 6 2.9 7.6L2 18.5h3.2l1-8.3V20a1 1 0 0 0 1 1h9.6a1 1 0 0 0 1-1v-9.8l1 8.3H22l-.9-10.9c-.2-1.6-1.2-2.9-2.7-3.4L15 3a3 3 0 0 1-6 0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--sweat) center / contain no-repeat; mask: var(--sweat) center / contain no-repeat;
  background: linear-gradient(var(--p-action), var(--p-action)) bottom / 100% calc(var(--fill, 0) * 100%) no-repeat, color-mix(in oklab, var(--p-ink) 14%, transparent);
  transition: background-size 700ms cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 12ms), transform 200ms var(--ease, ease); }
.meter__cells--big > li:hover::before { transform: scale(1.14); }
.meter__cells--big > li > button:hover { box-shadow: none; }
.meter__cells--big > li.is-new::before { animation: pop 900ms cubic-bezier(.22,1,.36,1); }
.meter__cells--big > li.is-confirmar::before { background-color: color-mix(in oklab, #f2a516 30%, transparent); }
.app-meter .meter__legend i { border-radius: 3px; }
.app-meter__eur, .meter__big b { font-variant-numeric: tabular-nums; }

/* the candy-cane stripe: on each tag's string, on a fully paid tag's bar, on the dialog's step track */
.tag__hole::before { width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(180deg, var(--vermelho) 0 5px, #ffffff 5px 9px); }
.tag[data-estado="completa"] .tag__bar > i::after { background: var(--riscas); }
.flow__steps { position: relative; padding-bottom: 14px; }
.flow__steps::before, .flow__steps::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 2px; }
.flow__steps::before { right: 0; background: color-mix(in oklab, var(--p-ink) 10%, transparent); }
.flow__steps::after { width: calc(var(--passo, 0) * 100%); background: var(--riscas); transition: width 600ms cubic-bezier(.22,1,.36,1); }
.flow__steps li.is-done span { background: var(--pinho); border-color: var(--pinho); color: var(--menta); }

/* the thank-you gift box: pine paper, a red ribbon and bow */
.gift__base, .gift__lid { background-color: var(--pinho); background-image: linear-gradient(90deg, transparent 45%, var(--vermelho) 45% 55%, transparent 55%); }
.gift__lid::before, .gift__lid::after { border-color: var(--vermelho); }

/* "Apadrinhamentos": who has given, with a pill while the money is not yet confirmed */
.app-mine__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); }
.app-mine__head h2 { margin-bottom: 0; }
.mine > li.is-meu { margin-inline: calc(-1 * var(--s-3)); padding-inline: var(--s-3); border-radius: var(--r-sm); background: linear-gradient(90deg, var(--menta-soft), transparent 70%); }
.mine__name { font-size: var(--t-lead); }
.mine__size { color: var(--muted); font-size: var(--t-body); font-weight: 400; }
.mine__quem { color: var(--ink); font-weight: 600; }
.mine__teu { color: var(--pinho); font-weight: 600; }
.mine__msg { display: block; margin-top: var(--s-1); font: italic 400 var(--t-body)/1.45 var(--font-text); color: var(--ink); quotes: "“" "”"; }
.mine__actions { align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; font: 600 13px/1 var(--font-text); }
.pill--confirmar { background: #fff1d6; color: #7a4a00; }
.pill--nao { background: #fde3e6; color: #8a1424; }
.pill .pinta { width: 8px; height: 8px; }
.app-mine__acoes { margin-top: var(--s-5); }

/* the footers: "Feliz Natal" in large type; on the campaign page a pine band with snow */
.feliz-natal { font: var(--display-weight) clamp(44px, 4.6vw, 76px)/.95 var(--font-display); letter-spacing: var(--display-tracking-xl); color: var(--pinho); margin-top: var(--s-5); }
.app-footer--natal { position: relative; overflow: hidden; background: var(--pinho); color: var(--p-inv-ink); border-top: 0; padding-top: var(--s-8); }
.app-footer--natal .wrap { position: relative; z-index: 1; }
.app-footer--natal a { color: inherit; }
.app-footer--natal .muted { color: var(--p-inv-muted); }
.app-footer--natal .feliz-natal { flex-basis: 100%; margin: 0 0 var(--s-5); color: var(--menta); font-size: clamp(56px, 9vw, 148px); }
.app-footer__neve { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .app-top.ground-inverse::before { animation: none; }
  .btn:active { transform: none; }
}

/* ================================================================ tighter rhythm (the club's ask)
   The kit makes every section exactly one or two screens and the hero a full screen; here the sections
   take only the height of their content, the space between them is half the kit's, and the hero is shorter. */
:root { --padt: 60px; --padb: 36px; }
@media (max-width: 639px) { :root { --padt: 48px; --padb: 24px; } }
html body main > :is(section, .section):not(.hero, .section--hero), html body footer.closing { height: auto; min-height: 0; }
html body main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), html body footer.closing > .wrap { height: auto; }
html body main > :is(section, .section):is(.g2, .g2m) > :is(.wrap, .container) { grid-template-rows: auto auto; row-gap: 0; }
html body footer.closing > .wrap { grid-template-rows: auto auto; row-gap: var(--s-8); }
@media (max-width: 639px) { html body main > :is(section, .section):is(.g2, .g2m) > :is(.wrap, .container) { row-gap: var(--s-6); } }
footer.closing .closing__cta > .close__media { flex: none; height: clamp(180px, 22vw, 320px); }
/* the hero: about two thirds of a screen, enough for its box of words over the photograph */
html body main > :is(.hero, .section--hero) { height: auto; padding-bottom: var(--s-6); }
.hero--film .hero__media { min-height: clamp(560px, 70svh, 720px); }
.hero__over h1 { hyphens: manual; }
@media (max-width: 639px) { .hero--film .hero__media { min-height: 0; } }

/* the hero scene: an animated night drawn in the page (index.html). The frame is pine from the first paint, never
   black, and the kit's entrance never scales it (only the words come in) */
html body .hero--film .hero__media { background: #0b3d2a; scale: none !important; clip-path: none !important; }
.hero-cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-cena .hc-floco { animation: hc-cai var(--t) linear var(--d) infinite; }
.hero-cena .hc-est { animation: hc-pisca 3.4s ease-in-out var(--d) infinite; }
.hero-cena .hc-luz { animation: hc-luz 1.8s ease-in-out var(--d) infinite; }
.hero-cena .hc-bola { transform-box: fill-box; transform-origin: 50% 0; animation: hc-balanca 3.6s ease-in-out var(--d) infinite alternate; }
.hero-cena .hc-raios { transform-box: fill-box; transform-origin: 50% 50%; animation: hc-gira 30s linear infinite; }
.hero-cena .hc-brilho { animation: hc-pulsa 5s ease-in-out infinite alternate; }
.hero-cena .hc-tampa { transform-box: fill-box; transform-origin: 0 100%; animation: hc-salta 7s ease-in-out 2.5s infinite; }
.hero-cena .hc-aurora { animation: hc-aurora 20s ease-in-out infinite alternate; }
@keyframes hc-cai { from { transform: translate(0, -40px); } to { transform: translate(var(--v), 1040px); } }
@keyframes hc-pisca { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes hc-luz { 0%, 100% { opacity: .35; } 45% { opacity: 1; } }
@keyframes hc-balanca { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes hc-gira { to { transform: rotate(360deg); } }
@keyframes hc-pulsa { from { opacity: .7; } to { opacity: 1; } }
@keyframes hc-salta { 0%, 78%, 100% { transform: none; } 82% { transform: translateY(-16px) rotate(-9deg); } 86% { transform: none; } 90% { transform: translateY(-6px) rotate(-3deg); } 94% { transform: none; } }
@keyframes hc-aurora { from { transform: translate(-40px, 0); } to { transform: translate(60px, 24px); } }
@media (prefers-reduced-motion: reduce) { .hero-cena * { animation: none !important; } }
/* on a phone the tree stands above the words, centred */
@media (max-width: 639px) {
  /* the scene is drawn about twice the frame's width so the tree (at 73.75% of the drawing) sits in the middle
     and the right edge is still covered; the words start below the presents */
  html body .hero--film .hero__media { padding-top: 100%; background: #cfeadd; }   /* the drawing covers the sky; the snow goes on behind the words */
  .hero-cena { inset: 0 auto auto -93.8%; width: 195%; max-width: none; height: auto; aspect-ratio: 1.6; }
}

/* the Christmas sound switch in the top bar (js/sons.js) */
.som-btn { flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
.som-btn:hover { background: var(--menta-soft); border-color: var(--pinho); }
.som-btn svg { width: 20px; height: 20px; }
.som-btn .som-off, .som-btn[aria-pressed="false"] .som-on { display: none; }
.som-btn[aria-pressed="false"] .som-off { display: block; }
.som-btn[aria-pressed="true"] { color: var(--vermelho); }
@media (hover: hover) { .som-btn[aria-pressed="true"]:hover svg { animation: tocar-sino 700ms ease; transform-origin: 50% 10%; } }
@keyframes tocar-sino { 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } }
@media (max-width: 1023px) { .nav:not(.is-open) .som-btn { margin-left: auto; } .nav:not(.is-open) .som-btn + .nav__actions { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .som-btn svg { animation: none !important; } }
/* until the visitor's first click (browsers keep pages silent until then) the bell calls softly, and the first
   hover that would have rung shows a note by the pointer (js/sons.js) */
html.som-espera .som-btn[aria-pressed="true"] { border-color: var(--vermelho); animation: som-chama 2.4s ease-out infinite; }
@keyframes som-chama { 0% { box-shadow: 0 0 0 0 rgb(215 38 61 / .45); } 70%, 100% { box-shadow: 0 0 0 12px rgb(215 38 61 / 0); } }
.som-dica { position: fixed; z-index: 80; padding: 8px 14px; border-radius: 999px; background: var(--pinho); color: #fff; font: 500 14px/1.2 var(--font-text, inherit); white-space: nowrap; box-shadow: 0 12px 30px -12px rgb(0 0 0 / .45); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 200ms ease; }
.som-dica.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.som-espera .som-btn { animation: none; } .som-dica { transition: none; } }