/* Setores — "Um dia em Portugal" (2026-10-08).
   Substitui o conteúdo da antiga secção "07 — Imobiliário" (o id
   `#imobiliario` fica: o fundo, os botões e o contraste continuam a vir de
   cauda.css, e a luz de horizonte de scroll/tail.js).

   Um só material: o giz pastel dos projetos (proofs.css). Cada cartão é uma
   hora do dia, com uma lavagem de duas cores de giz e um desenho de linha que
   se desenha ao entrar. Cada desenho tem UM pormenor vivo (vapor, barco,
   janelas, chama, luzes), só a correr enquanto a secção está à vista.

   Desktop (>=1000px): acordeão horizontal — o cartão activo abre, os outros
   ficam estreitos. Abaixo disso: grelha, todos abertos. Sem JS: todos os
   desenhos ficam traçados (o estado escondido só existe com [data-ready]). */

.setores{
  --st-ink: #11141d;
  --st-grao: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.st-head{ max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.st-head .display{ margin: 14px 0 18px; }
.st-head .lede{ max-width: 60ch; color: var(--paper-dim, rgba(238,241,247,.7)); }

/* ---- tons: cada hora, duas cores de giz + um acento --------------------- */
.st-card[data-tone="manha"] { --st-a:#F6E08F; --st-b:#F7B89B; --st-c:#F4A6C1; }
.st-card[data-tone="mar"]   { --st-a:#9FC8F2; --st-b:#9EE3C8; --st-c:#F6E08F; }
.st-card[data-tone="ocaso"] { --st-a:#F7B89B; --st-b:#F4A6C1; --st-c:#F6E08F; }
.st-card[data-tone="jantar"]{ --st-a:#F4A6C1; --st-b:#C3AEF0; --st-c:#F6E08F; }
.st-card[data-tone="noite"] { --st-a:#C3AEF0; --st-b:#9FC8F2; --st-c:#F6E08F; }

/* ---- o dia --------------------------------------------------------------- */
.st-day{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 640px){ .st-day{ grid-template-columns: 1fr 1fr; } }

.st-card{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(238,241,247,.10);
  background:
    radial-gradient(80% 60% at 28% 18%, color-mix(in srgb, var(--st-a) 22%, transparent), transparent 70%),
    radial-gradient(70% 55% at 82% 78%, color-mix(in srgb, var(--st-b) 16%, transparent), transparent 72%),
    var(--st-ink);
  color: var(--paper, #EEF1F7);
  transition: border-color .5s ease, box-shadow .5s ease;
}
/* grão de giz por cima da lavagem */
.st-card::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--st-a) 30%, transparent), color-mix(in srgb, var(--st-b) 22%, transparent));
  -webkit-mask: var(--st-grao) 0 0 / 240px 240px;
          mask: var(--st-grao) 0 0 / 240px 240px;
  opacity: .28;
  pointer-events: none;
}
/* `.is-active` só significa algo no acordeão do desktop; abaixo, só o foco */
.st-card:focus-within{
  border-color: color-mix(in srgb, var(--st-a) 45%, transparent);
}
@media (min-width: 1000px){
.st-card.is-active,
.st-card:focus-within{
  border-color: color-mix(in srgb, var(--st-a) 45%, transparent);
  box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--st-a) 55%, transparent);
}
}

.st-art{
  height: 170px; padding: 14px 18px 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
/* a caixa manda: altura definida, o viewBox encaixa por dentro (meet) */
.st-art svg{ display: block; width: 100%; height: 100%; max-width: 300px; overflow: visible; }

.st-body{ padding: 6px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.st-time{
  margin: 0 0 6px;
  font: 600 11px/1 var(--ff-mono); letter-spacing: .16em;
  color: var(--st-a);
}
.st-card h3{
  margin: 0 0 10px;
  font: 600 clamp(19px, 1.7vw, 23px)/1.15 var(--ff-display);
  letter-spacing: -.01em;
}
.st-more{ display: flex; flex-direction: column; gap: 12px; flex: 1; }
.st-line{ margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(238,241,247,.74); }
.st-proof{
  align-self: flex-start;
  font: 500 10.5px/1.4 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--st-b); text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--st-b) 60%, transparent);
  padding-bottom: 2px;
}
.st-proof:hover{ border-bottom-style: solid; }
.st-cta{
  margin-top: auto; align-self: flex-start;
  font: 700 13.5px/1.2 var(--ff-ui);
  color: var(--st-ink); text-decoration: none;
  background: var(--st-a);
  padding: 11px 16px; border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.st-cta:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--st-a); }
.st-cta:focus-visible, .st-proof:focus-visible{ outline: 2px solid var(--st-a); outline-offset: 3px; }

.st-foot{
  margin-top: clamp(26px, 4vw, 40px);
  display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between;
}
.st-foot .re-micro{ margin: 0; }

/* ---- desenho de linha ---------------------------------------------------- */
.st-art .st-draw{ stroke-width: 2.2; }
.st-art .st-soft{ opacity: .55; }
.c-a{ stroke: var(--st-a); } .c-b{ stroke: var(--st-b); } .c-c{ stroke: var(--st-c); }
.c-w{ stroke: rgba(238,241,247,.78); } .c-s{ stroke: #9FC8F2; }
.st-dots, .st-win, .st-bulbs, .st-flame{ stroke: none; }
.st-dots.c-b{ fill: var(--st-b); }
.st-win.c-c{ fill: var(--st-c); }
.st-flame.c-c{ fill: var(--st-c); }
.st-fill{ stroke: none; opacity: .42; }
.st-fill.c-b{ fill: var(--st-b); } .st-fill.c-r{ fill: #F4A6C1; }
.st-bulbs circle:nth-child(odd){ fill: var(--st-c); }
.st-bulbs circle:nth-child(even){ fill: #F4A6C1; }
.st-win rect{ opacity: .55; }

/* Revelação: só esconde quando o JS montou (`data-ready`) e a secção ainda
   não entrou. pathLength="1" faz do traço inteiro um comprimento 1. */
.setores[data-ready] .st-draw{
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.5s cubic-bezier(.65,.05,.25,1);
  transition-delay: calc(var(--i, 0) * .12s + var(--d, 0) * 1s);
}
.setores[data-ready].is-in .st-draw{ stroke-dashoffset: 0; }
.setores[data-ready] .st-dots, .setores[data-ready] .st-win,
.setores[data-ready] .st-fill, .setores[data-ready] .st-flame,
.setores[data-ready] .st-bulbs{
  opacity: 0; transition: opacity .8s ease calc(var(--i, 0) * .12s + 1.1s);
}
.setores[data-ready].is-in .st-dots, .setores[data-ready].is-in .st-win,
.setores[data-ready].is-in .st-flame, .setores[data-ready].is-in .st-bulbs{ opacity: 1; }
.setores[data-ready].is-in .st-fill{ opacity: .42; }

/* ---- o pormenor vivo de cada hora --------------------------------------- */
.st-steam path, .st-bob, .st-waves, .st-sun, .st-win rect, .st-fish,
.st-flame, .st-bulbs circle{ transform-box: fill-box; transform-origin: 50% 100%; }
.st-steam path{ animation: st-steam 3.2s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1.6s); }
.st-bob{ transform-origin: 50% 90%; animation: st-bob 4.8s ease-in-out infinite; }
.st-waves{ animation: st-waves 3.6s linear infinite; }
.st-sun{ animation: st-sun 9s ease-in-out infinite; }
.st-win rect{ animation: st-win 5s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }
.st-fish{ transform-origin: 30% 50%; animation: st-fish 3.4s ease-in-out infinite; }
.st-flame{ animation: st-flame 1.3s ease-in-out infinite alternate; }
.st-bulbs circle{ transform-origin: 50% 50%; animation: st-bulb 2.4s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }

/* os ciclos só correm com a secção à vista (sem JS correm sempre — são baratos) */
.setores[data-ready]:not(.is-in) :is(.st-steam path, .st-bob, .st-waves, .st-sun, .st-win rect, .st-fish, .st-flame, .st-bulbs circle){
  animation-play-state: paused;
}

@keyframes st-steam{
  0%   { transform: translateY(4px);  opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: translateY(-10px); opacity: 0; }
}
@keyframes st-bob{
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50%      { transform: translateY(3px) rotate(1.6deg); }
}
@keyframes st-waves{ to { transform: translateX(30px); } }
@keyframes st-sun{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@keyframes st-win{
  0%, 100% { opacity: .38; }
  50%      { opacity: .95; }
}
@keyframes st-fish{
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-2.4deg); }
  60%      { transform: rotate(1.6deg); }
}
@keyframes st-flame{
  from { transform: scale(.86, .92); opacity: .75; }
  to   { transform: scale(1.06, 1.1); opacity: 1; }
}
@keyframes st-bulb{
  0%, 100% { opacity: .45; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* ---- desktop: acordeão horizontal ---------------------------------------- */
@media (min-width: 1000px){
  .st-day{ display: flex; gap: 12px; height: 520px; }
  .st-card{
    flex: 1 1 0; min-width: 0;
    transition: flex-grow .75s cubic-bezier(.65,.05,.25,1), border-color .5s ease, box-shadow .5s ease;
  }
  .st-card.is-active{ flex-grow: 2.7; }
  .st-art{ height: 250px; padding: 22px 22px 0; }
  .st-art svg{ max-width: 340px; }
  .st-body{ padding: 8px 24px 26px; }
  /* o conteúdo aberto tem largura fixa: o cartão revela-o, não o reflui */
  .st-more{ width: min(400px, 100%); min-width: 300px; }
  .st-card.is-active h3{ white-space: nowrap; }
  .st-card:not(.is-active) .st-more{
    opacity: 0; transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .st-card.is-active .st-more{
    opacity: 1; transform: none;
    transition: opacity .5s ease .3s, transform .6s cubic-bezier(.2,.7,.2,1) .3s;
  }
  /* estreito, o desenho fica centrado e só se vê o miolo */
  .st-card:not(.is-active) .st-art svg{ transform: scale(.92); transition: transform .6s ease; }
  .st-card:not(.is-active) h3{ font-size: 16px; hyphens: auto; }
  .st-card:not(.is-active) .st-body{ padding-inline: 16px; }
  .st-card:not(.is-active){ cursor: pointer; }
  /* fechado, o conteúdo está invisível: não pode receber o clique */
  .st-card:not(.is-active):not(:focus-within) .st-more{ pointer-events: none; }
}

/* ---- movimento reduzido: tudo desenhado, nada a mexer --------------------- */
@media (prefers-reduced-motion: reduce){
  .setores[data-ready] .st-draw{ stroke-dashoffset: 0; transition: none; }
  .setores[data-ready] :is(.st-dots, .st-win, .st-flame, .st-bulbs){ opacity: 1; transition: none; }
  .setores[data-ready] .st-fill{ opacity: .42; transition: none; }
  .st-steam path, .st-bob, .st-waves, .st-sun, .st-win rect, .st-fish, .st-flame, .st-bulbs circle{ animation: none; }
  .st-steam path{ opacity: .7; }
  .st-card, .st-card .st-more, .st-cta{ transition: none !important; }
}