/* Pórtico · portico.css
   Conceito: um pórtico aberto para um céu vivo. O céu mora dentro do arco; a pedra (a interface) fica em volta.
   Pigmentos do pórtico pintado: cal, tinta, ocre e o azul egípcio da noite.
   Tipos: Marcellus (letra de inscrição em pedra) para marca e títulos curtos; Literata para a leitura;
   Hanken Grotesk para a interface. */

:root {
  --cal: #E8EBE6;
  --marmore: #F5F6F2;
  --tinta: #131926;
  --cinza: #586173;
  --linha: rgba(19, 25, 38, 0.11);
  --ocre: #C48A2C;
  --ocre-texto: #855510;
  --ouro: #D6A044;
  --ouro-tinta: #1B1308;
  --azul: #22397F;
  --vidro: rgba(245, 246, 242, 0.8);
  --vidro-borda: rgba(255, 255, 255, 0.55);
  --sombra: 0 24px 60px -28px rgba(19, 25, 38, 0.38);
  --perigo: #A33A2A;
  --sobre: #F7F3EA;
  --sobre-suave: rgba(247, 243, 234, 0.78);
  /* os seis climas como cor (trilhas e blocos ligados a um clima) */
  --c-aurora: #C98434; --c-mar: #2B8A95; --c-pedra: #8A775A; --c-chuva: #557CA8; --c-noite: #4B51A8; --c-brasa: #BF532D;

  --f-inscricao: "Marcellus", "Cormorant SC", Georgia, serif;
  --f-leitura: "Literata", Georgia, "Times New Roman", serif;
  --f-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --escala: 1;
  --raio: 18px;
  --t-1: 0.75rem;   /* 12 */
  --t-2: 0.875rem;  /* 14 */
  --t-3: 1rem;      /* 16 */
  --t-4: 1.1875rem; /* 19 */
  --t-5: 1.5rem;    /* 24 */
  --t-6: 1.875rem;  /* 30 */
  --t-7: 2.375rem;  /* 38 */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cal: #0A0E1A; --marmore: #121828; --tinta: #E9E8E2; --cinza: #9CA4B6; --linha: rgba(233, 232, 226, 0.11);
    --ocre: #E3AA4E; --ocre-texto: #E8B868; --ouro: #DDA64B; --ouro-tinta: #1B1308; --azul: #8EA4E8;
    --vidro: rgba(13, 18, 32, 0.76); --vidro-borda: rgba(255, 255, 255, 0.08); --sombra: 0 24px 60px -24px rgba(0, 0, 0, 0.75); --perigo: #E8806C;
    --c-aurora: #E8A75A; --c-mar: #52B4BE; --c-pedra: #B8A484; --c-chuva: #8AA9CF; --c-noite: #9398E6; --c-brasa: #E57E58;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cal: #0A0E1A; --marmore: #121828; --tinta: #E9E8E2; --cinza: #9CA4B6; --linha: rgba(233, 232, 226, 0.11);
  --ocre: #E3AA4E; --ocre-texto: #E8B868; --ouro: #DDA64B; --ouro-tinta: #1B1308; --azul: #8EA4E8;
  --vidro: rgba(13, 18, 32, 0.76); --vidro-borda: rgba(255, 255, 255, 0.08); --sombra: 0 24px 60px -24px rgba(0, 0, 0, 0.75); --perigo: #E8806C;
  --c-aurora: #E8A75A; --c-mar: #52B4BE; --c-pedra: #B8A484; --c-chuva: #8AA9CF; --c-noite: #9398E6; --c-brasa: #E57E58;
  color-scheme: dark;
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--cal); color: var(--tinta);
  font-family: var(--f-ui); font-size: var(--t-3); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.em-ritual { overflow: hidden; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; opacity: 0.55; }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
img, svg, canvas, video { max-width: 100%; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* colunas caneladas nas laterais, só em telas largas */
@media (min-width: 760px) {
  body::before, body::after {
    content: ""; position: fixed; top: 0; bottom: 0; width: 64px; pointer-events: none; opacity: 0.5;
    background: repeating-linear-gradient(90deg, transparent 0 9px, var(--linha) 9px 10px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  }
  body::before { left: max(24px, calc(50% - 22rem)); }
  body::after { right: max(24px, calc(50% - 22rem)); }
}

/* ---------------- moldura do app ---------------- */
.app { max-width: 31rem; margin-inline: auto; padding-inline: 16px; padding-block: 0 calc(96px + env(safe-area-inset-bottom, 0px)); }
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; height: 56px;
  margin-inline: -16px; padding-inline: 16px;
  background: color-mix(in srgb, var(--cal) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.marca { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--f-inscricao); font-size: 0.95rem; letter-spacing: 0.32em; color: var(--tinta); }
.marca svg { width: 22px; height: 22px; color: var(--ocre); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-inscricao); font-size: 1rem; color: var(--tinta);
  border: 1px solid var(--linha); background: var(--marmore);
}
.tela { outline: none; display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }

.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 31rem; margin-inline: auto;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--vidro); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  border-top: 1px solid var(--linha);
}
@media (min-width: 31rem) { .abas { border-inline: 1px solid var(--linha); border-radius: 22px 22px 0 0; } }
.abas button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--cinza); position: relative; }
.abas svg { width: 24px; height: 24px; }
.abas button[aria-current="page"] { color: var(--tinta); }
.abas button[aria-current="page"]::after { content: ""; position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--ocre); }

/* ---------------- tipografia comum ---------------- */
.saudacao h1, .cabeca h1 { font-family: var(--f-leitura); font-size: var(--t-6); line-height: 1.15; letter-spacing: -0.01em; }
.data-hoje, .rotulo {
  font-size: var(--t-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinza);
}
.saudacao, .cabeca { display: flex; flex-direction: column; gap: 6px; }
.lead { color: var(--cinza); font-size: var(--t-3); max-width: 34rem; }
.h-secao { font-family: var(--f-inscricao); font-size: var(--t-4); letter-spacing: 0.02em; }
.pequeno { font-size: var(--t-2); color: var(--cinza); }
.suave { opacity: 0.8; }
.nota { font-size: var(--t-2); color: var(--cinza); }
.nota .ic { vertical-align: -0.25em; margin-right: 0.35rem; }
.nota.erro { color: var(--perigo); }

/* ---------------- botões ---------------- */
.primario {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 50px; padding: 0 1.4rem; border-radius: 999px;
  background: var(--ouro); color: var(--ouro-tinta); font-weight: 600; font-size: var(--t-3); letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px -12px rgba(150, 95, 20, 0.7);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.primario:hover { filter: brightness(1.05); }
.primario:active { transform: scale(0.98); }
.largo { width: 100%; }
.secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 46px; padding: 0 1.1rem; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--marmore); color: var(--tinta); font-weight: 500;
}
.secundario-claro {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 46px; padding: 0 1.1rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45); color: #FBF7EE; font-weight: 500; background: rgba(255, 255, 255, 0.08);
}
.link { color: var(--ocre-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; display: inline-flex; align-items: center; gap: 0.3rem; }
.link-ceu { color: var(--sobre); opacity: 0.85; font-weight: 500; padding: 10px 12px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.icone-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linha); background: var(--marmore); }
.icone-btn svg, .icone-ceu svg { width: 20px; height: 20px; }
.mini { font-size: var(--t-1); font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; margin-left: 0.3rem; }
.perigo { color: var(--perigo); }
.perigo-btn { background: #B5442E; color: #fff;   /* 5,5:1 com texto branco; o coral --perigo dava 2,7:1 */ border-radius: 999px; padding: 10px 18px; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--marmore);
  font-size: var(--t-2); font-weight: 500; color: var(--tinta); transition: background 0.15s, border-color 0.15s;
}
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--cal); border-color: var(--tinta); }

input[type="text"], input[type="search"], input[type="time"], textarea {
  width: 100%; border: 1px solid var(--linha); background: var(--marmore); color: var(--tinta);
  border-radius: 14px; padding: 12px 14px; font-size: var(--t-3); line-height: 1.5;
}
textarea { resize: vertical; min-height: 4.5rem; font-family: var(--f-leitura); }
input:focus, textarea:focus { outline: 2px solid var(--ocre); outline-offset: 1px; }
input[type="range"] { accent-color: var(--ocre); width: 46%; }
input[type="checkbox"] { accent-color: var(--ocre); width: 22px; height: 22px; }

/* ---------------- Hoje: o portal ---------------- */
.portal {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 5; max-height: 72vh; width: 100%;
  border-radius: 50% 50% 22px 22px / 40% 40% 22px 22px;
  background: #0d1530; color: #FBF7EE;
  box-shadow: var(--sombra);
}
.portal::before {
  content: ""; position: absolute; inset: 12px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(255, 238, 205, 0.32);
  border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px;
}
.portal-ceu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.portal::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(5, 8, 18, 0.78) 0%, rgba(5, 8, 18, 0.35) 38%, rgba(5, 8, 18, 0) 62%); }
.portal-conteudo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 26px 26px; display: flex; flex-direction: column; gap: 10px; }
.rotulo.claro { color: rgba(251, 247, 238, 0.82); }
/* fechamento da semana (1.7.0) */
.fs-reflexao { margin: 12px 0 0; padding: 12px 0 0 14px; border-left: 2px solid var(--ouro, #c9a86a); font: italic 15px/1.45 Georgia, "Times New Roman", serif; color: inherit; }
.fs-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.fs-dia { padding: 10px 0; min-width: 0; font-size: 0.9rem; text-align: center; }
.fs-sem { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
.fs-lista { margin: 8px 0; padding-left: 18px; }
.fs-principal { margin: 8px 0 0; }
/* "Mais": o resto da entrada fica recolhido, sem competir com o pórtico */
.mais { margin: 18px 0 0; }
.mais > summary { list-style: none; cursor: pointer; text-align: center; padding: 10px; color: var(--cinza); font-size: 0.95rem; text-decoration: underline; text-underline-offset: 4px; }
.mais > summary::-webkit-details-marker { display: none; }
.mais[open] > summary { margin-bottom: 8px; }
/* o vitral do pórtico (1.8.0): três arcos concêntricos e a luz no centro, como a luz que atravessa uma abertura */
.portal-vitral { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.portal-vitral::before { content: ""; position: absolute; left: 50%; top: 9%; transform: translateX(-50%); width: 56%; height: 36%; border-radius: 999px 999px 0 0; background: radial-gradient(closest-side at 50% 100%, rgba(233, 200, 130, 0.34), rgba(233, 200, 130, 0.06) 70%, transparent); }
.portal-vitral i { position: absolute; left: 50%; transform: translateX(-50%); border: 1px solid rgba(233, 200, 130, 0.6); border-bottom: 0; border-radius: 999px 999px 0 0; }
.portal-vitral i:nth-child(1) { top: 9%; width: 56%; height: 36%; }
.portal-vitral i:nth-child(2) { top: 12.5%; width: 47%; height: 31%; border-color: rgba(233, 200, 130, 0.38); }
.portal-vitral i:nth-child(3) { top: 16%; width: 38%; height: 26%; border-color: rgba(233, 200, 130, 0.2); }
/* luz combinada do portal (1.9.0): pulso, raios em dois planos e feixes subindo, sem competir com o texto */
.portal-vitral::after { content: ""; position: absolute; left: 50%; top: 40%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(241, 217, 160, 0.16) 0deg 2deg, transparent 2deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, transparent 62%); animation: portal-raios 60s linear infinite; }
.portal-vitral .pulso { position: absolute; left: 50%; top: 40%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1px solid rgba(241, 217, 160, 0.5); animation: portal-pulso 3.6s ease-out infinite; }
.portal-vitral .pulso:nth-of-type(2) { animation-delay: 1.2s; }
.portal-vitral .feixe { position: absolute; left: 50%; bottom: 0; width: 1px; transform: translateX(-50%); background: linear-gradient(0deg, rgba(241, 217, 160, 0), rgba(241, 217, 160, 0.6) 45%, rgba(241, 217, 160, 0)); opacity: 0.5; animation: portal-feixe 9s linear infinite; }
.portal-vitral .feixe.b { width: 2px; opacity: 0.3; animation-duration: 13s; animation-delay: 4s; }
@keyframes portal-raios { to { transform: rotate(360deg); } }
@keyframes portal-pulso { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes portal-feixe { 0% { transform: translate(-50%, 0) scaleY(0.2); opacity: 0; } 15% { opacity: 0.6; } 100% { transform: translate(-50%, -70%) scaleY(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .portal-vitral .pulso, .portal-vitral .feixe, .portal-vitral::after { animation: none; } }

.portal-titulo { font-family: var(--f-leitura); font-size: clamp(1.6rem, 6.6vw, 2.05rem); line-height: 1.14; letter-spacing: -0.01em; }
.portal-meta { display: flex; align-items: center; gap: 0.45rem; font-size: var(--t-2); color: rgba(251, 247, 238, 0.82); margin-bottom: 6px; }
.portal-feito { font-size: var(--t-2); color: rgba(251, 247, 238, 0.9); display: block; }
.portal-feito .ic { color: #F4C878; vertical-align: -0.25em; margin-right: 0.35rem; }
.portal-feito em { font-family: var(--f-leitura); font-style: italic; }
.portal-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.portal-acoes > * { flex: 1 1 auto; }
.dica { font-size: var(--t-2); color: var(--cinza); margin-top: 0; }
.dica.instalar { margin-top: 0; display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ocre) 40%, var(--linha)); }
.dica.instalar .ic { color: var(--ocre-texto); margin-top: 2px; }
.em-breve { font-style: normal; font-size: var(--t-1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ocre-texto); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; margin: 0 2px; }

/* ---------------- colunata ---------------- */
.colunata { display: flex; flex-direction: column; gap: 12px; }
.colunata-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.colunata-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; padding: 16px 10px 16px; border-radius: var(--raio); background: var(--marmore); border: 1px solid var(--linha); }
.colunata-semana .dia { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--t-1); font-weight: 600; color: var(--cinza); }
.colunata-semana .dia.hoje span { color: var(--tinta); }
.colunata-semana .dia span { position: relative; }
.colunata-semana .dia.hoje span::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ocre); }
.coluna { width: 22px; height: 58px; color: var(--cinza); }
.coluna.de-pe { color: var(--ocre); }
.coluna.base .capitel, .coluna.base .fuste { opacity: 0.12; }
.coluna.futura { opacity: 0.35; }
.coluna.futura .capitel, .coluna.futura .fuste { opacity: 0.15; }
.coluna.erguendo { color: #F4C878; width: 44px; height: 116px; }
.coluna.erguendo .fuste { stroke-dasharray: 1; stroke-dashoffset: 1; animation: erguer 1.6s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.coluna.erguendo .capitel { opacity: 0; animation: surgir 0.7s 1.7s ease forwards; }
@keyframes erguer { to { stroke-dashoffset: 0; } }
@keyframes surgir { to { opacity: 1; } }

/* ---------------- ações rápidas ---------------- */
.acoes-rapidas { display: flex; flex-direction: column; gap: 10px; }
.cartao-acao {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%;
  padding: 16px; border-radius: var(--raio); background: var(--marmore); border: 1px solid var(--linha);
  transition: border-color 0.15s, transform 0.15s;
}
.cartao-acao:hover { border-color: color-mix(in srgb, var(--ocre) 45%, var(--linha)); }
.cartao-acao:active { transform: scale(0.99); }
.cartao-acao strong { display: block; font-weight: 600; margin-bottom: 2px; }
.cartao-acao span span { display: block; font-size: var(--t-2); color: var(--cinza); }
.cartao-icone { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ocre-texto); background: color-mix(in srgb, var(--ocre) 14%, transparent); }

/* ---------------- Jornadas ---------------- */
.jornadas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jornada {
  width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px 14px; border-radius: 120px 120px 16px 16px / 70px 70px 16px 16px;
  background: var(--marmore); border: 1px solid var(--linha); min-height: 150px;
}
.jornada.agora { border-color: var(--ocre); box-shadow: 0 0 0 1px var(--ocre) inset; }
.jornada[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.jornada-mes { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ocre-texto); padding-top: 14px; }
.jornada-titulo { font-family: var(--f-inscricao); font-size: 1.12rem; line-height: 1.2; }
.jornada-sub { font-size: 0.8125rem; color: var(--cinza); line-height: 1.35; flex: 1; }
.jornada-progresso { height: 3px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.jornada-progresso span { display: block; height: 100%; background: var(--ocre); }

.lista-dias { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.dia-item { width: 100%; display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 12px 4px; border-bottom: 1px solid var(--linha); }
.dia-item.hoje { background: color-mix(in srgb, var(--ocre) 9%, transparent); border-radius: 12px; }
.dia-num { font-family: var(--f-inscricao); font-size: 1.15rem; color: var(--ocre-texto); text-align: center; font-variant-numeric: tabular-nums; }
.dia-texto { min-width: 0; }
.dia-texto strong { display: block; font-family: var(--f-leitura); font-weight: 500; font-size: var(--t-3); }
.dia-texto span { font-size: var(--t-1); color: var(--cinza); }
.dia-estado { color: var(--cinza); }
.dia-estado .ic { width: 18px; height: 18px; }
.dia-item[data-livre="false"] .dia-texto strong { color: var(--cinza); }

/* ---------------- folha ---------------- */
.folha-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(5, 8, 18, 0); display: flex; align-items: flex-end; justify-content: center; transition: background 0.25s; }
.folha-fundo.aberta { background: rgba(5, 8, 18, 0.5); }
.folha {
  position: relative; width: 100%; max-width: 31rem; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--cal); border-radius: 26px 26px 0 0; border: 1px solid var(--linha); border-bottom: 0;
  padding: 26px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.folha-fundo.larga .folha { max-width: 36rem; }
.folha-fundo.aberta .folha { transform: none; }
.folha-fechar { position: absolute; top: 14px; right: 14px; }
.folha-corpo { display: flex; flex-direction: column; gap: 14px; }
.folha-titulo { font-family: var(--f-leitura); font-size: var(--t-5); line-height: 1.2; padding-right: 44px; }
@media (min-width: 700px) {
  .folha-fundo { align-items: center; }
  .folha { border-radius: 26px; border-bottom: 1px solid var(--linha); transform: translateY(24px); opacity: 0; transition: transform 0.28s, opacity 0.2s; }
  .folha-fundo.aberta .folha { opacity: 1; }
}

/* ---------------- Conselho ---------------- */
.conselho-form { display: flex; flex-direction: column; gap: 10px; }
.sugestoes .chip { font-size: var(--t-1); padding: 6px 12px; }
.exame { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--raio); background: var(--marmore); border: 1px dashed var(--linha); }
.conselho-botoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.conselho-botoes .primario { flex: 1 1 14rem; }
.resposta { display: flex; flex-direction: column; gap: 16px; padding: 20px 18px; border-radius: var(--raio); background: var(--marmore); border: 1px solid var(--linha); }
.resposta.compacta { padding: 14px; margin-top: 10px; background: transparent; }
.acolhimento { font-family: var(--f-leitura); font-size: var(--t-4); line-height: 1.55; }
.dicotomia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 380px) { .dicotomia { grid-template-columns: 1fr; } }
.lado { padding: 14px; border-radius: 14px; border: 1px solid var(--linha); }
.lado.seu { border-color: color-mix(in srgb, var(--ocre) 50%, var(--linha)); background: color-mix(in srgb, var(--ocre) 8%, transparent); }
.lado ul { margin: 8px 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-2); }
.passo-agora p:last-child { font-weight: 600; margin-top: 4px; }
.ancora-media { margin: 0; font-family: var(--f-leitura); font-style: italic; font-size: var(--t-5); line-height: 1.35; border-left: 2px solid var(--ocre); padding-left: 14px; }
.pensando-bloco { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--raio); background: var(--marmore); border: 1px solid var(--linha); color: var(--cinza); }
.pensando-arco { width: 28px; height: 34px; border: 1.6px solid var(--ocre); border-bottom: 0; border-radius: 14px 14px 0 0; animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: 0.35; transform: scale(0.9); } }
.crise { padding: 18px; border-radius: var(--raio); border: 1px solid var(--perigo); background: color-mix(in srgb, var(--perigo) 9%, var(--marmore)); display: flex; flex-direction: column; gap: 8px; }
.crise-titulo { font-weight: 600; font-size: var(--t-4); }
.crise-numeros { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; }
.crise strong { font-size: var(--t-4); margin-right: 0.3rem; }
.anteriores { display: flex; flex-direction: column; gap: 8px; }
details.registro { padding: 12px 14px; border-radius: 14px; background: var(--marmore); border: 1px solid var(--linha); }
details.registro summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; list-style: none; }
details.registro summary::-webkit-details-marker { display: none; }

/* ---------------- Diário ---------------- */
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.numeros > div { padding: 14px 12px; border-radius: 14px; background: var(--marmore); border: 1px solid var(--linha); }
.numeros dt { font-size: var(--t-1); color: var(--cinza); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.numeros dd { margin: 4px 0 0; font-family: var(--f-inscricao); font-size: var(--t-5); font-variant-numeric: tabular-nums; }
.numeros dd.texto { font-family: var(--f-leitura); font-size: var(--t-3); }
.busca { position: relative; }
.busca .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cinza); }
.busca input { padding-left: 42px; }
.registros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.registro { padding: 16px; border-radius: var(--raio); background: var(--marmore); border: 1px solid var(--linha); display: flex; flex-direction: column; gap: 6px; }
.registro h3 { font-family: var(--f-leitura); font-size: var(--t-4); }
.pergunta-reg { font-style: italic; color: var(--cinza); font-family: var(--f-leitura); font-size: var(--t-2); }
.resposta-reg { font-family: var(--f-leitura); white-space: pre-wrap; }
.compromisso-reg { font-size: var(--t-2); }
.compromisso-reg span { display: block; font-size: var(--t-1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ocre-texto); }
.registro .link { align-self: flex-start; font-size: var(--t-2); }
.diario-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 32px 18px; border-radius: var(--raio); border: 1px dashed var(--linha); color: var(--cinza); }
.vazio .coluna { width: 34px; height: 90px; }

/* ---------------- Você ---------------- */
.voltar { align-self: flex-start; text-decoration: none; margin-bottom: 4px; }
.grupo { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--linha); scroll-margin-top: 72px; }
.grupo:last-child { border-bottom: 0; }
.grupo > .primario, .grupo > .secundario { align-self: flex-start; }
.linha { display: flex; gap: 10px; align-items: center; }
.linha input[type="time"] { flex: 1; }
.controle { justify-content: space-between; min-height: 44px; }
.passo-tam { display: flex; align-items: center; gap: 10px; }
.passo-tam output { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.confirmar { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--perigo); }

/* ---------------- compartilhar ---------------- */
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: var(--marmore); border: 1px solid var(--linha); }
.segmentos button { padding: 8px 6px; border-radius: 999px; font-size: var(--t-2); font-weight: 600; color: var(--cinza); }
.segmentos button[aria-pressed="true"] { background: var(--tinta); color: var(--cal); }
.previa { display: grid; place-items: center; padding: 6px 0; }
.previa canvas, .previa video { width: auto; max-width: 100%; max-height: 46vh; border-radius: 14px; box-shadow: var(--sombra); background: #0b1020; }
.estilos { justify-content: center; }
.barra { height: 6px; border-radius: 6px; background: var(--linha); overflow: hidden; margin-top: 10px; }
.barra span { display: block; height: 100%; width: 0; background: var(--ocre); transition: width 0.25s linear; }
.partilha-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.partilha-acoes > * { flex: 1 1 10rem; }
.convite-texto { padding: 16px; border-radius: 14px; background: var(--marmore); border: 1px solid var(--linha); font-family: var(--f-leitura); user-select: text; }

/* ---------------- premium ---------------- */
.premium { display: flex; flex-direction: column; gap: 16px; }
.beneficios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.beneficios li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-2); }
.beneficios .ic { color: var(--ocre-texto); width: 22px; height: 22px; }
.beneficios strong { display: block; font-size: var(--t-3); }
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 420px) { .planos { grid-template-columns: 1fr; } }
.plano { padding: 14px 12px; border-radius: 16px; border: 1px solid var(--linha); background: var(--marmore); display: flex; flex-direction: column; gap: 4px; }
.plano.destaque { border-color: var(--ocre); box-shadow: 0 0 0 1px var(--ocre) inset; }
.plano-nome { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ocre-texto); }
.plano-preco { font-family: var(--f-inscricao); font-size: var(--t-5); font-variant-numeric: tabular-nums; }
.plano-preco span { font-family: var(--f-ui); font-size: var(--t-2); color: var(--cinza); }
.plano-obs { font-size: var(--t-1); color: var(--cinza); }

/* ---------------- aviso ---------------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 120;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(26rem, calc(100% - 32px)); padding: 12px 18px; border-radius: 14px;
  background: var(--tinta); color: var(--cal); font-size: var(--t-2); font-weight: 500; text-align: center;
  transition: opacity 0.2s, transform 0.2s;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }
.aviso:empty { display: none; }

/* =================== ritual, pausa e abertura (sobre o céu) =================== */
.ritual, .entrada { position: fixed; inset: 0; z-index: 60; color: var(--sobre); background: #05070f; overflow: hidden; }
.ritual { opacity: 0; transition: opacity 0.38s ease; }
.ritual.aberto { opacity: 1; }
.ritual[data-ceu="claro"], .entrada[data-ceu="claro"] { --sobre: #111724; --sobre-suave: rgba(17, 23, 36, 0.74); }
.ritual-ceu, .entrada-ceu { position: absolute; inset: 0; width: 100%; height: 100%; }
.ritual-veu, .entrada-veu { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 8, 18, 0.22), rgba(5, 8, 18, 0) 30%, rgba(5, 8, 18, 0) 70%, rgba(5, 8, 18, 0.28)); }
.ritual-topo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: linear-gradient(to bottom, rgba(5, 8, 18, 0.72), rgba(5, 8, 18, 0));   /* o texto não passa por baixo do relógio sem véu */
}
.icone-ceu { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--sobre); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ritual[data-ceu="claro"] .icone-ceu { background: rgba(255, 255, 255, 0.4); border-color: rgba(17, 23, 36, 0.12); }
.relogio { justify-self: center; position: relative; width: 120px; height: 64px; }
.relogio svg { width: 120px; height: 64px; overflow: visible; }
.relogio-trilho, .relogio-feito { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.relogio-trilho { stroke: var(--sobre); opacity: 0.25; stroke-dasharray: 2 4; }
.relogio-feito { stroke: #F4C878; stroke-dasharray: 0 100; }
.relogio-sol { fill: #F7CD80; filter: drop-shadow(0 0 6px rgba(247, 205, 128, 0.9)); }
.relogio-tempo { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: var(--t-1); font-weight: 600; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: var(--sobre-suave); }
.pausa-rotulo { justify-self: center; font-family: var(--f-inscricao); letter-spacing: 0.3em; text-transform: uppercase; font-size: var(--t-2); }
.passos {
  position: absolute; z-index: 3; left: 0; right: 0; top: calc(74px + env(safe-area-inset-top, 0px));
  display: flex; justify-content: center; gap: 14px; margin: 0; padding: 0 16px; list-style: none;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sobre-suave);
}
.passos li { display: flex; align-items: center; gap: 5px; opacity: 0.55; transition: opacity 0.3s; }
.passos li .ponto { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.passos li.feito { opacity: 0.8; }
.passos li.feito .ponto { background: currentColor; }
.passos li[aria-current] { opacity: 1; color: var(--sobre); }
.passos li[aria-current] .ponto { background: #F4C878; border-color: #F4C878; }
@media (max-width: 560px) {
  .passos { gap: 10px; }
  .passos li:not([aria-current]) .nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.ritual-corpo, .entrada-corpo {
  position: absolute; inset: 0; z-index: 2; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: calc(116px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px));
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.entrada-corpo { padding-top: calc(48px + env(safe-area-inset-top, 0px)); justify-content: center; }
.ritual[data-modo="pausa"] .ritual-corpo { padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
.ritual-corpo > *, .entrada-corpo > * { width: 100%; max-width: 38rem; }
.ritual-corpo.saindo, .entrada-corpo.saindo { opacity: 0; transform: translateY(8px); }
.ritual-rodape { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; }
.ritual-rodape .primario { width: min(100%, 22rem); }
.sobre-ceu { color: var(--sobre); }
.sobre-ceu.suave, .suave.sobre-ceu { color: var(--sobre-suave); opacity: 1; }
.ritual .rotulo.sobre-ceu, .entrada .rotulo.sobre-ceu { color: var(--sobre-suave); }

.vidro {
  color: var(--tinta); background: var(--vidro);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid var(--vidro-borda); border-radius: 26px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
  padding: 26px 22px;
}
.vidro .rotulo { color: var(--cinza); }

/* respirar */
.respirar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.sopro { --dur: 4s; position: relative; width: 220px; height: 250px; display: grid; place-items: center; }
.sopro-arco, .sopro-luz { position: absolute; transition: transform var(--dur) cubic-bezier(0.45, 0, 0.55, 1), opacity var(--dur) ease; }
.sopro-arco { width: 116px; height: 150px; border: 1.6px solid var(--sobre); border-radius: 58px 58px 10px 10px / 58px 58px 10px 10px; opacity: 0.9; }
.sopro-luz { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 222, 160, 0.75), rgba(255, 222, 160, 0) 70%); opacity: 0.35; }
.sopro.cheio .sopro-arco { transform: scale(1.38); }
.sopro.cheio .sopro-luz { transform: scale(1.9); opacity: 0.85; }
.sopro.segura .sopro-luz { opacity: 1; }
.sopro.vazio .sopro-arco { transform: scale(1); }
.sopro.vazio .sopro-luz { transform: scale(1); opacity: 0.3; }
.sopro-fase { font-family: var(--f-inscricao); font-size: var(--t-7); letter-spacing: 0.08em; outline: none; }
.sopro-conta { font-size: var(--t-2); color: var(--sobre-suave); }

/* ler */
.leitura { display: flex; flex-direction: column; gap: 10px; }
.leitura-titulo { font-family: var(--f-leitura); font-size: clamp(1.7rem, 6vw, 2.25rem); line-height: 1.15; letter-spacing: -0.01em; outline: none; }
.leitura-meta { font-size: var(--t-2); color: var(--cinza); margin-bottom: 8px; }
.leitura-texto { display: flex; flex-direction: column; gap: 1em; }
.leitura-texto p { font-family: var(--f-leitura); font-size: calc(1.125rem * var(--escala)); line-height: 1.72; font-variation-settings: "opsz" 14; transition: background 0.3s; border-radius: 8px; hyphens: manual; }
.leitura-texto p:first-child::first-letter { font-family: var(--f-inscricao); float: left; font-size: 3.5em; line-height: 0.86; padding: 0.06em 0.1em 0 0; color: var(--ocre-texto); }
.leitura-texto.f-dialogo p:first-child::first-letter { font: inherit; float: none; padding: 0; color: inherit; }
.leitura-texto p.lendo { background: color-mix(in srgb, var(--ocre) 14%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ocre) 14%, transparent); }
.fala .voz { display: block; font-family: var(--f-ui); font-size: var(--t-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ocre-texto); margin-bottom: 2px; }
.ouvir { align-self: flex-start; margin-top: 8px; }
.nota.apoio { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--azul) 8%, transparent); border: 1px solid var(--linha); }
.ouvir[aria-pressed="true"] { border-color: var(--ocre); color: var(--ocre-texto); }

/* praticar */
.pratica { display: flex; flex-direction: column; gap: 12px; }
.pratica-texto { font-family: var(--f-leitura); font-size: calc(1.375rem * var(--escala)); line-height: 1.4; outline: none; }
.fio { border: 0; height: 1px; background: var(--linha); margin: 6px 0; width: 100%; }
.rotina-texto { font-family: var(--f-leitura); font-size: calc(1.0625rem * var(--escala)); line-height: 1.6; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--ocre) 9%, transparent); border-left: 2px solid var(--ocre); }
.ia-adaptar { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.adaptada:empty { display: none; }
.adaptada { font-size: var(--t-2); color: var(--cinza); }
.adaptada.cheia { font-family: var(--f-leitura); font-size: calc(1.0625rem * var(--escala)); color: var(--tinta); padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ocre) 45%, var(--linha)); }
.adaptada.pensando { animation: pulsar 1.6s ease-in-out infinite; }

/* escrever */
.escrever { display: flex; flex-direction: column; gap: 12px; }
.pergunta { font-family: var(--f-leitura); font-size: calc(1.375rem * var(--escala)); line-height: 1.4; display: block; }
.escrever textarea { min-height: 9rem; font-size: calc(1.0625rem * var(--escala)); background: color-mix(in srgb, var(--marmore) 70%, transparent); }

/* levar */
.levar { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; text-align: center; }
.ancora-grande { font-family: var(--f-leitura); font-style: italic; font-size: clamp(1.8rem, 7.4vw, 2.75rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--sobre); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); outline: none; }
.ritual[data-ceu="claro"] .ancora-grande { text-shadow: 0 1px 24px rgba(255, 255, 255, 0.5); }
.compromisso { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; }
.compromisso-texto { font-family: var(--f-leitura); font-size: calc(1.0625rem * var(--escala)); line-height: 1.55; }

/* concluído */
.concluido { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.concluido-titulo { font-family: var(--f-leitura); font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.2; outline: none; }
.ergue { filter: drop-shadow(0 0 18px rgba(244, 200, 120, 0.5)); }

/* pausa: sentir */
.sentir { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; text-align: center; }
.sentir-titulo { font-family: var(--f-leitura); font-size: clamp(1.9rem, 7.6vw, 2.6rem); line-height: 1.15; outline: none; }
.sentimentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sentimento {
  min-height: 64px; padding: 12px; border-radius: 18px; font-family: var(--f-leitura); font-size: var(--t-4);
  color: var(--tinta); background: var(--vidro); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform 0.15s;
}
.sentimento:active { transform: scale(0.97); }

/* abertura */
.boas-vindas { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.selo { width: 112px; height: 112px; color: #F4C878; }
.selo path, .selo circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.selo-arco { stroke-dasharray: 200; stroke-dashoffset: 200; animation: desenhar 2.4s 0.2s cubic-bezier(0.3, 0.7, 0.2, 1) forwards; }
.selo-chao { stroke-dasharray: 90; stroke-dashoffset: 90; animation: desenhar 1.2s 1.6s ease forwards; }
.selo-sol { fill: currentColor !important; opacity: 0; animation: surgir 1s 2.4s ease forwards; filter: drop-shadow(0 0 8px rgba(244, 200, 120, 0.9)); }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.marca-grande { font-family: var(--f-inscricao); font-size: clamp(2.4rem, 11vw, 3.4rem); letter-spacing: 0.3em; padding-left: 0.3em; line-height: 1; color: var(--sobre); }
.assinatura { font-family: var(--f-leitura); font-style: italic; font-size: var(--t-5); color: var(--sobre); }
.origem { max-width: 26rem; color: var(--sobre-suave); font-size: var(--t-3); line-height: 1.6; margin-bottom: 10px; }
.boas-vindas .primario { max-width: 20rem; }
.pergunta-entrada { display: flex; flex-direction: column; gap: 14px; }
.pergunta-entrada h1 { font-family: var(--f-leitura); font-size: var(--t-6); line-height: 1.2; outline: none; }
.pergunta-entrada .chip { background: color-mix(in srgb, var(--marmore) 75%, transparent); }
.pergunta-entrada .chip[aria-pressed="true"] { background: var(--tinta); }
.pergunta-entrada .primario { margin-top: 6px; }
.pronto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.pronto-titulo { font-family: var(--f-leitura); font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.15; color: var(--sobre); outline: none; }
.pronto p { max-width: 26rem; }
.pronto .primario { max-width: 20rem; margin-top: 8px; }


/* =================== 1.1: usabilidade diária e personalização =================== */

/* Hoje: modo rápido dentro do portal, linha de preferências e fechamento do dia */
.rapido { align-self: center; font-size: var(--t-2); padding: 8px 10px 2px; opacity: 0.9; }
.prefs {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 0; padding: 11px 14px; text-align: left;
  border-radius: 14px; border: 1px solid var(--linha); background: var(--marmore); color: var(--cinza); font-size: var(--t-2); font-weight: 500;
}
.prefs .ic:first-child { color: var(--ocre-texto); }
.prefs span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prefs .ic:last-child { opacity: 0.6; }
.fechamento {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--raio);
  background: var(--marmore); border: 1px solid color-mix(in srgb, var(--ocre) 45%, var(--linha));
}
.fechamento-compromisso { font-family: var(--f-leitura); font-size: var(--t-4); line-height: 1.45; }
.fechamento-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.fechamento-botoes .secundario { flex: 1 1 auto; }
.fechamento-resposta { font-family: var(--f-leitura); font-style: italic; font-size: var(--t-4); line-height: 1.45; }

/* Jornadas: para você */
.jornada { position: relative; }
.para-voce {
  position: absolute; top: 10px; right: 10px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ouro-tinta); background: var(--ouro); border-radius: 999px; padding: 3px 8px;
}
.jornada.sua { border-color: color-mix(in srgb, var(--ouro) 60%, var(--linha)); }

/* Você: Meu ritual */
.sub { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ocre-texto); margin-top: 10px; }
.linha-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.vozes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.voz { display: flex; gap: 8px; align-items: stretch; }
.voz-escolher {
  flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 11px 14px;
  border-radius: 14px; border: 1px solid var(--linha); background: var(--marmore);
}
.voz-escolher strong { font-weight: 600; }
.voz-escolher span { font-size: var(--t-2); color: var(--cinza); }
.voz-escolher[aria-pressed="true"] { border-color: var(--ocre); box-shadow: 0 0 0 1px var(--ocre) inset; }
.voz-ouvir { min-height: auto; padding: 0 12px; flex: none; }
.voz-ouvir[aria-pressed="true"] { border-color: var(--ocre); color: var(--ocre-texto); }
.som-controles { display: flex; flex-direction: column; gap: 10px; }
.som-controles input[type="range"] { width: 52%; }
.visuais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.visual {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px;
  border-radius: 16px; border: 1px solid var(--linha); background: var(--marmore); font-weight: 500; color: var(--tinta);
}
.visual[aria-pressed="true"] { border-color: var(--ocre); box-shadow: 0 0 0 1px var(--ocre) inset; }
.visual-mini { display: block; position: relative; width: 100%; max-width: 120px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #0d1530; }
.visual-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visual-mini.sem-foto { background: linear-gradient(to bottom, #3d76c2, #9cb5d4 60%, #ead6b0); }
.mini-aviso { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px; font-size: var(--t-1); font-weight: 500; color: #FBF7EE; background: rgba(5, 8, 18, 0.55); text-align: center; }

/* paisagem: a foto do clima por cima do céu, com movimento lento e um gradiente para o texto ler bem */
.ritual-cena { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
.ritual-cena img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center; animation: cena-respira 40s ease-in-out infinite alternate; }
.ritual-cena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 8, 18, 0.42), rgba(5, 8, 18, 0.18) 30%, rgba(5, 8, 18, 0.22) 65%, rgba(5, 8, 18, 0.6)); }
.ritual[data-visual="paisagem"] .ritual-cena { opacity: 1; }
.ritual[data-visual="paisagem"] .ritual-ceu { visibility: hidden; transition: visibility 0s 1s; }
.portal-cena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 0.9s ease; animation: cena-respira 40s ease-in-out infinite alternate; }
.portal[data-visual="paisagem"] .portal-cena { opacity: 1; }
.portal[data-visual="paisagem"] .portal-ceu { visibility: hidden; transition: visibility 0s 1s; }
@keyframes cena-respira { from { transform: scale(1); } to { transform: scale(1.06); } }

/* narração: voz natural destaca o bloco inteiro, de leve */
.leitura-texto.narrando { background: color-mix(in srgb, var(--ocre) 9%, transparent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ocre) 9%, transparent); border-radius: 10px; }
.narracao-nota { margin-top: -2px; }
.ouvir-abertura { max-width: 20rem; }
.ouvir-abertura[aria-pressed="true"] { border-color: #F4C878; color: #F4C878; }
.entrada[data-ceu="claro"] .secundario-claro { color: var(--sobre); border-color: rgba(17, 23, 36, 0.3); background: rgba(255, 255, 255, 0.35); }

/* método e Sobre o Pórtico */
.etapas { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }
.etapas li::marker { color: var(--ocre-texto); font-family: var(--f-inscricao); }
.etapas strong { font-family: var(--f-inscricao); font-weight: 400; letter-spacing: 0.04em; margin-right: 0.4rem; }
.etapas span { color: var(--cinza); }
.metodo .pequeno { margin-top: 2px; }
.metodo .link { align-self: center; }
.sobre { display: flex; flex-direction: column; gap: 10px; }
.sobre h3 { font-family: var(--f-inscricao); font-size: var(--t-3); letter-spacing: 0.04em; margin-top: 8px; }
.sobre p { font-size: var(--t-2); line-height: 1.6; }
.sobre .etapas { font-size: var(--t-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .sopro-arco, .sopro-luz { transition-duration: 0.01ms !important; }
  .ritual-cena img, .portal-cena { animation: none !important; }
}


/* =================== 1.2: trilhas de 7 dias e sons para dormir =================== */

/* o clima vira uma cor herdável (o padrão, sem clima, é o ocre) */
:root { --cor-clima: var(--ocre); }
[data-clima="aurora"] { --cor-clima: var(--c-aurora); }
[data-clima="mar"] { --cor-clima: var(--c-mar); }
[data-clima="pedra"] { --cor-clima: var(--c-pedra); }
[data-clima="chuva"] { --cor-clima: var(--c-chuva); }
[data-clima="noite"] { --cor-clima: var(--c-noite); }
[data-clima="brasa"] { --cor-clima: var(--c-brasa); }

/* Jornadas: a faixa de trilhas, em rolagem lateral com encaixe */
.trilhas-secao { display: flex; flex-direction: column; gap: 10px; }
.trilhas {
  list-style: none; margin: 0 -16px; padding: 4px 16px 8px; display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.trilhas::-webkit-scrollbar { display: none; }
.trilhas li { flex: 0 0 min(78%, 17rem); scroll-snap-align: start; }
.trilha {
  position: relative; overflow: hidden; width: 100%; height: 100%; min-height: 176px; text-align: left;
  display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--cor-clima) 11%, var(--marmore));
  border: 1px solid color-mix(in srgb, var(--cor-clima) 42%, var(--linha));
  transition: border-color 0.15s, transform 0.15s;
}
.trilha::before {
  content: ""; position: absolute; right: -34px; top: -34px; width: 130px; height: 130px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--cor-clima) 38%, transparent), transparent 70%);
}
.trilha:active { transform: scale(0.99); }
.trilha.sua { border-color: color-mix(in srgb, var(--ouro) 60%, var(--linha)); }
.trilha-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative; }
.trilha-clima { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor-clima); }
.trilha .para-voce { position: static; }
.trilha-titulo { font-family: var(--f-inscricao); font-size: 1.15rem; line-height: 1.2; position: relative; }
.trilha-sub { font-size: 0.8125rem; color: var(--cinza); line-height: 1.35; flex: 1; position: relative; }
.trilha-progresso { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.trilha-pontos { display: flex; gap: 4px; }
.trilha-pontos i { display: block; width: 14px; height: 4px; border-radius: 2px; background: var(--linha); }
.trilha-pontos i.feito { background: var(--cor-clima); }
.trilha-estado { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.04em; color: var(--cor-clima); }
.trilha.andando .trilha-estado { color: var(--tinta); }

/* a folha da trilha */
.trilha-folha { display: flex; flex-direction: column; gap: 14px; }
.trilha-folha > .rotulo { color: var(--cor-clima); }
.trilha-folha .primario { margin-top: 4px; }
.lista-trilha .dia-item.hoje { background: color-mix(in srgb, var(--cor-clima) 11%, transparent); }
.lista-trilha .dia-item[aria-disabled="true"] { cursor: default; }
.lista-trilha .dia-item[aria-disabled="true"] .dia-texto strong { color: var(--cinza); }
.lista-trilha .dia-num { color: var(--cor-clima); }

/* Hoje: a trilha em andamento e o atalho para o Dormir (link discreto de dia, card à noite) */
.bloco-trilha {
  display: flex; flex-direction: column; gap: 6px; margin-top: 0; padding: 16px 18px; border-radius: var(--raio);
  background: color-mix(in srgb, var(--cor-clima) 10%, var(--marmore));
  border: 1px solid color-mix(in srgb, var(--cor-clima) 40%, var(--linha));
}
.bloco-trilha .rotulo { color: var(--cor-clima); }
.bloco-trilha-acoes { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
/* timer para dormir, na tela Hoje: discreto de dia, em destaque à noite */
.cartao-dormir {
  display: flex; flex-direction: column; gap: 10px; margin-top: 0; padding: 16px 18px; border-radius: var(--raio);
  background: color-mix(in srgb, var(--azul) 5%, var(--marmore));
  border: 1px solid color-mix(in srgb, var(--azul) 22%, var(--linha));
}
.cartao-dormir.destaque {
  background: color-mix(in srgb, var(--azul) 12%, var(--marmore));
  border-color: color-mix(in srgb, var(--azul) 45%, var(--linha));
}
.cartao-dormir-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.cartao-dormir-topo .h-secao { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.cartao-dormir-topo .h-secao .ic { color: var(--azul); width: 1.15em; height: 1.15em; }
.cartao-dormir-som { font-size: var(--t-2); text-align: left; }
.cartao-dormir-chips .chip { min-width: 3.6em; text-align: center; }
.cartao-dormir .controle { min-height: 40px; }
.cartao-dormir-nota { margin-top: -6px; color: var(--cinza); }

/* fim da trilha, no ritual */
.trilha-fim .frase-final { font-size: clamp(1.45rem, 5.8vw, 2rem); margin-block: 6px; }
.trilha-fim .pequeno { font-size: var(--t-2); }

/* ---------------- Dormir: tela escura, contraste baixo, nada animado ---------------- */
.dormir {
  --d-texto: rgba(226, 224, 214, 0.62); --d-baixo: rgba(226, 224, 214, 0.62);   /* 0,4 dava 3,1:1 sobre o fundo da tela de sons */ --d-linha: rgba(255, 255, 255, 0.09);
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: #050608; color: var(--d-texto); color-scheme: dark; opacity: 0; transition: opacity 0.4s ease;
}
.dormir.aberto { opacity: 1; }
body.em-dormir { overflow: hidden; }
.dormir-topo { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 0; }
.dormir-fechar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--d-texto); border: 1px solid var(--d-linha); }
.dormir-fechar svg { width: 20px; height: 20px; }
.dormir-rotulo { text-align: center; font-family: var(--f-inscricao); font-size: var(--t-2); letter-spacing: 0.26em; text-transform: uppercase; color: var(--d-baixo); }
.dormir-corpo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 22px 16px calc(28px + env(safe-area-inset-bottom, 0px));
}
.dormir-corpo > * { width: 100%; max-width: 26rem; }
.dormir-escolha { display: flex; flex-direction: column; gap: 12px; }
/* os minutos do timer em grade simétrica: seis opções, três por linha, todas do mesmo tamanho */
.dormir-chips, .cartao-dormir-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dormir-chips .chip, .cartao-dormir-chips .chip { justify-content: center; text-align: center; }
.dormir-subtitulo { text-align: center; font-size: var(--t-2); line-height: 1.5; color: var(--d-baixo); text-wrap: balance; }
.dormir-evidencia { text-align: center; font-size: var(--t-1); text-wrap: balance; margin-top: -4px; margin-bottom: 6px; }
.dormir-sub { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-baixo); margin-top: 8px; }
.dormir .chip { background: rgba(255, 255, 255, 0.04); border-color: var(--d-linha); color: var(--d-texto); }
.dormir .chip[aria-pressed="true"] { background: rgba(226, 224, 214, 0.82); color: #0B0D14; border-color: transparent; }
.dormir-nota { font-size: var(--t-2); color: var(--d-baixo); line-height: 1.5; }
.dormir-linha { color: var(--d-texto); }
.dormir input[type="range"], .dormir input[type="checkbox"] { accent-color: #9A8A66; }
.dormir-segmentos { background: rgba(255, 255, 255, 0.04); border-color: var(--d-linha); margin-bottom: 8px; }
.dormir-segmentos button { color: var(--d-baixo); }
.dormir-segmentos button[aria-pressed="true"] { background: rgba(226, 224, 214, 0.82); color: #0B0D14; }
.dormir-comecar { margin-top: 10px; background: rgba(214, 160, 68, 0.72); color: #120D05; box-shadow: none; }
.dormir-andamento { flex: 1; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.dormir-som { font-size: var(--t-2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-baixo); }
.dormir-tempo { font-family: var(--f-inscricao); font-size: clamp(3.8rem, 21vw, 6.2rem); line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: rgba(226, 224, 214, 0.56); }
.dormir-tempo.sem { font-size: clamp(2rem, 9vw, 2.8rem); }
.dormir-parar { margin-top: 26px; min-height: 52px; padding: 0 2.6rem; border-radius: 999px; border: 1px solid rgba(226, 224, 214, 0.22); color: var(--d-texto); font-weight: 500; }
.dormir-fim { flex: 1; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.dormir-boanoite { font-family: var(--f-leitura); font-style: italic; font-size: var(--t-6); color: var(--d-texto); }
.dormir-link { color: var(--d-baixo); text-decoration: underline; text-underline-offset: 4px; padding: 10px 14px; }
.dormir :focus-visible { outline-color: rgba(226, 224, 214, 0.5); }
@media (prefers-reduced-motion: reduce) { .dormir { transition: none; } }


/* =================== 1.3: contador coletivo e Pórtico em grupo (só aparecem com a API) =================== */

/* Hoje: a linha discreta sob o portal */
.presenca { display: block; margin-top: 12px; padding-inline: 8px; font-size: var(--t-2); line-height: 1.4; color: var(--cinza); text-align: center; text-wrap: balance; }
.presenca .ic { display: inline-block; vertical-align: -0.2em; margin-right: 0.35rem; color: var(--ocre-texto); width: 1.1em; height: 1.1em; }

/* a colunata de cada pessoa do grupo: as mesmas colunas da Colunata, menores */
.colunata-mini { display: inline-flex; align-items: flex-end; gap: 3px; flex: none; }
.colunata-mini .coluna { width: 12px; height: 32px; }
.grupo-membros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.grupo-membro { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--marmore); border: 1px solid var(--linha); }
.grupo-membro.voce { border-color: color-mix(in srgb, var(--ocre) 45%, var(--linha)); }
.grupo-membro-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.grupo-membro-nome small { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ocre-texto); margin-left: 0.4rem; }
.grupo-membro-total { font-size: var(--t-1); color: var(--cinza); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grupo-membros.resumo { gap: 0; }
.grupo-membros.resumo .grupo-membro { padding: 6px 0; background: transparent; border: 0; border-radius: 0; }
.grupo-membros.resumo .grupo-membro + .grupo-membro { border-top: 1px solid var(--linha); }

/* Hoje: o card do grupo, irmão do bloco da trilha */
.bloco-grupo {
  display: flex; flex-direction: column; gap: 8px; margin-top: 0; padding: 16px 18px; border-radius: var(--raio);
  background: color-mix(in srgb, var(--azul) 8%, var(--marmore));
  border: 1px solid color-mix(in srgb, var(--azul) 35%, var(--linha));
}
.bloco-grupo .rotulo { color: var(--azul); }
.bloco-grupo .bloco-trilha-acoes { margin-top: 2px; }

/* folhas do grupo: ver, criar e entrar */
.grupo-folha { display: flex; flex-direction: column; gap: 14px; }
.grupo-folha .lead { font-size: var(--t-2); }
.faixa-encerrado {
  display: flex; align-items: center; gap: 0.5rem; padding: 10px 14px; border-radius: 12px; font-size: var(--t-2); font-weight: 500;
  color: var(--ocre-texto); background: color-mix(in srgb, var(--ocre) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ocre) 40%, var(--linha));
}
.faixa-encerrado .ic { flex: none; }
.codigo-grupo { font-family: var(--f-inscricao); font-size: var(--t-4); letter-spacing: 0.22em; color: var(--tinta); }
input.codigo { font-family: var(--f-inscricao); font-size: var(--t-5); letter-spacing: 0.3em; text-transform: uppercase; text-align: center; }
input.codigo::placeholder { letter-spacing: 0.3em; opacity: 0.4; }
.grupo-folha .apagar { margin-top: 4px; }


/* =================== 1.3: revisão da noite, carinhas, sua semana e lembretes =================== */

/* carinhas: como você chega, como você sai (sobre o céu, antes de Respirar e depois de Levar) */
.humor { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; text-align: center; }
.humor-titulo { font-family: var(--f-leitura); font-size: clamp(1.9rem, 7.6vw, 2.6rem); line-height: 1.15; color: var(--sobre); outline: none; }
.carinhas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 26rem; }
.carinha {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px 8px; border-radius: 16px;
  color: var(--sobre); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: var(--t-1); font-weight: 600; letter-spacing: 0.04em; transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.carinha .carinha-svg { width: 40px; height: 40px; }
.carinha:active { transform: scale(0.95); }
.carinha[aria-pressed="true"] { background: rgba(244, 200, 120, 0.22); border-color: #F4C878; color: #F4C878; }
.ritual[data-ceu="claro"] .carinha { background: rgba(255, 255, 255, 0.4); border-color: rgba(17, 23, 36, 0.14); }
.ritual[data-ceu="claro"] .carinha[aria-pressed="true"] { background: rgba(196, 138, 44, 0.18); border-color: var(--ocre); color: var(--ocre-texto); }
.carinha-svg.pequena { width: 20px; height: 20px; flex: none; stroke-width: 2.2; vertical-align: -0.35em; }
.humor-frase { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-2); color: var(--sobre-suave); max-width: 26rem; }
.humor-frase .carinha-svg { width: 22px; height: 22px; color: #F4C878; }
.ritual[data-ceu="claro"] .humor-frase .carinha-svg { color: var(--ocre-texto); }

/* revisão da noite: a mesma tela do ritual, um passo por vez */
.ritual[data-modo="revisao"] .ritual-corpo { padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
.revisao { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.revisao-titulo { font-family: var(--f-leitura); font-size: calc(1.375rem * var(--escala)); line-height: 1.35; outline: none; }
.revisao-titulo label { display: block; cursor: text; }
.revisao input[type="text"] { font-family: var(--f-leitura); font-size: calc(1.0625rem * var(--escala)); background: color-mix(in srgb, var(--marmore) 70%, transparent); }
.revisao .fechamento-botoes .secundario[aria-pressed="true"] { border-color: var(--ocre); box-shadow: 0 0 0 1px var(--ocre) inset; color: var(--ocre-texto); }
.usar-pratica { align-self: flex-start; }
.revisao-fim .boa-noite { font-family: var(--f-leitura); font-style: italic; font-size: var(--t-5); color: var(--sobre); }
.revisao-fim .compromisso { text-align: center; align-items: center; }
.ritual-rodape .link-ceu .ic { width: 18px; height: 18px; vertical-align: -0.25em; margin-right: 0.3rem; }

/* Hoje: o bloco da noite (revisão por fazer, feita, ou o ritual antes) */
.fechamento.feita { border-color: var(--linha); }
.fechamento .h-secao .ic { color: var(--ocre-texto); vertical-align: -0.2em; margin-right: 0.3rem; }
.fechamento .primario { align-self: flex-start; }
.fechamento > .link { align-self: flex-start; font-size: var(--t-2); }
.fechamento-compromisso em { font-style: italic; }
.fechamento-botoes .secundario .ic { width: 18px; height: 18px; }
.lembrete-interno { display: flex; align-items: center; gap: 0.4rem; color: var(--ocre-texto); font-weight: 500; }
.lembrete-interno .ic { width: 1.1em; height: 1.1em; flex: none; }

/* Diário: sua semana (as barras usam os tokens, legíveis nos dois temas) e a revisão dentro do registro */
.semana-humor { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--raio); background: var(--marmore); border: 1px solid var(--linha); }
.semana-humor .secundario { align-self: flex-start; }
.semana-svg { width: 100%; height: auto; display: block; font-family: var(--f-ui); font-size: 11px; font-weight: 600; }
.semana-svg .b-chega { fill: var(--cinza); opacity: 0.45; }
.semana-svg .b-sai { fill: var(--ocre); }
.semana-svg .chao { stroke: var(--linha); stroke-width: 1; }
.semana-svg text { fill: var(--cinza); }
.semana-svg .legenda text { font-weight: 500; letter-spacing: 0.02em; }
.humor-reg { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; font-size: var(--t-2); color: var(--cinza); }
.humor-reg .carinha-svg { color: var(--ocre-texto); }
.humor-reg span { margin-right: 8px; }
.revisao-reg { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--azul) 7%, transparent); border: 1px solid var(--linha); }
.revisao-reg-titulo { font-size: var(--t-1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul); }
.revisao-reg-titulo .ic { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 0.3rem; }

/* Você: lembretes (dois interruptores, horário da noite e o estado) */
.lembretes { display: flex; flex-direction: column; gap: 10px; }
.lembretes-opcoes { display: flex; flex-direction: column; gap: 2px; padding: 4px 14px; border-radius: 14px; background: var(--marmore); border: 1px solid var(--linha); }
.lembretes-opcoes .controle label { flex: 1; }
.lembretes-opcoes .controle input[type="time"] { width: auto; flex: none; padding: 8px 10px; }
.lembrete-estado { font-weight: 500; }
.lembretes[data-estado="ativo"] .lembrete-estado { color: var(--ocre-texto); }
.lembretes[data-estado="negado"] .lembrete-estado, .lembretes[data-estado="erro"] .lembrete-estado { color: var(--perigo); }

/* favoritos: guardar a leitura do dia e a lista no diário */
.guardar-leitura { display: flex; justify-content: center; margin-top: 4px; }
.guardar-leitura .secundario { min-height: 44px; }
.guardar-leitura [aria-pressed="true"] { border-color: var(--ocre); }
.favoritos { display: flex; flex-direction: column; gap: 10px; margin-block: 16px 24px; }
.lista-favoritos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-favoritos li { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--raio); background: var(--marmore); border: 1px solid var(--linha); }
.fav-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fav-texto span { color: var(--cinza); font-size: var(--t-2); overflow-wrap: anywhere; }
.fav-acoes { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.centro { text-align: center; }

/* alvos de toque de pelo menos 44 px (auditoria de design, 1.9.1) */
.chip, .link, .link-ceu, .voltar, .fs-sem, .perigo, .perigo-btn, .avatar, .mais > summary, .secundario { min-height: 44px; }
.link, .link-ceu, .voltar, .fs-sem { display: inline-flex; align-items: center; justify-content: center; }
.cvv { margin-top: 12px; text-align: center; }

/* ---------- edição semanal: "Esta semana" em Jornadas, Seu Pórtico, marca de aniversário ---------- */
.serie-secao { display: flex; flex-direction: column; gap: 8px; }
.serie-tema { margin: 0; font-size: var(--t-4, 1.15rem); font-weight: 600; }
.serie-dias { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.serie-dia { width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border: 1px solid var(--linha); border-radius: 12px; background: var(--marmore); color: var(--tinta); font: inherit; font-size: 0.8rem; }
.serie-dia i { display: block; width: 18px; height: 5px; border-radius: 3px; background: var(--linha); }
.serie-dia.lida i { background: var(--ouro, #c9a86a); }
.serie-dia.hoje { border-color: var(--tinta); }
.serie-dia[aria-disabled="true"] { opacity: 0.45; }
.serie-dia-titulo { display: none; }
@media (min-width: 560px) { .serie-dia-titulo { display: block; font-size: 0.72rem; line-height: 1.2; text-align: center; color: var(--cinza); } }
.serie-anteriores summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.serie-anterior { margin-top: 10px; }
.portal-meta.aniversario { color: var(--ouro, #c9a86a); }
.seu-portico select, .seu-portico input[type="date"] { border: 1px solid var(--linha); background: var(--marmore); color: var(--tinta); border-radius: 14px; padding: 10px 12px; font: inherit; font-size: var(--t-3); min-height: 44px; }
.seu-portico .linha { flex-wrap: wrap; }
.seu-portico .linha input[type="date"] { flex: 1; min-width: 150px; }
.sp-datas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-item { margin: 0; }

/* a marca Pórtico5: o 5 em cor de destaque, mesmo peso, sem espaço */
.marca span b { font-weight: inherit; color: var(--ouro, #c9a86a); }