/*
  CAPITULO 0 - CSS DO ZERO NESTE PROJETO:
  CSS e a linguagem da aparencia, mas reduzi-la a "cor e tamanho" seria pouco.
  Ela controla espaco, fluxo, profundidade, alinhamento, responsividade, estados visuais e ate ilusoes de material.

  COMO LER A SINTAXE COM CALMA:
  Um seletor identifica o alvo.
  Logo depois abrem as chaves { }.
  Dentro delas, cada linha normalmente tem `propriedade: valor;`.
  O ponto e virgula fecha uma declaracao.
  O dois pontos separa o nome da propriedade do valor escolhido.
  Virgulas podem agrupar seletores ou valores.
  Parentese aparecem em funcoes como `rgba()`, `var()`, `clamp()`, `calc()` e `translate()`.

  CONCEITOS FUNDAMENTAIS QUE ESTE ARQUIVO ENSINA:
  1. Reset e normalizacao.
  2. Variaveis globais com `--nome`.
  3. Layout com `flex` e `grid`.
  4. Posicionamento com `relative`, `absolute` e `fixed`.
  5. Profundidade com `z-index`, sombra e blur.
  6. Estados com `:hover`, `:active`, classes como `.is-open` e media queries.

  COMO ESTUDAR O CSS DESTE PROJETO:
  Primeiro descubra quem o seletor atinge.
  Depois pergunte quais propriedades sao de layout, quais sao de visual e quais sao de animacao.
  Por fim veja como esse seletor conversa com outros do mesmo grupo.
*/
/*
  GUIA DE LEITURA DO CSS DESTE PROJETO:
  CSS e a linguagem que define aparencia, espacamento, alinhamento, responsividade e animacao.
  A unidade basica de leitura e: `seletor { propriedade: valor; }`.
  O seletor diz "quem vai receber o estilo"; as propriedades dizem "o que muda"; e os valores dizem "como muda".
  Chaves `{}` abrem e fecham um bloco de regras. Dois pontos `:` separam propriedade e valor. Ponto e virgula `;` encerram cada declaracao.
  `.` indica classe, `#` indica id, `:` tambem aparece em pseudo-classes como `:hover`, e `::` em pseudo-elementos como `::before`.
  Neste arquivo voce tambem vai ver variaveis CSS (`--nome`) usadas com `var(--nome)`, a funcao `clamp()` para tamanhos fluidos,
  e `@media` para ensinar o layout a se adaptar a larguras diferentes de tela.
*/

/*
  RESET INICIAL E BOX MODEL:
  O seletor `*` alcanca todos os elementos; `*::before` e `*::after` alcancam pseudo-elementos gerados pelo proprio CSS.
  Aplicar `box-sizing: border-box` aqui muda a forma como largura e altura sao calculadas:
  borda e padding passam a entrar dentro da medida declarada, o que deixa a composicao muito mais previsivel.
  Esse tipo de reset evita surpresas quando dezenas de componentes diferentes precisam conviver no mesmo layout.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}


/*
  TOKENS GLOBAIS DO DESIGN:
  `:root` representa a raiz do documento e e um lugar excelente para declarar variaveis reutilizaveis do projeto inteiro.
  As propriedades que comecam com `--` sao custom properties do CSS.
  Em vez de repetir cores, sombras, raios e alturas manualmente em cada seletor,
  o autor centraliza esses valores aqui e depois os consome com `var(--nome-da-variavel)`.
  Isso deixa o visual mais consistente e reduz o risco de pequenas diferencas acidentais entre componentes.
*/
/*
  CAPITULO 1 - COMO FUNCIONAM AS VARIAVEIS CSS DESTE SISTEMA:
  O bloco `:root` e o cofre central do design system.
  Quase tudo o que se repete no projeto nasce aqui: cores, sombras, raios, alturas e curvas de animacao.

  ISSO ENSINA TRES IDEIAS IMPORTANTES:
  1. Repeticao demais gera manutencao ruim.
  2. Variaveis deixam o design coerente.
  3. Separar "valor" de "uso" ajuda a entender a intencao visual.

  EXEMPLO DE LEITURA:
  `--bg: #040506;`
  `--bg` e o nome da variavel.
  `#040506` e o valor hexadecimal da cor.
  O navegador nao aplica isso sozinho em nada.
  Mais tarde outro seletor dira algo como `background: var(--bg);`.
*/
:root {
  
/* Grupo 1: paleta-base, superficies e contraste do sistema. */
  --bg: #040506;
  --panel: rgba(19, 20, 24, 0.72);
  --panel-strong: rgba(14, 16, 20, 0.88);
  --panel-soft: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f5f7fa;
  --muted: rgba(245, 247, 250, 0.72);
  --soft: rgba(245, 247, 250, 0.46);
  
/* Grupo 2: profundidade e sombra, usados para separar camadas visuais. */
  --shadow: 0 24px 56px rgba(0, 0, 0, 0.46);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);
  
/* Grupo 3: medidas estruturais compartilhadas entre topo, Dock e largura maxima. */
  --dock-height: 104px;
  --menu-height: 42px;
  
/* Grupo 4: escala de cantos arredondados para janelas, chips, cards e botoes. */
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  
/* Grupo 5: movimento, brilho e comportamento geral do sistema visual. */
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  --grid-alpha: rgba(255, 255, 255, 0.075);
  --content-width: min(1440px, calc(100vw - 40px));
  color-scheme: dark;
}


/*
  BASE FISICA DO DOCUMENTO:
  `html` e `body` formam a base sobre a qual toda a interface sera desenhada.
  Dar `width: 100%` e `min-height: 100%` ajuda o documento a ocupar a viewport inteira,
  o que e essencial em interfaces que querem se comportar como "aplicativo em tela cheia".
*/
html,
body {
  width: 100%;
  min-height: 100%;
}


/*
  CORPO VISUAL DA PAGINA:
  O `body` remove a margem padrao do navegador, aplica a cor de fundo principal,
  define a cor-base do texto e escolhe a familia tipografica herdada pela maior parte da interface.
  `overflow: hidden` impede barras de rolagem indesejadas no modo desktop e reforca a sensacao de sistema fechado.
*/
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
}


/*
  HERANCA TIPOGRAFICA NOS CONTROLES:
  Botoes, links, inputs e textareas costumam ter estilos nativos diferentes entre navegadores.
  `font: inherit` diz para todos eles usarem a mesma configuracao de fonte do contexto pai,
  evitando que um formulario pareca "solto" do restante da interface.
*/
button,
a,
input,
textarea {
  font: inherit;
}


/*
  NORMALIZACAO DE CONTROLES NATIVOS:
  Aqui o autor remove aparencias padrao de botao e link para construir uma linguagem visual propria.
  `background: transparent`, `border: 0` e `text-decoration: none` nao mudam a funcao do elemento,
  mas limpam o visual original para que o CSS do projeto assuma o controle total da apresentacao.
*/
button {
  border: 0;
  background: transparent;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}


/*
  COMPORTAMENTO BASICO DE MIDIA:
  `display: block` remove espacos estranhos de linha que imagens inline costumam gerar.
  `max-width: 100%` impede que a arte ultrapasse a largura disponivel no elemento pai,
  o que protege o layout contra estouros horizontais.
*/
img,
svg {
  display: block;
  max-width: 100%;
}


/*
  SPRITE SVG INVISIVEL:
  O HTML carrega uma biblioteca de simbolos, mas essa biblioteca nao deve ocupar espaco visivel.
  Por isso o CSS a esconde com tamanho zero, opacidade zero e `pointer-events: none`.
  O desenho real so aparece quando outro SVG usa `<use href="#algum-simbolo">`.
*/
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}


/*
  CASCA PRINCIPAL DA APLICACAO:
  Este contenedor cria um contexto relativo para elementos absolutos e fixos da interface.
  Em layouts ricos em camadas, definir onde cada coisa passa a se referenciar e fundamental.
*/
.app-shell {
  position: relative;
  /* Sob o zoom da mesa, 100vh resolve em px reais (metade da altura
     virtual); a variavel definida pelo JS entrega a altura certa. */
  min-height: var(--desktop-viewport-h, 100vh);
}


/*
  TOPO DO SISTEMA:
  Este bloco fixa a barra superior, define empilhamento com `z-index`, cria espacamentos internos e aplica borda, raio e sombras.
  `backdrop-filter` desfoca o que estiver atras da barra, reforcando o efeito de vidro.
  O valor de `inset` condensa top/right/bottom/left em uma unica propriedade, algo comum em interfaces modernas.
*/
/*
  CAPITULO 2 - ESTUDO PROFUNDO DA BARRA SUPERIOR:
  Este e um bloco excelente para estudar varias propriedades ao mesmo tempo.
  `position: fixed` prende a barra na viewport.
  `inset` resume coordenadas.
  `z-index` organiza a camada.
  `display: flex` coloca filhos em linha.
  `justify-content` separa esquerda e direita.
  `gap` cria espaco entre itens.
  `padding` gera espaco interno.
  `border`, `border-radius`, `background`, `backdrop-filter` e `box-shadow`
  trabalham juntos para criar o efeito de vidro.

  DICA DE ESTUDO:
  sempre tente separar o que esta relacionado a geometria,
  o que esta relacionado a visual
  e o que esta relacionado a profundidade.
*/
.system-bar {
  position: fixed;
  inset: 0px 0px auto;
  z-index: 1700;
  height: var(--menu-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 18px 0 10px;
  border-radius: 0px;
  background:
    linear-gradient(90deg, rgba(15, 16, 21, 0.94), rgba(18, 20, 27, 0.82) 32%, rgba(13, 18, 20, 0.88) 68%, rgba(18, 20, 26, 0.94)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 65%);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.system-bar__left,
.system-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}


/*
  BOTAO-ICONE DO TOPO:
  `display: grid` junto com `place-items: center` centraliza o glifo em dois eixos com sintaxe curta.
  As transicoes definem quais propriedades vao animar quando hover ou active entrarem em cena.
*/
.system-bar__apple {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: rgba(206, 206, 206, 0.92);
  transition: background 180ms ease, transform 180ms ease;
  font-weight: 600;
}

.system-bar__apple:hover,
.system-bar__menu button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.system-bar__apple:active,
.system-bar__menu button:active {
  transform: translateY(1px);
}

.system-bar__logo-glyph {
  font-size: 17px;
  line-height: 1;
  transform: translateY(-1px);
}


/*
  SELO DE IDENTIDADE:
  Este pequeno chip serve como rotulo do sistema e tambem ajuda a preencher a composicao da barra superior.
  O `border-radius: 999px` e um truque comum para transformar qualquer caixa em formato de capsula.
*/
.system-bar__badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.10em;
}


/*
  MENU HORIZONTAL DO TOPO:
  O menu usa flexbox para alinhar botoes na horizontal e manter espacamento uniforme.
  Os estados de hover e active nao trocam a estrutura, apenas refinam cor, fundo e deslocamento para simular resposta tatil.
*/
.system-bar__menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.system-bar__menu button {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.system-bar__menu button:hover {
  color: var(--text);
}

.system-chip,
.system-clock {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: var(--muted);
}

.system-clock {
  min-width: 156px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}


/*
  AREA UTIL DO DESKTOP:
  O desktop reserva espaco no topo para a barra do sistema e embaixo para a Dock.
  O calculo com `calc()` combina variaveis e numeros fixos para evitar sobreposicoes acidentais.
*/
.desktop {
  position: relative;
  min-height: var(--desktop-viewport-h, 100vh);
  padding-top: calc(var(--menu-height) + 44px);
  padding-bottom: calc(var(--dock-height) + 24px);
  overflow: hidden;
}


/*
  MALHA VISUAL DE FUNDO:
  O fundo e construido com duas `linear-gradient`, uma horizontal e outra vertical.
  `background-size` controla o espacamento entre as linhas, e `mask-image` suaviza a aparicao dessa malha ao longo da tela.
*/
.desktop__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-alpha) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-alpha) 1px, transparent 1px);
  background-size: clamp(56px, 4vw, 88px) clamp(56px, 4vw, 88px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.96));
}


/*
  OBJETOS ARRASTAVEIS:
  Elementos com `position: absolute` podem ser reposicionados livremente por coordenadas.
  `cursor: grab`, `user-select: none` e `touch-action: none` ajudam a transformar esses blocos em objetos manipulaveis.
*/
/*
  CAPITULO 3 - OBJETOS ARRASTAVEIS E POSICIONAMENTO ABSOLUTO:
  Quando voce ve `position: absolute`, significa que o elemento sai do fluxo normal e passa a obedecer coordenadas.
  Isso e essencial para icones de desktop, janelas flutuantes e camadas livres.
  `cursor: grab`, `user-select: none` e `touch-action: none` nao mudam a posicao,
  mas refinam a experiencia de interacao.
*/
.desktop-item,
.art-layer {
  position: absolute;
  cursor: grab;
  user-select: none;
  touch-action: none;
}


/*
  ATALHOS DO DESKTOP:
  O seletor principal define largura fluida com `clamp()`, origem de transformacao central e algumas otimizacoes de renderizacao.
  `will-change` avisa ao navegador quais propriedades tendem a mudar durante arrastes e animacoes.
*/
.desktop-item {
  z-index: 18;
  width: clamp(120px, 10vw, 150px);
  padding: 0;
  text-align: center;
  transform-origin: center center;
  transition: transform 140ms var(--ease-fluid), filter 140ms ease, opacity 140ms ease;
  will-change: left, top, transform;
}

.desktop-item__icon {
  display: block;
  width: clamp(88px, 7vw, 118px);
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
  transition: transform 140ms var(--ease-fluid), box-shadow 140ms ease, filter 140ms ease;
}

.desktop-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.desktop-item__caption {
  display: inline-block;
  margin-top: 8px;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 7px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms ease, text-shadow 120ms ease;
}

.desktop-item:hover .desktop-item__icon {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* Selecao como no macOS: moldura no icone e rotulo azul. */
.desktop-item.is-selected .desktop-item__icon {
  box-shadow:
    0 0 0 3px rgba(116, 169, 255, 0.55),
    0 16px 30px rgba(0, 0, 0, 0.45);
}

.desktop-item.is-selected .desktop-item__caption {
  background: #0258d0;
  text-shadow: none;
}

.desktop-item.is-pressed {
  transform: scale(0.994);
}

.desktop-item.is-dragging,
.art-layer.is-dragging {
  cursor: grabbing;
  transition: none !important;
}

.desktop-item.is-dragging {
  z-index: 26;
  filter: brightness(1.08);
}

/*
  POSICIONAMENTO INICIAL DAS PASTAS:
  Cada modificador (`--identity`, `--social` etc.) define a coordenada inicial visual de um atalho.
  Essas regras nao impedem o arraste; elas apenas entregam uma composicao base antes de qualquer edicao manual do layout.
*/
.desktop-item--identity {
  left: 172px;
  top: 274px;
}

.desktop-item--social {
  left: 348px;
  top: 238px;
}

.desktop-item--manipulation {
  left: 286px;
  top: 444px;
}

.desktop-item--weddings {
  right: 314px;
  top: 184px;
}

.desktop-item--events {
  right: 168px;
  top: 356px;
}

.desktop-item--videos {
  right: 290px;
  top: 522px;
}


/*
  CONTAINER DA ARTE CENTRAL:
  Este bloco funciona como referencia para as camadas internas.
  Como as layers usam posicionamento absoluto, elas precisam de um ancestral relativo para saber de onde medir `left`, `top` e `width`.
*/
/*
  CAPITULO 4 - A COMPOSICAO CENTRAL COMO EXERCICIO DE CAMADAS:
  A hero central ensina a pensar em composicao.
  O contenedor recebe `position: relative`.
  As camadas internas recebem `position: absolute`.
  Isso cria um pequeno universo local onde `left`, `top` e `width` podem ser medidos em relacao ao pai.
*/
.hero-stack {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 840px;
  height: 700px;
  transform: translate(-50%, -50%);
  z-index: 32;
  pointer-events: none;
}


/*
  CAMADAS DA COMPOSICAO HERO:
  Cada layer recebe coordenadas absolutas e uma largura propria, o que permite montar uma colagem complexa.
  O arquivo combina independencia de movimento com uma ordem visual fixa, preservando a leitura da arte mesmo quando o usuario rearranja as pecas.
*/
.art-layer {
  border-radius: 24px;
  padding: 0;
  pointer-events: auto;
  background: transparent;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.42));
  transform-origin: center center;
  transition: transform 140ms var(--ease-fluid), filter 140ms ease;
  will-change: left, top, transform;
}

.art-layer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.art-layer:hover {
  transform: none;
}

.art-layer--01 {
  left: 10%;
  top: 15%;
  width: 78%;
  z-index: 33;
}

.art-layer--02 {
  left: 18%;
  top: 42%;
  width: 16%;
  z-index: 34;
}

.art-layer--03 {
  left: 55%;
  top: 58%;
  width: 24%;
  z-index: 35;
  rotate: -28deg;
}

.art-layer--04 {
  left: 20%;
  top: 5%;
  width: 55%;
  z-index: 36;
}

.art-layer--05 {
  left: 24%;
  top: 8%;
  width: 40%;
  filter: drop-shadow(0 26px 32px rgba(0, 0, 0, 0.44));
  z-index: 37;
}

.art-layer--06 {
  left: 53%;
  top: 42%;
  width: 5%;
  z-index: 38;
}

.art-layer--07 {
  left: 60%;
  top: 35%;
  width: 4%;
  z-index: 39;
}

.art-layer--08 {
  left: 27%;
  top: 5%;
  width: 45%;
  z-index: 40;
}

.art-layer--09 {
  left: 20%;
  top: 64%;
  width: 14%;
  z-index: 41;
}

.art-layer--10 {
  left: 24%;
  top: 70%;
  width: 5%;
  z-index: 42;
}


/*
  PALCO DAS JANELAS:
  Este contenedor segura Finder, Notes e Safari.
  O equilibrio de `z-index` aqui e importante: janelas precisam ficar acima do desktop, mas ainda abaixo de feedbacks e alguns elementos soberanos.
*/
.window-space {
  position: absolute;
  inset: 0;
  z-index: 280;
  pointer-events: none;
}


/*
  CASCA PADRAO DAS JANELAS:
  Todas as janelas compartilham vidro, borda, sombra, animacoes de foco e estados como maximizado, arrastando ou fechando.
  Essa base comum evita duplicacao e faz apps diferentes parecerem membros da mesma familia visual.
*/
/*
  CAPITULO 5 - A JANELA COMO COMPONENTE COMPLETO:
  Este bloco e valioso porque mostra um componente grande de verdade.
  Aqui aparecem:
  - layout estrutural,
  - borda,
  - fundo,
  - sombra,
  - animacao,
  - estados extras por classe.

  O mais importante para estudo e perceber que um componente nao e uma unica regra.
  Ele e uma familia de regras que se completam.
*/
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(14, 16, 20, 0.92);
  backdrop-filter: blur(28px) saturate(1.45);
  box-shadow: 0 30px 68px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.988);
  transform-origin: center center;
  will-change: left, top, width, height, transform, opacity;
  transition:
    opacity 220ms ease,
    transform 260ms var(--ease-fluid),
    border-radius 260ms var(--ease-fluid);
}

.window-space > .window {
  pointer-events: auto;
}

.window.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.window.is-hidden {
  pointer-events: none;
}

.window.is-focused {
  border-color: rgba(255, 255, 255, 0.18);
}

.window.is-closing {
  opacity: 0;
  transform: translateY(4px) scale(0.92);
}

.window.is-maximized {
  border-radius: 26px;
}

.window.is-animating-geometry {
  transition:
    left 300ms var(--ease-fluid),
    top 300ms var(--ease-fluid),
    width 300ms var(--ease-fluid),
    height 300ms var(--ease-fluid),
    opacity 220ms ease,
    transform 260ms var(--ease-fluid),
    border-radius 260ms var(--ease-fluid);
}

.window.is-dragging {
  box-shadow: 0 38px 88px rgba(0, 0, 0, 0.5);
}

.window-ghost {
  position: fixed;
  z-index: 1900;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 20, 24, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition:
    top 320ms var(--ease-fluid),
    left 320ms var(--ease-fluid),
    width 320ms var(--ease-fluid),
    height 320ms var(--ease-fluid),
    opacity 320ms ease,
    transform 320ms var(--ease-fluid);
}

.window__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
}

.window.is-dragging .window__chrome {
  cursor: grabbing;
}

.window__traffic {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.traffic-light {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition: transform 180ms ease, filter 180ms ease;
}

.traffic-light:hover {
  transform: scale(1.1);
  filter: brightness(1.05);
}

.traffic-light--close { background: #ff5f57; }
.traffic-light--minimize { background: #ffbd2e; }
.traffic-light--maximize { background: #28c840; }

.window__titlegroup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.window__appicon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.window__appicon svg {
  width: 18px;
  height: 18px;
}

.window__appicon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
}

.window__titles {
  min-width: 0;
}

.window__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Sora", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
}

.window__subtitle {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--soft);
  font-size: 0.75rem;
}

.window__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chrome-tool {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  transition: background 180ms ease, color 180ms ease;
}

.chrome-tool:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.chrome-tool svg {
  width: 16px;
  height: 16px;
}

.window__main {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}


/*
  APP FINDER FICTICIO:
  Aqui comecam as regras especificas da janela que simula um explorador de arquivos.
  A composicao mistura sidebar, toolbar, breadcrumb, busca, cards e status bar para reproduzir a sensacao de navegacao por pastas.
*/
/*
  CAPITULO 6 - ESTUDO DO FINDER E DA IDEIA DE SUBINTERFACE:
  O Finder fake e quase um miniaplicativo dentro do site.
  Ele tem sidebar, toolbar, busca, breadcrumb, cards e barra de status.
  Por isso esta secao e excelente para estudar nomenclatura BEM-like e composicao em camadas menores.
*/
.finder {
  display: grid;
  grid-template-columns: 242px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.finder__sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(27, 21, 34, 0.58);
  padding: 18px 16px;
  overflow: auto;
}

.finder__sidebar-group + .finder__sidebar-group {
  margin-top: 24px;
}

.finder__sidebar-title {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.finder__sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--muted);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.finder__sidebar-item strong {
  font-weight: 500;
}

.finder__sidebar-item span:last-child {
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.82rem;
}

.finder__sidebar-item.is-active,
.finder__sidebar-item:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
}

.finder__canvas {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: rgba(246, 247, 249, 0.95);
  color: #0f1318;
}

.finder__toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.7);
}

.finder__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.finder__nav button,
.finder__display button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: rgba(15, 19, 24, 0.58);
  transition: background 180ms ease, color 180ms ease;
}

.finder__nav button:hover,
.finder__display button:hover {
  background: rgba(15, 19, 24, 0.08);
  color: rgba(15, 19, 24, 0.9);
}

.finder__nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

.finder__nav svg,
.finder__display svg {
  width: 16px;
  height: 16px;
}

.finder__path {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 14px;
  min-height: 40px;
  border-radius: 14px;
  background: rgba(15, 19, 24, 0.05);
}

.finder__path-segment {
  max-width: 176px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(15, 19, 24, 0.76);
  font-size: 0.88rem;
}

.finder__path-segment.is-current {
  font-weight: 600;
  color: rgba(15, 19, 24, 0.96);
}

.finder__path-arrow {
  color: rgba(15, 19, 24, 0.32);
  font-size: 0.82rem;
}

.finder__search {
  position: relative;
  flex: 0 0 190px;
}

.finder__search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  color: rgba(15, 19, 24, 0.4);
  transform: translateY(-50%);
}

.finder__search input {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(15, 19, 24, 0.08);
  border-radius: 14px;
  padding: 0 14px 0 34px;
  background: rgba(15, 19, 24, 0.04);
  color: rgba(15, 19, 24, 0.86);
  outline: none;
}

.finder__search input::placeholder {
  color: rgba(15, 19, 24, 0.45);
}

.finder__display {
  display: flex;
  align-items: center;
  gap: 6px;
}

.finder__body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 22px 22px 0;
  overflow: auto;
}

.finder__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.finder__hero h3 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 1.4rem;
}

.finder__hero p {
  margin: 8px 0 0;
  max-width: 56ch;
  color: rgba(15, 19, 24, 0.62);
  line-height: 1.5;
}

.finder__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.finder__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15, 19, 24, 0.05);
  color: rgba(15, 19, 24, 0.72);
  font-size: 0.82rem;
}

.finder__grid {
  display: grid;
  /* auto-fill + teto de largura: com poucos itens os cards nao viram gigantes */
  grid-template-columns: repeat(auto-fill, minmax(180px, 236px));
  justify-content: start;
  gap: 16px;
  padding-bottom: 22px;
}

.finder-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 172px;
  padding: 16px;
  border: 1px solid rgba(15, 19, 24, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 36px rgba(18, 20, 24, 0.06);
  text-align: left;
  transition: transform 220ms var(--ease-fluid), box-shadow 220ms ease, border-color 220ms ease;
}

.finder-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(18, 20, 24, 0.12);
  border-color: rgba(15, 19, 24, 0.12);
}

.finder-card.is-selected {
  border-color: rgba(18, 102, 255, 0.34);
  box-shadow: 0 18px 36px rgba(18, 102, 255, 0.12);
}

.finder-card__preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.26), transparent 20%),
    linear-gradient(135deg, var(--card-accent-soft), var(--card-accent-strong));
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.finder-card__preview--folder,
.finder-card__preview--file {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
}

.finder-card__preview--file svg {
  width: 54%;
  height: 54%;
}

.finder-card__preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

.finder-card__preview-image--folder {
  width: 68%;
  height: 68%;
}

.finder-card__type {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 19, 24, 0.08);
  color: rgba(15, 19, 24, 0.58);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.finder-card__title {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: rgba(15, 19, 24, 0.92);
}

.finder-card__meta {
  color: rgba(15, 19, 24, 0.56);
  font-size: 0.82rem;
  line-height: 1.45;
}

.finder__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 52px;
  padding: 0 18px;
  border-top: 1px solid rgba(15, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(15, 19, 24, 0.65);
  font-size: 0.82rem;
}

.finder__status-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder__status-detail {
  text-align: right;
  color: rgba(15, 19, 24, 0.5);
}


/*
  APP DE NOTAS:
  Este conjunto de seletores estiliza uma janela de leitura, pensada como curriculo/apresentacao.
  Repare como o CSS separa sidebar, toolbar, estatisticas e folha de conteudo, o que imita a organizacao de um app real.
*/
/*
  CAPITULO 7 - ESTUDO DO APP DE NOTAS:
  O app de notas e uma vitrine boa para entender layout editorial:
  sidebar de colecoes,
  cabecalho interno,
  estatisticas
  e folha de leitura.
*/
.notes {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: #fbfaf8;
  color: #15181d;
}

.notes__sidebar {
  padding: 18px 16px;
  border-right: 1px solid rgba(21, 24, 29, 0.08);
  background: linear-gradient(180deg, rgba(255, 230, 144, 0.18), rgba(246, 240, 213, 0.72));
}

.notes__sidebar h3,
.notes__editor h3 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 1rem;
}

.notes__collections {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.notes__collections li + li {
  margin-top: 8px;
}

.notes__collection {
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  color: rgba(21, 24, 29, 0.72);
  background: rgba(255, 255, 255, 0.48);
}

.notes__collection.is-active {
  background: rgba(255, 205, 74, 0.78);
  color: rgba(21, 24, 29, 0.9);
}

.notes__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.notes__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(21, 24, 29, 0.08);
  color: rgba(21, 24, 29, 0.68);
  font-size: 0.78rem;
}

.notes__editor {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(252, 251, 248, 0.98));
}

.notes__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.notes__stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.notes__stats span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(21, 24, 29, 0.06);
  color: rgba(21, 24, 29, 0.66);
  font-size: 0.8rem;
}

.notes__sheet {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid rgba(21, 24, 29, 0.08);
  border-radius: 22px;
  padding: 24px;
  background: linear-gradient(180deg, #fffdf6, #fffefb);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  outline: none;
  overflow: auto;
  line-height: 1.65;
  color: rgba(21, 24, 29, 0.84);
}

.notes__sheet--readonly {
  user-select: text;
  cursor: default;
}

.notes__sheet:empty::before {
  content: attr(data-placeholder);
  color: rgba(21, 24, 29, 0.34);
}


/*
  APP DE NAVEGADOR:
  O "Safari fake" recebe topbar, barra de endereco, iframe e rodape proprio.
  O iframe isola a pagina interna carregada, permitindo testar layouts de projeto sem desmontar a interface principal do desktop.
*/
/*
  CAPITULO 8 - ESTUDO DO NAVEGADOR INTERNO:
  O navegador fake mostra como um componente pode hospedar outro documento via `iframe`.
  Isso permite uma experiencia de "janela dentro da janela" sem misturar tudo no mesmo DOM principal.
*/
.browser {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #edf1f7;
}

.browser__topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(15, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.browser__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.browser__nav button,
.browser__actions button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: rgba(15, 19, 24, 0.58);
  transition: background 180ms ease, color 180ms ease;
}

.browser__nav button:hover,
.browser__actions button:hover {
  background: rgba(15, 19, 24, 0.08);
  color: rgba(15, 19, 24, 0.92);
}

.browser__address {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15, 19, 24, 0.06);
  color: rgba(15, 19, 24, 0.62);
  font-size: 0.85rem;
}

.browser__address .lock {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2dc653;
  box-shadow: 0 0 0 4px rgba(45, 198, 83, 0.12);
}

.browser__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.browser__frame {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background: #090c11;
}

.browser__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 0 16px;
  border-top: 1px solid rgba(15, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(15, 19, 24, 0.58);
  font-size: 0.8rem;
}


/*
  DOCK DO DESKTOP:
  Esta secao define a barra inferior, seu efeito de vidro e o comportamento visual dos icones.
  Estados como hover, ativo e minimizado ajudam a comunicar o que esta aberto, fixo ou apenas em foco naquele momento.
*/
/*
  CAPITULO 9 - ESTUDO DA DOCK COMO SISTEMA VISUAL E INTERATIVO:
  A Dock nao e apenas uma barra com icones.
  Ela combina alinhamento, glassmorphism, escalonamento por hover, indicadores e secoes dinamicas.
  Isso faz dela um bom estudo de componente responsivo e interativo.
*/
.dock-shell {
  position: fixed;
  inset: auto 0 0;
  z-index: 2200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(var(--dock-height) + 34px);
  padding-bottom: 18px;
  box-sizing: border-box;
  pointer-events: none;
}

.dock {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 78px;
  padding: 10px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)),
    rgba(18, 20, 24, 0.56);
  backdrop-filter: blur(32px) saturate(1.55);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: auto;
  transform-origin: center bottom;
  transition:
    transform 300ms var(--ease-fluid),
    opacity 240ms ease,
    filter 240ms ease;
}

.dock__section {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
}

.dock__section--running:empty {
  display: none;
}

.dock__divider {
  width: 1px;
  height: 54px;
  align-self: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.dock-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  transform-origin: center bottom;
  transform: translateY(calc((1 - var(--dock-scale, 1)) * 10px)) scale(var(--dock-scale, 1));
  transition:
    transform 150ms var(--ease-fluid),
    filter 150ms ease;
}

.dock-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: translateX(-50%) scale(0);
  transition: transform 180ms ease, background 180ms ease;
}

.dock-item.is-active::after,
.dock-item.is-minimized::after {
  transform: translateX(-50%) scale(1);
}

.dock-item.is-minimized::after {
  background: #7fd8ff;
}

.dock-item:hover {
  filter: brightness(1.02);
}

.dock-item svg {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.dock-item__icon-image {
  width: 90%;
  height: 90%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.dock-item--accent {
  background: transparent;
}

#dock-running:empty + .dock__divider {
  display: none;
}

.dock-item--running {
  width: 58px;
}

.dock-item__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px);
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(10, 11, 14, 0.9);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.76rem;
  line-height: 28px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.dock-item:hover .dock-item__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dock-item__mini {
  width: 42px;
  height: 42px;
}

.dock-item__mini-image {
  display: block;
  object-fit: contain;
  border-radius: 7px;
  -webkit-user-drag: none;
}


/*
  OCULTACAO PREVENTIVA DO MOBILE:
  A interface mobile ja existe no HTML, mas permanece fora da tela enquanto o desktop for o modo principal.
  Isso evita duplicacao visual e deixa a troca de experiencia sob controle dos breakpoints.
*/
.mobile-panel,
.mobile-sheet {
  display: none;
}


/*
  FEEDBACKS RAPIDOS:
  Os toasts sao pequenos avisos flutuantes.
  O CSS cuida de posicionamento, opacidade inicial e animacao de entrada/saida para que a mensagem apareca sem interromper a navegacao.
*/
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: calc(var(--dock-height) + 28px);
  z-index: 2300;
  display: grid;
  gap: 10px;
  /* Avisos nunca bloqueiam cliques no que esta por baixo. */
  pointer-events: none;
}

.toast {
  min-width: 220px;
  max-width: 300px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(18, 20, 24, 0.78);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-soft);
  color: var(--muted);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-family: "Sora", sans-serif;
  font-size: 0.88rem;
}


/*
  BREAKPOINT INTERMEDIARIO:
  Quando a largura encolhe um pouco, o layout ainda tenta continuar "desktop", mas com compressao.
  Aqui o projeto esconde menu menos essencial, reposiciona atalhos e reduz o hero para manter respiracao visual.
*/
@media (max-width: 1180px) {
  /*
  CAPITULO 2 - ESTUDO PROFUNDO DA BARRA SUPERIOR:
  Este e um bloco excelente para estudar varias propriedades ao mesmo tempo.
  `position: fixed` prende a barra na viewport.
  `inset` resume coordenadas.
  `z-index` organiza a camada.
  `display: flex` coloca filhos em linha.
  `justify-content` separa esquerda e direita.
  `gap` cria espaco entre itens.
  `padding` gera espaco interno.
  `border`, `border-radius`, `background`, `backdrop-filter` e `box-shadow`
  trabalham juntos para criar o efeito de vidro.

  DICA DE ESTUDO:
  sempre tente separar o que esta relacionado a geometria,
  o que esta relacionado a visual
  e o que esta relacionado a profundidade.
*/
.system-bar {
    inset: 12px 12px auto;
    padding: 0 14px 0 10px;
  }

  .system-bar__menu {
    display: none;
  }

  .desktop-item--identity { left: 74px; top: 246px; }
  .desktop-item--social { left: 228px; top: 226px; }
  .desktop-item--manipulation { left: 182px; top: 408px; }
  .desktop-item--weddings { right: 150px; top: 176px; }
  .desktop-item--events { right: 48px; top: 330px; }
  .desktop-item--videos { right: 166px; top: 490px; }

  /*
  CAPITULO 4 - A COMPOSICAO CENTRAL COMO EXERCICIO DE CAMADAS:
  A hero central ensina a pensar em composicao.
  O contenedor recebe `position: relative`.
  As camadas internas recebem `position: absolute`.
  Isso cria um pequeno universo local onde `left`, `top` e `width` podem ser medidos em relacao ao pai.
*/
/* (removido: o zoom da mesa cuida do tamanho da arte no desktop) */

  /*
  CAPITULO 6 - ESTUDO DO FINDER E DA IDEIA DE SUBINTERFACE:
  O Finder fake e quase um miniaplicativo dentro do site.
  Ele tem sidebar, toolbar, busca, breadcrumb, cards e barra de status.
  Por isso esta secao e excelente para estudar nomenclatura BEM-like e composicao em camadas menores.
*/
.finder {
    grid-template-columns: 212px minmax(0, 1fr);
  }
}


/*
  BREAKPOINT DE TABLET:
  Nesta faixa o layout continua fiel ao desktop, so que com janelas mais compactas e menos sobra lateral.
  E um passo de transicao entre a mesa completa e a troca total de paradigma que vem no mobile.
*/
@media (max-width: 960px) {
  .desktop {
    padding-bottom: calc(var(--dock-height) + 14px);
  }

  /*
  CAPITULO 4 - A COMPOSICAO CENTRAL COMO EXERCICIO DE CAMADAS:
  A hero central ensina a pensar em composicao.
  O contenedor recebe `position: relative`.
  As camadas internas recebem `position: absolute`.
  Isso cria um pequeno universo local onde `left`, `top` e `width` podem ser medidos em relacao ao pai.
*/
/* (removido: o zoom da mesa cuida do tamanho da arte no desktop) */

  /*
  CAPITULO 5 - A JANELA COMO COMPONENTE COMPLETO:
  Este bloco e valioso porque mostra um componente grande de verdade.
  Aqui aparecem:
  - layout estrutural,
  - borda,
  - fundo,
  - sombra,
  - animacao,
  - estados extras por classe.

  O mais importante para estudo e perceber que um componente nao e uma unica regra.
  Ele e uma familia de regras que se completam.
*/
.window {
    border-radius: 22px;
  }

  .finder,
  /*
  CAPITULO 7 - ESTUDO DO APP DE NOTAS:
  O app de notas e uma vitrine boa para entender layout editorial:
  sidebar de colecoes,
  cabecalho interno,
  estatisticas
  e folha de leitura.
*/
.notes {
    grid-template-columns: 198px minmax(0, 1fr);
  }

  .finder__toolbar {
    flex-wrap: wrap;
  }

  .finder__search {
    flex: 1 1 220px;
  }

  .dock {
    transform: scale(0.94);
    transform-origin: center bottom;
  }
}


/*
  BREAKPOINT MOBILE PRINCIPAL:
  Aqui a estrategia muda de verdade.
  A Dock desktop some, os atalhos grandes desaparecem e entra a experiencia inspirada em smartphone.
  Em vez de so diminuir tudo, o projeto troca de estrutura para respeitar melhor o contexto de uso em telas pequenas.
*/
/*
  CAPITULO 10 - O QUE UMA MEDIA QUERY ENSINA AQUI:
  Media query e a maneira que o CSS encontra para perguntar:
  "se a tela tiver ate tal largura, devo mudar minha estrategia?"

  Aqui nao acontece so uma reducao de escala.
  O projeto muda de paradigma:
  partes desktop desaparecem
  e entra uma experiencia mobile com outra linguagem de interface.
*/
@media (max-width: 768px) {
  body {
    overflow: auto;
  }

  /*
  CAPITULO 2 - ESTUDO PROFUNDO DA BARRA SUPERIOR:
  Este e um bloco excelente para estudar varias propriedades ao mesmo tempo.
  `position: fixed` prende a barra na viewport.
  `inset` resume coordenadas.
  `z-index` organiza a camada.
  `display: flex` coloca filhos em linha.
  `justify-content` separa esquerda e direita.
  `gap` cria espaco entre itens.
  `padding` gera espaco interno.
  `border`, `border-radius`, `background`, `backdrop-filter` e `box-shadow`
  trabalham juntos para criar o efeito de vidro.

  DICA DE ESTUDO:
  sempre tente separar o que esta relacionado a geometria,
  o que esta relacionado a visual
  e o que esta relacionado a profundidade.
*/
.system-bar {
    inset: 12px 12px auto;
    justify-content: space-between;
    padding: 0 12px 0 8px;
  }

  .system-bar__badge {
    display: none;
  }

  .system-chip:first-child {
    display: none;
  }

  .desktop {
    min-height: 100svh;
    padding-top: calc(var(--menu-height) + 34px);
    padding-bottom: 22px;
    overflow: hidden;
  }

  .desktop-item {
    display: none;
  }

  /*
  CAPITULO 4 - A COMPOSICAO CENTRAL COMO EXERCICIO DE CAMADAS:
  A hero central ensina a pensar em composicao.
  O contenedor recebe `position: relative`.
  As camadas internas recebem `position: absolute`.
  Isso cria um pequeno universo local onde `left`, `top` e `width` podem ser medidos em relacao ao pai.
*/
.hero-stack {
    top: 61%;
    width: min(340px, 72vw);
    height: 290px;
    opacity: 0.94;
  }

  .window__chrome {
    padding: 12px 14px;
  }

  /*
  CAPITULO 6 - ESTUDO DO FINDER E DA IDEIA DE SUBINTERFACE:
  O Finder fake e quase um miniaplicativo dentro do site.
  Ele tem sidebar, toolbar, busca, breadcrumb, cards e barra de status.
  Por isso esta secao e excelente para estudar nomenclatura BEM-like e composicao em camadas menores.
*/
.finder {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .finder__sidebar,
  .notes__sidebar {
    display: none;
  }

  .finder,
  /*
  CAPITULO 7 - ESTUDO DO APP DE NOTAS:
  O app de notas e uma vitrine boa para entender layout editorial:
  sidebar de colecoes,
  cabecalho interno,
  estatisticas
  e folha de leitura.
*/
.notes {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
  CAPITULO 9 - ESTUDO DA DOCK COMO SISTEMA VISUAL E INTERATIVO:
  A Dock nao e apenas uma barra com icones.
  Ela combina alinhamento, glassmorphism, escalonamento por hover, indicadores e secoes dinamicas.
  Isso faz dela um bom estudo de componente responsivo e interativo.
*/
.dock-shell {
    display: none;
  }

  .mobile-panel {
    position: fixed;
    inset: 58px 0 0;
    z-index: 2100;
    display: block;
    pointer-events: none;
  }

  .mobile-phone {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 58px);
    padding: 14px 18px 16px;
    pointer-events: auto;
  }

  .mobile-phone__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 10px;
  }

  .mobile-phone__time {
    font-family: "Sora", sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .mobile-phone__signals {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-phone__bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
  }

  .mobile-phone__bar {
    width: 3px;
    border-radius: 999px;
    background: #fff;
  }

  .mobile-phone__bar--1 { height: 5px; opacity: 0.84; }
  .mobile-phone__bar--2 { height: 8px; opacity: 0.88; }
  .mobile-phone__bar--3 { height: 11px; opacity: 0.94; }
  .mobile-phone__bar--4 { height: 14px; }

  .mobile-phone__wifi {
    position: relative;
    width: 16px;
    height: 12px;
    background:
      radial-gradient(circle at 50% 100%, #fff 0 1.6px, transparent 1.8px);
    background-repeat: no-repeat;
    background-position: center bottom;
  }

  .mobile-phone__wifi::before,
  .mobile-phone__wifi::after {
    content: "";
    position: absolute;
    left: 50%;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    transform: translateX(-50%);
  }

  .mobile-phone__wifi::before {
    top: 0;
    width: 15px;
    height: 15px;
  }

  .mobile-phone__wifi::after {
    top: 4px;
    width: 8px;
    height: 8px;
  }

  .mobile-phone__battery {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow: visible;
  }

  .mobile-phone__battery-fill {
    position: absolute;
    inset: 2px;
    width: 52%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
  }

  .mobile-phone__battery-tip {
    position: absolute;
    right: -2px;
    width: 3px;
    height: 7px;
    border-radius: 0 999px 999px 0;
    background: rgba(255, 255, 255, 0.9);
  }

  .mobile-phone__battery-value {
    position: relative;
    z-index: 1;
  }

  .mobile-phone__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 10px;
    margin-top: 14px;
    padding: 0 2px 0;
  }

  .mobile-home__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    transform-origin: center;
    transition: transform 160ms var(--ease-fluid), filter 160ms ease;
  }

  .mobile-home__icon:active,
  .mobile-dock__icon:active {
    transform: scale(0.96);
  }

  .mobile-home__thumb {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    overflow: hidden;
  }

  .mobile-home__thumb img,
  .mobile-home__thumb svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .mobile-home__label {
    font-size: 0.72rem;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }

  .mobile-phone__dock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
    margin-top: auto;
    padding: 12px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(30px) saturate(1.3);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
  }

  .mobile-dock__icon {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 18px;
    overflow: hidden;
  }

  .mobile-dock__icon img,
  .mobile-dock__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .mobile-dock__icon--apps {
    background: rgba(255, 255, 255, 0.06);
    padding: 12px;
  }

  .mobile-sheet {
    position: fixed;
    inset: 0;
    z-index: 2250;
  }

  .mobile-sheet[hidden] {
    display: none;
  }

  .mobile-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 6, 0.64);
    backdrop-filter: blur(18px);
  }

  .mobile-sheet__panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
      rgba(16, 18, 22, 0.72);
    backdrop-filter: blur(26px) saturate(1.3);
    box-shadow: var(--shadow);
  }

  .mobile-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
  }

  .mobile-sheet__header span {
    color: var(--soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .mobile-sheet__header h2 {
    margin: 6px 0 0;
    font-family: "Sora", sans-serif;
    font-size: 1.16rem;
  }

  .mobile-sheet__close {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
  }

  .mobile-sheet__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .mobile-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 92px;
    padding: 10px 6px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
  }

  .mobile-app__icon-image {
    width: 52px;
    height: 52px;
    object-fit: contain;
  }

  .mobile-app span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
  }

  .toast-stack {
    right: 12px;
    left: 12px;
    bottom: 116px;
  }
}


/*
  MICROAJUSTES PARA TELEFONES AINDA MENORES:
  Nesta ultima etapa, o sistema recalibra espacamentos, relogio, hero central e grade de apps
  para continuar legivel quando a largura util cai bastante.
*/
@media (max-width: 560px) {
  .system-bar__left {
    gap: 8px;
  }

  .system-chip {
    display: none;
  }

  .system-clock {
    min-width: auto;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .desktop-item {
    display: none;
  }

  /*
  CAPITULO 4 - A COMPOSICAO CENTRAL COMO EXERCICIO DE CAMADAS:
  A hero central ensina a pensar em composicao.
  O contenedor recebe `position: relative`.
  As camadas internas recebem `position: absolute`.
  Isso cria um pequeno universo local onde `left`, `top` e `width` podem ser medidos em relacao ao pai.
*/
.hero-stack {
    top: 60%;
    width: min(430px, 92vw);
    height: 280px;
  }

  .art-layer--01 { left: 4%; top: 28%; width: 90%; }
  .art-layer--02 { left: 11%; top: 58%; width: 19%; }
  .art-layer--03 { left: 63%; top: 71%; width: 24%; }
  .art-layer--04 { left: 2%; top: 10%; width: 96%; }
  .art-layer--05 { left: 31%; top: 12%; width: 44%; }
  .art-layer--06 { left: 64%; top: 53%; width: 12%; }
  .art-layer--07 { left: 23%; top: 52%; width: 8%; }
  .art-layer--08 { left: 20%; top: 1%; width: 58%; }
  .art-layer--09 { left: 17%; top: 74%; width: 18%; }
  .art-layer--10 { left: 21%; top: 88%; width: 6%; }

  .mobile-sheet__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =====================================================================
   REFINAMENTOS macOS — semaforos com glifos, resize de janelas e capas
   ===================================================================== */

/* Glifos ×, − e + aparecem ao pairar sobre o grupo de semaforos, como no macOS. */
.traffic-light::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.traffic-light--close::before { content: "\00d7"; }
.traffic-light--minimize::before { content: "\2212"; }
.traffic-light--maximize::before { content: "+"; }

.window__traffic:hover .traffic-light::before {
  opacity: 1;
}

/* Alcas invisiveis de redimensionamento nas bordas e cantos das janelas. */
.window__resize {
  position: absolute;
  z-index: 60;
  touch-action: none;
}

.window__resize--n { top: 0; left: 18px; right: 18px; height: 6px; cursor: ns-resize; }
.window__resize--s { bottom: 0; left: 18px; right: 18px; height: 6px; cursor: ns-resize; }
.window__resize--e { right: 0; top: 18px; bottom: 18px; width: 6px; cursor: ew-resize; }
.window__resize--w { left: 0; top: 18px; bottom: 18px; width: 6px; cursor: ew-resize; }
.window__resize--ne { top: 0; right: 0; width: 18px; height: 18px; cursor: nesw-resize; }
.window__resize--nw { top: 0; left: 0; width: 18px; height: 18px; cursor: nwse-resize; }
.window__resize--se { bottom: 0; right: 0; width: 18px; height: 18px; cursor: nwse-resize; }
.window__resize--sw { bottom: 0; left: 0; width: 18px; height: 18px; cursor: nesw-resize; }

.window.is-maximized .window__resize,
.window.is-animating-geometry .window__resize {
  display: none;
}

.window.is-resizing {
  transition: none;
}

/* Capa de projeto dentro do card do Finder. */
.finder-card__preview--project {
  display: grid;
  place-items: center;
}

.finder-card__preview-image--cover {
  object-fit: cover;
}

/* =====================================================================
   EXPERIENCIA IPHONE — status bar em SVG, apps em tela cheia e listas
   ===================================================================== */

/* Icones da barra de status (sinal, wifi e bateria) desenhados em SVG. */
.mobile-status-icon {
  height: 13px;
  width: auto;
  color: #fff;
}

.mobile-status-icon--battery {
  height: 14px;
}

/* App mobile em tela cheia, com transicao de abertura no estilo iOS. */
.mobile-appview {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at top, rgba(116, 209, 255, 0.08), transparent 42%),
    linear-gradient(180deg, #0a0c11, #05070a);
  opacity: 0;
  transform: translateY(7%) scale(0.985);
  transition: opacity 240ms ease, transform 280ms var(--ease-fluid);
}

.mobile-appview.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Barra superior no padrao iOS: voltar a esquerda, titulo centralizado. */
.mobile-appview__bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: env(safe-area-inset-top, 0px) 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 14, 18, 0.82);
  backdrop-filter: blur(22px) saturate(1.4);
  flex: 0 0 auto;
}

.mobile-appview__back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 8px 10px 8px 2px;
  color: #0a84ff;
  font-size: 0.98rem;
  max-width: 27%;
}

.mobile-appview__back svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.mobile-appview__back span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-appview__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Sora", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
}

.mobile-appview__spacer {
  margin-left: auto;
  width: 20px;
}

.mobile-appview__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.mobile-appview__body--flush {
  padding: 0;
  overflow: hidden;
  display: flex;
}

.mobile-appview__frame {
  width: 100%;
  height: 100%;
  border: 0;
  flex: 1 1 auto;
}

.mobile-folder__description {
  margin: 2px 4px 16px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.92rem;
}

.mobile-folder__list {
  display: grid;
  gap: 10px;
}

.mobile-folder__empty {
  margin: 40px 0;
  text-align: center;
  color: var(--soft);
}

/* Linha de item (pasta, projeto ou arquivo) na navegacao mobile. */
.mobile-entry {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  text-align: left;
  transition: background 140ms ease, transform 140ms ease;
}

.mobile-entry:active {
  background: rgba(255, 255, 255, 0.11);
  transform: scale(0.985);
}

.mobile-entry__thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
}

.mobile-entry__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mobile-entry__thumb--file {
  color: rgba(255, 255, 255, 0.6);
  padding: 6px;
}

.mobile-entry__cover {
  width: 78px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.mobile-entry__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-entry__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-entry__text strong {
  font-size: 0.94rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-entry__text span {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-entry__chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--soft);
  flex: 0 0 auto;
}

/* Curriculo aberto como app de Notas. */
.mobile-notes {
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.75;
  color: var(--text);
}

.mobile-notes p + p {
  margin-top: 14px;
}

/* No celular, escondemos a barra do macOS e entregamos a tela inteira ao iPhone. */
@media (max-width: 768px) {
  .system-bar {
    display: none;
  }

  /* Os widgets da mesa do macOS nao existem no iPhone. */
  .widget--desktop {
    display: none;
  }

  .desktop {
    padding-top: 0;
  }

  .mobile-panel {
    inset: 0;
  }

  .mobile-phone {
    min-height: 100svh;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  /* A colagem central vira "papel de parede": visivel, mas sem capturar toques. */
  .hero-stack {
    pointer-events: none;
  }

  .window-space,
  .window {
    display: none;
  }

  .toast-stack {
    top: 70px;
    bottom: auto;
  }
}

/* =====================================================================
   IDIOMA — bandeirinha na Dock e no mobile
   ===================================================================== */
.dock-item--language {
  display: grid;
  place-items: center;
}

.lang-flag {
  width: 30px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Capas em video dentro dos cards do Finder e listas mobile. */
video.finder-card__preview-image--cover,
.mobile-entry__cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Curriculo dentro das Notas: titulos de secao e botao de download. */
.notes__section-heading {
  margin: 22px 0 6px;
  font-family: "Sora", sans-serif;
  font-size: 1.02rem;
  color: inherit;
}

.notes__section-heading:first-child {
  margin-top: 0;
}

.notes__download,
.mobile-notes__download {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(116, 209, 255, 0.16);
  color: #bfe7ff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease;
}

.notes__download:hover,
.mobile-notes__download:hover {
  background: rgba(116, 209, 255, 0.3);
}

.mobile-notes__download {
  margin-bottom: 18px;
}

/* =====================================================================
   MOBILE V2 — home com icones maiores (crop central) e dock de 5 itens
   ===================================================================== */
@media (max-width: 768px) {
  .mobile-phone__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 10px;
    margin-top: 20px;
  }

  .mobile-home__thumb {
    width: 62px;
    height: 62px;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  /* Icones pre-cropados em assets/img/mobile-icons (sem o nome embutido). */
  .mobile-home__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-home__thumb--app img {
    transform: none;
  }

  .mobile-home__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
  }

  .mobile-phone__dock {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 12px 14px;
  }

  .mobile-dock__icon {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
  }

  .mobile-dock__icon img {
    padding: 8px;
  }

  .mobile-dock__icon--language {
    display: grid;
    place-items: center;
  }

  .mobile-dock__icon--language .lang-flag {
    width: 56%;
  }
}


/* =====================================================================
   REFINAMENTOS: bandeira cheia, bolinha de app aberto, tela cheia macOS
   ===================================================================== */

/* A bandeira preenche o quadrado do icone, como um app. */
.dock-item--language .lang-flag {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.mobile-dock__icon--language .lang-flag {
  width: 76%;
  height: 76%;
  border-radius: 14px;
}

/* Bolinha indicadora de app aberto na Dock, como no macOS. */
.dock-item {
  position: relative;
}

.dock-item.is-active::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

/* Tela cheia: janela sem cantos e Dock auto-ocultavel com zona de hover. */
.window.is-maximized {
  border-radius: 0;
}

body.has-fullscreen-window .dock-shell {
  transform: translateY(calc(100% + 6px));
}

.dock-shell {
  transition: transform 320ms var(--ease-fluid);
  z-index: 1650;
}

body.has-fullscreen-window .dock-shell:hover,
body.has-fullscreen-window .dock-shell.is-peeking {
  transform: translateY(0);
}

/* Zona invisivel no rodape que "chama" a Dock quando o mouse encosta. */
.dock-hotzone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  z-index: 1640;
  display: none;
}

body.has-fullscreen-window .dock-hotzone {
  display: block;
}

/* Curriculo: subtitulos de cargo e listas. */
.notes__job {
  margin: 16px 0 4px;
  font-family: "Sora", sans-serif;
  font-size: 0.92rem;
  color: rgba(21, 24, 29, 0.9);
}

.notes__list {
  margin: 6px 0 10px;
  padding-left: 20px;
}

.notes__list li {
  margin-bottom: 4px;
}

.notes__section + .notes__section {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(21, 24, 29, 0.08);
}

/* =====================================================================
   WIDGETS — vidro liquido Apple, relogio e calendario funcionais
   ===================================================================== */

.widget {
  container-type: size;
  --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.09));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: var(--glass-bg), rgba(22, 24, 30, 0.55);
  backdrop-filter: blur(28px) saturate(1.5);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  overflow: hidden;
  user-select: none;
}

.widget--desktop {
  position: absolute;
  z-index: 4;
  width: 150px;
  height: 150px;
  cursor: grab;
  touch-action: none;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.widget--desktop:hover {
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.widget--desktop.is-dragging {
  cursor: grabbing;
  transform: scale(1.03);
}

.widget--desktop.widget--gallery,
.widget--desktop.widget--photo,
.widget--desktop.widget--note {
  width: 320px;
  height: 150px;
}

/* Relogio analogico */
.widget-clock {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 14px;
}

.widget-clock__face {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.16), rgba(10, 12, 16, 0.85) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.widget-clock__tick {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
}

.widget-clock__tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.widget-clock__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  border-radius: 4px;
}

.widget-clock__hand--hour {
  width: 4px;
  height: 26%;
  margin-left: -2px;
  background: #fff;
}

.widget-clock__hand--minute {
  width: 3px;
  height: 36%;
  margin-left: -1.5px;
  background: rgba(255, 255, 255, 0.85);
}

.widget-clock__hand--second {
  width: 1.5px;
  height: 40%;
  margin-left: -0.75px;
  background: #ff9f0a;
  transition: transform 200ms cubic-bezier(0.3, 1.6, 0.6, 1);
}

.widget-clock__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ff9f0a;
  box-shadow: 0 0 0 2px rgba(10, 12, 16, 0.8);
}

/* Calendario com dia real — iOS: cabecalho vermelho, dia gigante, mini-mes */
.widget-calendar {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: start;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
}

.widget-calendar__head {
  display: grid;
  justify-items: start;
  gap: 0;
  line-height: 1;
}

.widget-calendar__head strong {
  color: #ff453a;
  font-size: clamp(0.6rem, 9cqmin, 0.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.widget-calendar__day {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.6rem, 30cqmin, 3.2rem);
  font-weight: 700;
  line-height: 1.08;
}

.widget-calendar__month {
  color: var(--muted);
  font-size: clamp(0.58rem, 8cqmin, 0.78rem);
  text-transform: capitalize;
}

/* A mini-grade do mes so aparece quando ha largura para ela. */
.widget-calendar__grid {
  display: none;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px 3px;
  font-size: 0.52rem;
  text-align: center;
  color: rgba(245, 247, 250, 0.75);
  align-self: center;
}

.widget-calendar__grid b {
  color: rgba(245, 247, 250, 0.45);
  font-weight: 600;
}

.widget-calendar__grid .is-today {
  display: inline-grid;
  place-items: center;
  background: #ff453a;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  aspect-ratio: 1;
}

@container (min-width: 230px) {
  .widget-calendar {
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
  }

  .widget-calendar__grid {
    display: grid;
  }
}

/* Foto unica */
.widget-photo {
  position: relative;
  width: 100%;
  height: 100%;
}

.widget-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-photo__label,
.widget-gallery__title {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
}

.widget-photo__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--soft);
  font-size: 0.8rem;
}

/* Pasta-galeria com varias imagens */
.widget-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px;
}

.widget-gallery__grid {
  display: grid;
  gap: 5px;
  width: 100%;
  height: 100%;
}

.widget-gallery__grid--1 { grid-template-columns: 1fr; }
.widget-gallery__grid--2 { grid-template-columns: repeat(2, 1fr); }
.widget-gallery__grid--3 { grid-template-columns: repeat(3, 1fr); }
.widget-gallery__grid--4 { grid-template-columns: repeat(4, 1fr); }

.widget-gallery__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.widget-gallery__title {
  left: 16px;
  bottom: 14px;
}

/* Nota */
.widget-note {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 14px 16px;
  overflow: hidden;
}

.widget-note strong {
  font-family: "Sora", sans-serif;
  font-size: 0.85rem;
}

.widget-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Widgets na home do iPhone: entram na grade com spans */
@media (max-width: 768px) {
  .mobile-phone__grid {
    grid-auto-rows: 86px;
    align-items: stretch;
  }

  .widget--mobile {
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    border-radius: 22px;
  }

  .widget--size-2x2 { grid-column: span 2; grid-row: span 2; }
  .widget--size-4x2 { grid-column: span 4; grid-row: span 2; }
  .widget--size-4x4 { grid-column: span 4; grid-row: span 4; }

  .widget--mobile .widget-calendar {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px;
    align-content: start;
  }

  .widget--mobile .widget-calendar__grid {
    font-size: 0.48rem;
  }

  .widget--mobile:active {
    transform: scale(0.98);
  }
}

/* =====================================================================
   BOARDS — quadro infinito dos apps criativos
   ===================================================================== */

.board {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background:
    radial-gradient(circle at 30% 20%, rgba(116, 209, 255, 0.05), transparent 42%),
    linear-gradient(180deg, #101318, #0a0d12);
}

.board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}

.board.is-panning {
  cursor: grabbing;
}

.board__canvas {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.board-item {
  position: absolute;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.board-item--image {
  overflow: hidden;
  background: #14171c;
}

.board-item--image img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.board-item--note {
  min-width: 170px;
  max-width: 340px;
  padding: 14px 16px;
  border-radius: 4px 18px 18px 18px;
  color: #fff;
}

.board-item--note p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.board--mobile {
  min-height: 100%;
}

/* Ferramentas do board no modo edicao */
.board-item.is-editable {
  cursor: grab;
  outline: 1px dashed rgba(255, 255, 255, 0.35);
  outline-offset: 3px;
}

.board-item.is-editable:active {
  cursor: grabbing;
}

.board-item__remove {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff5f57;
  color: #3b0a08;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
}

.board-toolbar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.board-toolbar button {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(116, 209, 255, 0.2);
  border: 1px solid rgba(116, 209, 255, 0.35);
  color: #bfe7ff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

/* =====================================================================
   WIDGETS PREMIUM — clima real, bateria, slideshow de fotos
   ===================================================================== */

/* Foto em slideshow com crossfade suave. */
.widget-photo img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}

.widget-photo img.is-showing {
  opacity: 1;
}

/* Clima (Open-Meteo, dados reais) */
.widget--weather {
  width: 320px;
  height: 150px;
}

.widget-weather {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  height: 100%;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(48, 110, 180, 0.55), rgba(20, 40, 70, 0.35));
}

.widget-weather__now {
  display: grid;
  gap: 1px;
  justify-items: start;
}

.widget-weather__city {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.widget-weather__temp {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.3rem, 24cqmin, 2.6rem);
  font-weight: 600;
  line-height: 1.05;
}

.widget-weather__cond,
.widget-weather__range {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.8);
}

.widget-weather__hours {
  display: none;
  justify-content: space-between;
  gap: 4px;
}

@container (min-width: 250px) {
  .widget-weather__hours {
    display: flex;
  }

  .widget-weather {
    grid-template-columns: auto 1fr;
  }
}

.widget-weather__hour {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: 0.62rem;
}

.widget-weather__hour b {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.widget-weather__hour i {
  font-style: normal;
  font-size: 0.85rem;
}

.widget-weather__hour em {
  font-style: normal;
  font-weight: 600;
}

/* Bateria (Battery API) */
.widget-battery {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  height: 100%;
  padding: 12px;
}

.widget-battery__ring {
  --battery-angle: 360deg;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(56px, 52cqmin, 110px);
  height: clamp(56px, 52cqmin, 110px);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(22, 24, 30, 0.92) 78%, transparent 79%),
    conic-gradient(#30d158 var(--battery-angle), rgba(255, 255, 255, 0.14) 0deg);
}

.widget-battery__ring.is-low {
  background:
    radial-gradient(closest-side, rgba(22, 24, 30, 0.92) 78%, transparent 79%),
    conic-gradient(#ff453a var(--battery-angle), rgba(255, 255, 255, 0.14) 0deg);
}

.widget-battery__ring strong {
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
}

.widget-battery__label {
  font-size: 0.7rem;
  color: var(--muted);
}

/* Modo edicao: destaque dos itens arrastaveis da home mobile. */
body.editor-active .mobile-phone__grid .mobile-home__icon,
body.editor-active .mobile-phone__grid .widget--mobile {
  touch-action: none;
}

.mobile-home__icon.editor-drag-source,
.widget--mobile.editor-drag-source {
  opacity: 0.35;
}

.mobile-home__icon.editor-drop-before,
.widget--mobile.editor-drop-before {
  outline: 3px solid #74d1ff;
  outline-offset: 3px;
  border-radius: 18px;
}

/* =====================================================================
   MODO CINEMA — video em destaque com o site escurecido atras
   ===================================================================== */
.cinema {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 240ms ease;
}

.cinema.is-open {
  opacity: 1;
}

.cinema__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 5, 0.88);
  backdrop-filter: blur(14px) saturate(0.8);
  cursor: pointer;
}

.cinema__stage {
  position: relative;
  margin: 0;
  width: min(1080px, calc(100vw - 96px));
  display: grid;
  gap: 14px;
  transform: scale(0.97);
  transition: transform 260ms var(--ease-fluid);
}

.cinema.is-open .cinema__stage {
  transform: scale(1);
}

.cinema__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
}

.cinema__player iframe,
.cinema__player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cinema__caption {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
}

.cinema__caption strong {
  font-family: "Sora", sans-serif;
  font-size: 1.05rem;
}

.cinema__caption span {
  color: var(--muted);
  font-size: 0.85rem;
}

.cinema__close {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 150ms ease;
}

.cinema__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.cinema__back {
  display: none;
}

/* No celular: tela toda, sem bordas, com "voltar" no topo. */
@media (max-width: 768px) {
  .cinema {
    place-items: stretch;
  }

  .cinema__stage {
    width: 100%;
    align-content: center;
    padding: 0;
  }

  .cinema__player {
    border-radius: 0;
  }

  .cinema__close {
    display: none;
  }

  .cinema__back {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 8px 12px 8px 4px;
    color: #0a84ff;
    font-size: 0.98rem;
    cursor: pointer;
  }

  .cinema__back svg {
    width: 20px;
    height: 20px;
  }
}

/* Alca de redimensionar widgets (so aparece no modo edicao). */
.widget__resize {
  display: none;
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 52%, rgba(255, 255, 255, 0.75) 54%, transparent 58%,
      transparent 66%, rgba(255, 255, 255, 0.75) 68%, transparent 72%);
  z-index: 6;
  touch-action: none;
}

body.editor-active .widget--desktop .widget__resize {
  display: block;
}

body.editor-active .widget--desktop {
  outline: 1px dashed rgba(116, 209, 255, 0.4);
  outline-offset: 3px;
}


/* =====================================================================
   NOVOS WIDGETS — relogio mundial, musica, lembretes, contagem, contato
   ===================================================================== */

/* Relogio mundial (fusos reais) */
.widget--world-clock {
  width: 320px;
  height: 150px;
}

.widget-worldclock {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  height: 100%;
  padding: 12px;
  gap: 6px;
}

.widget-worldclock__city {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.widget-worldclock__city span {
  font-size: clamp(0.56rem, 7cqmin, 0.72rem);
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-worldclock__city strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(0.9rem, 14cqmin, 1.5rem);
  font-variant-numeric: tabular-nums;
}

.widget-worldclock__city em {
  font-style: normal;
  font-size: 0.6rem;
  color: var(--soft);
}

/* Musica (tocando agora) */
.widget--music {
  width: 320px;
  height: 150px;
}

.widget-music {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px;
  background: linear-gradient(160deg, rgba(250, 60, 90, 0.4), rgba(120, 20, 60, 0.25));
}

.widget-music__cover {
  display: grid;
  place-items: center;
  width: clamp(52px, 55cqmin, 96px);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  font-size: 1.4rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.widget-music__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-music__info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.widget-music__info strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(0.78rem, 10cqmin, 1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-music__info span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-music__bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.widget-music__bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: #fff;
  animation: music-progress 24s linear infinite;
}

@keyframes music-progress {
  from { width: 4%; }
  to { width: 96%; }
}

.widget-music__eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}

.widget-music__eq i {
  width: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  animation: music-eq 900ms ease-in-out infinite alternate;
}

.widget-music__eq i:nth-child(1) { height: 40%; animation-delay: 0ms; }
.widget-music__eq i:nth-child(2) { height: 90%; animation-delay: 150ms; }
.widget-music__eq i:nth-child(3) { height: 55%; animation-delay: 320ms; }
.widget-music__eq i:nth-child(4) { height: 75%; animation-delay: 480ms; }

@keyframes music-eq {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1); }
}

/* Lembretes (interativo) */
.widget--reminders {
  width: 320px;
  height: 150px;
}

.widget-reminders {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  padding: 13px 15px;
  overflow: hidden;
}

.widget-reminders__title {
  font-family: "Sora", sans-serif;
  font-size: 0.85rem;
  color: #ff9f0a;
}

.widget-reminders ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.widget-reminders li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text);
}

.widget-reminders li.is-done span {
  color: var(--soft);
  text-decoration: line-through;
}

.widget-reminders__check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.widget-reminders__check.is-done {
  background: #ff9f0a;
  border-color: #ff9f0a;
}

/* Contagem regressiva */
.widget--countdown {
  width: 320px;
  height: 150px;
}

.widget-countdown {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px;
}

.widget-countdown__title {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

.widget-countdown__digits {
  display: flex;
  gap: 14px;
}

.widget-countdown__digits div {
  display: grid;
  justify-items: center;
  gap: 1px;
}

.widget-countdown__digits strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.1rem, 18cqmin, 1.8rem);
  font-variant-numeric: tabular-nums;
}

.widget-countdown__digits em {
  font-style: normal;
  font-size: 0.6rem;
  color: var(--soft);
}

/* Contato rapido */
.widget--contact {
  width: 320px;
  height: 150px;
}

.widget-contact {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px;
}

.widget-contact__avatar {
  display: grid;
  place-items: center;
  width: clamp(48px, 50cqmin, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #73cfff, #7c4dff);
  font-family: "Sora", sans-serif;
  font-weight: 700;
  color: #fff;
}

.widget-contact__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-contact__info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.widget-contact__info strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(0.8rem, 10cqmin, 1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-contact__info span {
  color: var(--muted);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-contact__actions {
  display: grid;
  gap: 6px;
}

.widget-contact__actions a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 130ms ease;
}

.widget-contact__actions a:hover {
  background: rgba(255, 255, 255, 0.22);
}

.widget-contact__actions img {
  width: 22px;
  height: 22px;
}

/* Icones mobile ocupam 100% do quadrado (sem borda interna). */
@media (max-width: 768px) {
  .mobile-home__thumb {
    background: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  }
}

/* Cadeado do Safari — mesmo clima da tela de bloqueio. */
.safari-lock {
  position: fixed;
  inset: 0;
  z-index: 3400;
  display: grid;
  place-items: center;
  background: rgba(3, 4, 7, 0.66);
  backdrop-filter: blur(22px) saturate(1.2);
  opacity: 0;
  transition: opacity 200ms ease;
}

.safari-lock.is-open {
  opacity: 1;
}

.safari-lock__card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(340px, calc(100vw - 40px));
  padding: 30px 26px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: rgba(18, 20, 26, 0.9);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.safari-lock__card.is-shaking {
  animation: editor-shake 380ms ease;
}

@keyframes editor-shake {
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

.safari-lock__icon {
  width: 62px;
  height: 62px;
}

.safari-lock__card h2 {
  margin: 2px 0 0;
  font-family: "Sora", sans-serif;
  font-size: 1.15rem;
}

.safari-lock__card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.safari-lock__form {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.safari-lock__form input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.safari-lock__form input:focus {
  border-color: rgba(116, 209, 255, 0.6);
}

.safari-lock__form button {
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #73cfff, #4d7dff);
  color: #06121f;
  font-weight: 700;
  cursor: pointer;
}

.safari-lock__cancel {
  color: rgba(245, 247, 250, 0.55);
  font-size: 0.84rem;
  cursor: pointer;
}

.safari-lock__error {
  color: #ff8a8a;
  font-size: 0.84rem;
}


/* =====================================================================
   V3 — RODADA DE REFINAMENTO (icones em proporcao real, dock mobile,
   capas "em breve", cinema vertical, grade de widgets, redesign dos
   widgets, Finder responsivo e ajustes de tablet)
   ===================================================================== */

/* ---- Icones do desktop: arte na proporcao original + selecao macOS ---- */
.desktop-item {
  width: calc(var(--icon-w, 150px) * var(--icon-scale, 1));
}

.desktop-item--identity { --icon-w: 158px; }
.desktop-item--social { --icon-w: 140px; }
.desktop-item--manipulation { --icon-w: 120px; }
.desktop-item--videos,
.desktop-item--events,
.desktop-item--weddings { --icon-w: 186px; }

.desktop-item__frame {
  display: block;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 130ms ease, border-color 130ms ease;
}

.desktop-item__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}

/* Passar o mouse OU selecionar: replica exata da arte "-selected" do Filipe —
   faixa preta translucida com filete cinza envolvendo a imagem e, colada nela,
   a caixa azul de largura total com o nome. Tudo le como UM bloco. */
.desktop-item:hover .desktop-item__frame,
.desktop-item.is-selected .desktop-item__frame {
  background: rgba(0, 0, 0, 0.47);
  border-color: rgba(160, 160, 160, 0.9);
}

.desktop-item__caption {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 5px;
  margin-top: 4px;
}

.desktop-item:hover .desktop-item__caption,
.desktop-item.is-selected .desktop-item__caption {
  background: #0258d0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---- Dock do iPhone: icones preenchem o quadrado inteiro ---- */
@media (max-width: 768px) {
  .mobile-dock__icon {
    background: none;
  }

  .mobile-dock__icon img {
    padding: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }

  .mobile-dock__icon--language .lang-flag {
    width: 100%;
    height: 100%;
    border-radius: 16px;
  }
}

/* ---- Capa "em breve" para videos ainda sem link ---- */
.finder-card__preview,
.mobile-entry__cover {
  overflow: hidden;
}

.finder-card__preview-image--cover {
  transform-origin: center;
}

.cover-soon {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 96px;
  background:
    radial-gradient(circle at 30% 20%, rgba(115, 229, 255, 0.14), transparent 55%),
    linear-gradient(150deg, #1d222b, #10141a);
  color: rgba(255, 255, 255, 0.78);
}

.cover-soon svg {
  width: 30px;
  height: 30px;
  opacity: 0.9;
}

.cover-soon em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ---- Cinema: respeita a proporcao real (vertical sem barras) ---- */
.cinema__stage {
  width: min(1080px, calc(100vw - 96px), 138vh);
}

.cinema--vertical .cinema__stage {
  width: min(44vh, calc(100vw - 120px), 480px);
}

/* No celular o palco ocupa a largura toda e fica SEMPRE centralizado
   (a regra generica acima deixava 96px de sobra e tudo puxado a esquerda). */
@media (max-width: 768px) {
  .cinema__stage {
    width: 100%;
    justify-self: center;
    align-self: center;
  }

  .cinema--vertical .cinema__stage {
    width: min(92vw, 52vh);
  }
}

/* ---- Grade-guia dos widgets (aparece ao arrastar/redimensionar no editor) ---- */
.widget-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  background-image:
    repeating-linear-gradient(90deg, rgba(126, 190, 255, 0.22) 0 1px, transparent 1px var(--wg-step, 164px)),
    repeating-linear-gradient(0deg, rgba(126, 190, 255, 0.22) 0 1px, transparent 1px var(--wg-step, 164px));
  background-position: var(--wg-x, 24px) var(--wg-y, 76px);
}

.widget-grid-overlay.is-visible {
  opacity: 1;
}

/* ---- Widgets: refinamento visual geral ---- */
.widget {
  border-radius: 24px;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.widget-worldclock {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  height: 100%;
  padding: 12px 14px;
  gap: 8px;
  text-align: center;
}

.widget-worldclock__city {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 0;
}

.widget-worldclock__city span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: clamp(0.56rem, 7cqmin, 0.74rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.widget-worldclock__city strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(0.95rem, 15cqmin, 1.6rem);
  font-weight: 600;
  line-height: 1.1;
}

.widget-worldclock__city em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.64rem;
}

.widget-music {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px 16px;
}

.widget-music__cover {
  flex: none;
  width: clamp(40px, 34cqmin, 64px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
  font-size: 1.3rem;
}

.widget-music__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-music__info {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.widget-music__info strong {
  font-size: clamp(0.78rem, 9cqmin, 0.95rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-music__info span {
  color: var(--muted);
  font-size: clamp(0.66rem, 7cqmin, 0.8rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-music__bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.widget-music__bar i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

.widget-reminders {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  height: 100%;
  padding: 14px 16px;
  overflow: hidden;
}

.widget-reminders__title {
  font-size: clamp(0.8rem, 9cqmin, 0.95rem);
  color: #ff9f0a;
}

.widget-reminders ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  align-content: start;
  overflow: hidden;
}

.widget-reminders li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(0.7rem, 8cqmin, 0.84rem);
  line-height: 1.25;
}

.widget-reminders li.is-done span {
  text-decoration: line-through;
  color: var(--muted);
}

.widget-reminders__check {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.widget-reminders__check.is-done {
  background: #ff9f0a;
  border-color: #ff9f0a;
}

.widget-countdown {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px;
  text-align: center;
}

.widget-countdown__title {
  color: var(--muted);
  font-size: clamp(0.62rem, 7cqmin, 0.78rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.widget-countdown__digits {
  display: flex;
  gap: clamp(8px, 6cqmin, 18px);
}

.widget-countdown__digits div {
  display: grid;
  justify-items: center;
  gap: 1px;
}

.widget-countdown__digits strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.1rem, 18cqmin, 2rem);
  font-weight: 700;
  line-height: 1;
}

.widget-countdown__digits em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.widget-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px 16px;
}

.widget-contact__avatar {
  flex: none;
  width: clamp(40px, 32cqmin, 56px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #73e5ff, #2e8cff);
  color: #fff;
  font-weight: 700;
  font-family: "Sora", sans-serif;
}

.widget-contact__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-contact__info {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.widget-contact__info strong {
  font-size: clamp(0.78rem, 9cqmin, 0.95rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-contact__info span {
  color: var(--muted);
  font-size: clamp(0.64rem, 7cqmin, 0.78rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-contact__actions {
  display: flex;
  gap: 8px;
}

.widget-contact__actions a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 130ms ease;
}

.widget-contact__actions a:hover {
  background: rgba(255, 255, 255, 0.22);
}

.widget-contact__actions img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
}

/* ---- Finder: nunca quebrar em janelas estreitas ---- */
.finder {
  container-type: inline-size;
  container-name: finder;
}

.finder__toolbar {
  flex-wrap: nowrap;
  min-width: 0;
}

.finder__search {
  flex: 0 1 190px;
  min-width: 96px;
}

.finder__search input {
  min-width: 0;
}

@container finder (max-width: 700px) {
  .finder__path {
    display: none;
  }

  .finder__search {
    flex: 1 1 auto;
  }
}

@container finder (max-width: 560px) {
  .finder {
    grid-template-columns: minmax(0, 1fr);
  }

  .finder__sidebar {
    display: none;
  }
}

@container finder (max-width: 430px) {
  .finder__display {
    display: none;
  }
}






/* ---- V9: bandeira como icone quadrado cheio (BR = verde com o globo
   central; EUA = estrelas + listras), assada no PNG com cantos prontos.
   O tile e IDENTICO em caixa e tamanho aos outros icones do dock. ---- */
.dock-item--language {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: none;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.dock-item--language .lang-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .mobile-dock__icon--language {
    display: grid;
    place-items: center;
    background: none;
    box-shadow: none;
    border-radius: 16px;
    overflow: hidden;
  }

  .mobile-dock__icon--language .lang-flag {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: none;
    padding: 0;
  }
}


/* ---- V4: grade do Finder sem espaco morto (cartoes preenchem a largura) ---- */
.finder__grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  justify-content: stretch;
}


/* ---- V4: cabecalho do Finder sem vazio a direita em janelas estreitas ---- */
@container finder (max-width: 980px) {
  .finder__hero {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
  }

  .finder__meta {
    justify-content: flex-start;
  }

  .finder__meta span {
    min-height: 30px;
    padding: 0 12px;
    font-size: 0.78rem;
  }
}


/* ---- V4: legendas dos icones em ate duas linhas (sem cortes) ---- */
.desktop-item__caption {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}




/* ---- V4: cargo do curriculo legivel no fundo escuro do mobile ---- */
.mobile-notes .notes__job {
  color: #8fc6ff;
}



/* ---- V5: itens ocultos (so aparecem no modo edicao, esmaecidos) ---- */
body.editor-active .finder-card.is-hidden-entry {
  opacity: 0.45;
  filter: saturate(0.4);
  position: relative;
}

body.editor-active .finder-card.is-hidden-entry::after {
  content: "Oculto";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(12, 12, 16, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffd166;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- V5: voltar/avancar do Safari simulado com estado real ---- */
.browser__nav button:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ---- V6: calendario com geometria exata (sem buracos nem apertos) ----
   Duas colunas: data por extenso a esquerda, mini-mes a direita.
   As duas colunas ocupam a MESMA altura util; as linhas do mes se
   distribuem por igual e cada dia e um quadradinho de verdade. */
.widget-calendar {
  padding: 16px;
  gap: 6px;
}

@container (min-width: 230px) {
  .widget-calendar {
    grid-template-columns: minmax(84px, auto) 1fr;
    gap: 16px;
    align-items: stretch;
  }

  .widget-calendar__head {
    align-content: center;
  }
}

.widget-calendar__grid {
  align-self: stretch;
  align-content: space-between;
  justify-items: center;
  gap: 0 3px;
  font-size: 0.55rem;
  line-height: 1;
}

.widget-calendar__grid b,
.widget-calendar__grid span {
  display: inline-grid;
  place-items: center;
  width: 15px;
  aspect-ratio: 1;
}

.widget-calendar__head {
  gap: 2px;
}

/* Clima: cidade e temperatura no topo, condicao e max/min ancoradas na
   base — a coluna inteira do tile e usada, como no iOS. */
.widget-weather {
  align-items: stretch;
  grid-template-rows: 1fr;
}

.widget-weather__now {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  gap: 2px;
}

.widget-weather__cond {
  margin-top: auto;
}

/* =====================================================================
   V6 — PASTA DE ICONES DO IPHONE:
   fundo desfocado, nome da pasta em cima e painel central translucido
   com os projetos como icones, igual abrir uma pasta no iOS.
   ===================================================================== */
.ios-folder {
  position: fixed;
  inset: 0;
  /* Acima da home do iPhone (2100), abaixo do app de projeto (2500)
     e do modo cinema (3000). */
  z-index: 2300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  opacity: 0;
  transition: opacity 220ms ease;
}

.ios-folder.is-open {
  opacity: 1;
}

.ios-folder__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 16, 0.45);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
}

.ios-folder__title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 1.18rem;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.ios-folder__desc {
  position: relative;
  z-index: 1;
  max-width: min(84vw, 360px);
  margin-top: -10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.ios-folder__panel {
  position: relative;
  z-index: 1;
  width: min(88vw, 380px);
  max-height: min(72vh, 440px);
  aspect-ratio: 1;
  border-radius: 38px;
  background: rgba(92, 98, 110, 0.38);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: scale(0.72);
  transition: transform 240ms cubic-bezier(0.22, 0.9, 0.24, 1);
}

.ios-folder.is-open .ios-folder__panel {
  transform: scale(1);
}

.ios-folder__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 10px;
  padding: 24px 18px;
  align-content: start;
}

.ios-folder__app {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ios-folder__app:active .ios-folder__thumb {
  transform: scale(0.92);
  filter: brightness(0.8);
}

.ios-folder__thumb {
  width: 72px;
  height: 72px;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 120ms ease, filter 120ms ease;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
}

.ios-folder__thumb img,
.ios-folder__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ios-folder__thumb--folder img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.ios-folder__thumb--file svg {
  width: 46%;
  height: 60%;
  color: rgba(255, 255, 255, 0.75);
}

.ios-folder__label {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ios-folder__empty {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 30px 10px;
  font-size: 0.9rem;
}

/* Enquanto a pasta iOS esta aberta, a home inteira fica desfocada de
   verdade (nao dependemos so de backdrop-filter). */
body.ios-folder-open .mobile-phone__grid,
body.ios-folder-open .mobile-phone__dock,
body.ios-folder-open .mobile-phone__status {
  filter: blur(16px) brightness(0.7);
}

.mobile-phone__grid,
.mobile-phone__dock,
.mobile-phone__status {
  transition: filter 220ms ease;
}

/* =====================================================================
   V7 — RESPONSIVIDADE DA MESA EM TABLET E DESKTOPS MENORES:
   tres zonas que nunca se atropelam — widgets a esquerda, arte central
   compacta ATRAS de tudo, pastas a direita.
   ===================================================================== */

/* Desktops menores (1151-1500px): a colagem central encolhe para nao
   invadir a coluna de widgets nem as pastas reprojetadas. */


/* Tablet e janelas estreitas (769-1150px): a arte vira um fundo discreto
   e compacto, sempre ATRAS dos icones e widgets; as pastas sobem um pouco
   para caber com o dock em telas baixas (ex.: 1024x768). */


/* Tablets baixos/na horizontal (altura curta): escala geral levemente
   menor para caber widgets, pastas e dock sem cortes. */


/* No modo compacto os widgets ficam mais estreitos para a coluna
   empilhada nunca alcancar as pastas da direita (ex.: 1024x768). */


/* ---- V9: Curriculo e Idioma sao <button> e herdavam padding/borda
   padrao do navegador — por isso SEMPRE pareciam menores que os
   vizinhos (<a>). Zerado: os cinco icones ficam identicos. ---- */
.mobile-dock__icon,
.dock-item {
  padding: 0;
  border: 0;
}

.mobile-dock__icon img {
  width: 100%;
  height: 100%;
}

/* =====================================================================
   V10 — CARTOES DE ESTATISTICA (+70 Storys…) E CARTAZ "E TEM MAIS…"
   ===================================================================== */
/* Finder: numero de impacto num cartao proprio */
.finder-card--stat {
  cursor: default;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 250, 0.94));
}

.finder-card__stat {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 18px;
  text-align: center;
}

.finder-card__stat strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.25;
  background: linear-gradient(120deg, #1c2430, #4a6076);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Finder: cartaz final "e isso e so uma parte…" */
.finder-card--more {
  background: transparent;
  border: 2px dashed rgba(15, 19, 24, 0.28);
  box-shadow: none;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  min-height: 220px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.finder-card--more:hover {
  border-color: rgba(15, 19, 24, 0.55);
  background: rgba(255, 255, 255, 0.5);
}

.finder-card__more-mark {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  color: rgba(15, 19, 24, 0.5);
}

.finder-card--more .finder-card__title {
  font-style: italic;
}

.finder-card--more .finder-card__meta {
  max-width: 30ch;
}

/* Pasta iOS: chip de estatistica (linha inteira) */
.ios-folder__stat {
  grid-column: 1 / -1;
  border: 0;
  cursor: default;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-align: center;
}

.ios-folder__stat strong {
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Pasta iOS: "e tem mais…" no rodape da grade */
.ios-folder__more {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  background: none;
  display: grid;
  gap: 4px;
  text-align: center;
  cursor: pointer;
}

.ios-folder__more strong {
  color: #fff;
  font-size: 0.9rem;
  font-style: italic;
}

.ios-folder__more span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  line-height: 1.35;
}

/* =====================================================================
   V11 — PASTAS COM CAPA DE FOTO + CARD "EM BREVE"
   ===================================================================== */
/* Selo de tipo no canto da capa da pasta (Finder) */
.finder-card__preview--folder-cover { position: relative; }
.finder-card__folder-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(12, 14, 18, 0.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
}
.finder-card__folder-badge svg { width: 16px; height: 16px; display: block; }

/* Card "em breve" (Finder): tracejado com um loader girando */
.finder-card--soon-card { cursor: default; background: transparent; box-shadow: none; }
.finder-card__soon {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 20px;
  text-align: center;
  border: 2px dashed rgba(15, 19, 24, 0.28);
  border-radius: 18px;
}
.finder-card__soon strong {
  font-family: "Sora", sans-serif;
  font-size: 1.05rem;
  color: rgba(15, 19, 24, 0.82);
}
.finder-card__soon span { color: rgba(15, 19, 24, 0.55); font-size: 0.82rem; max-width: 22ch; }
.finder-card__soon-loader,
.ios-folder__soon-loader {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(15, 19, 24, 0.18);
  border-top-color: rgba(15, 19, 24, 0.6);
  animation: soon-spin 0.9s linear infinite;
}
@keyframes soon-spin { to { transform: rotate(360deg); } }

/* Capa de pasta na pasta iOS */
.ios-folder__thumb--cover img,
.ios-folder__thumb--cover video { width: 100%; height: 100%; object-fit: cover; }
.ios-folder__thumb--cover { position: relative; }
.ios-folder__thumb--cover .finder-card__folder-badge {
  right: 5px;
  bottom: 5px;
  width: 22px;
  height: 22px;
}
.ios-folder__thumb--cover .finder-card__folder-badge svg { width: 12px; height: 12px; }

/* Card "em breve" na pasta iOS (linha inteira) */
.ios-folder__soon {
  grid-column: 1 / -1;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  background: none;
  padding: 14px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  cursor: default;
}
.ios-folder__soon strong { color: #fff; font-size: 0.92rem; }
.ios-folder__soon span { color: rgba(255, 255, 255, 0.72); font-size: 0.74rem; }
.ios-folder__soon-loader {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.75);
}

/* Bloco "amostra / em breve" dentro de uma pagina (galeria de fotos etc.) */
.block-soon {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 30px 22px;
  text-align: center;
  border: 2px dashed color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 18px;
  color: var(--text);
}
.block-soon strong { font-family: "Sora", sans-serif; font-size: 1.1rem; }
.block-soon span { color: var(--muted); font-size: 0.9rem; max-width: 46ch; line-height: 1.5; }
.block-soon__loader {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-top-color: var(--accent-1);
  animation: soon-spin 0.9s linear infinite;
}


/* =====================================================================
   V12 — NAO DESENHAR O QUE ESTA COBERTO
   =====================================================================
   Causa do bug dos "blocos pretos piscando" ao rolar no celular.

   Quando uma tela cheia (pagina de projeto, feed do Instagram) esta aberta,
   ela e OPACA e cobre tudo. Mesmo assim o navegador continuava rasterizando,
   a cada quadro: a home do celular com filter: blur(16px), a pasta iOS aberta
   com seus backdrop-filter, e o desktop inteiro (hero com 10 camadas, widgets,
   relogio animado). Medido: 44 camadas na GPU e 35,4 MB de textura para
   conteudo invisivel.

   Num celular a memoria de video e pequena. Ao estourar, o Chrome joga fora os
   ladrilhos ja desenhados para abrir espaco — e eles reaparecem como
   RETANGULOS PRETOS enquanto se rola. Por isso piorava quanto mais se navegava:
   a pressao na GPU ia se acumulando.

   content-visibility: hidden faz o navegador PULAR a renderizacao da subarvore
   (nao pinta, nao rasteriza, nao guarda textura). O conteudo continua no DOM,
   intacto, e volta na hora quando a tela fecha.
   ===================================================================== */
body.appview-open .app-shell,
body.appview-open .mobile-panel,
body.appview-open .ios-folder {
  content-visibility: hidden;
}

/* O desfoque da home e a operacao mais cara da pagina. Coberta, ela nao
   precisa nem ser desfocada. */
body.appview-open .mobile-phone__grid,
body.appview-open .mobile-phone__dock,
body.appview-open .mobile-phone__status {
  filter: none;
}

/* O modo cinema (video em tela cheia) cobre tudo do mesmo jeito. */
body.cinema-open .app-shell,
body.cinema-open .mobile-panel,
body.cinema-open .ios-folder,
body.cinema-open .mobile-appview {
  content-visibility: hidden;
}