/* ==========================================================
   Amanda Barbosa · Psicóloga TCC
   Cores e fontes: marca-amanda-barbosa/web/cores.css
   ========================================================== */
:root{
  --creme: #FAF5EF;
  --lavanda: #A9B4D0;
  --lavanda-clara: #E6E9F3;
  --lavanda-esc: #7E8BB0;
  --bronze: #A8744A;
  --bronze-esc: #7E5230;
  --dourado: #C9A56A;
  --grafite: #2F2A28;
  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-texto: 'DM Sans', system-ui, sans-serif;

  --branco: #FFFFFF;
  --texto-suave: #5A524E;
  --linha: rgba(47, 42, 40, .12);
  --sombra: 0 18px 40px -18px rgba(47, 42, 40, .28);
  --raio: 28px;
  --raio-g: 40px;
  --gutter: 20px;
  --topo-h: 72px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 12px); }

body{
  margin: 0;
  background: var(--creme);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg{ display: block; max-width: 100%; }

a{ color: var(--bronze-esc); text-underline-offset: .2em; }

h1, h2, h3{
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1{ font-size: clamp(2.4rem, 7vw, 4.2rem); }
h2{ font-size: clamp(2rem, 4.6vw, 3rem); }
h3{ font-size: 1.35rem; }
h1 em, h2 em{ font-style: italic; color: var(--bronze-esc); }

p{ margin: 0 0 1em; }

:focus-visible{
  outline: 2px solid var(--bronze-esc);
  outline-offset: 3px;
  border-radius: 6px;
}

[tabindex="-1"]:focus{ outline: none; }

.pular{
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--grafite);
  color: var(--creme);
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
}
.pular:focus{ top: 12px; }

.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--estreito{ max-width: 820px; }

.rotulo{
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--bronze-esc);
  margin-bottom: 14px;
}
.rotulo--claro{ color: var(--dourado); }

.icone{
  width: 32px;
  height: 32px;
  color: var(--bronze-esc);
  margin-bottom: 18px;
}

/* ---------- Botões ---------- */
.botoes{ display: flex; flex-wrap: wrap; gap: 12px; }

.botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 16px/1.2 var(--fonte-texto);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.botao svg{ width: 20px; height: 20px; flex: none; }
.botao:hover{ transform: translateY(-2px); box-shadow: var(--sombra); }

.botao--escuro{ background: var(--grafite); color: var(--creme); }
.botao--escuro:hover{ background: #3f3835; }
.botao--contorno{ border-color: var(--grafite); color: var(--grafite); }
.botao--contorno:hover{ background: var(--grafite); color: var(--creme); }
.botao--dourado{ background: var(--dourado); color: var(--grafite); }
.botao--dourado:hover{ background: #d4b47f; }
.botao--claro{ border-color: rgba(250, 245, 239, .55); color: var(--creme); }
.botao--claro:hover{ background: var(--creme); color: var(--grafite); }
.botao--pequeno{ min-height: 44px; padding: 10px 22px; font-size: 15px; }

/* ---------- Header ---------- */
.topo{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 245, 239, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .3s;
}
.topo.rolou{ box-shadow: 0 1px 0 var(--linha); }

.topo__linha{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topo-h);
}

.marca{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--grafite);
  text-decoration: none;
}
.marca__simbolo{ width: 40px; height: 37px; }
.marca__texto{ display: flex; flex-direction: column; line-height: 1.1; }
.marca__nome{ font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.2rem; }
.marca__sub{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-esc);
  margin-top: 3px;
}

.menu-botao{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.menu-botao span{
  display: block;
  height: 1.6px;
  background: var(--grafite);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.menu-botao[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-botao[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }

.menu{
  position: absolute;
  top: var(--topo-h);
  left: 0;
  right: 0;
  background: var(--creme);
  padding: 8px var(--gutter) 28px;
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 20px 30px -24px rgba(47, 42, 40, .35);
  display: none;
}
.menu.aberto{ display: block; }
.menu ul{ list-style: none; margin: 0 0 18px; padding: 0; }
.menu li a{
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--linha);
  color: var(--grafite);
  text-decoration: none;
  font-weight: 500;
}
.menu .botao{ width: 100%; }

/* ---------- Fotos (placeholders trocáveis) ---------- */
.foto{
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--lavanda-clara);
  border-radius: var(--raio);
}
.foto img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s;
  z-index: 1;
}
.foto img.carregada{ opacity: 1; }
.foto__vazia{
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  border: 1.5px dashed var(--lavanda-esc);
  border-radius: inherit;
  text-align: center;
  font-size: 14px;
  color: var(--texto-suave);
}
.foto__vazia strong{
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--bronze-esc);
}
.foto--retrato{ aspect-ratio: 4 / 5; border-radius: var(--raio-g); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: 40px 0 150px;
  overflow: hidden;
}
.hero h1{
  font-size: clamp(2.6rem, 8.4vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 13ch;
  margin-bottom: 40px;
}
.onda--hero{
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 140px;
  pointer-events: none;
}
.onda__a, .onda__b{ transform-origin: center bottom; }
.onda__a{ animation: oscila 14s ease-in-out infinite alternate; }
.onda__b{ animation: oscila 10s ease-in-out infinite alternate-reverse; }
@keyframes oscila{
  from{ transform: translateX(0) scaleY(1); }
  to{ transform: translateX(-24px) scaleY(1.12); }
}

.hero__grade{
  display: flex;
  flex-direction: column-reverse;
  gap: 32px;
}
.selo{
  font-size: 16px;
  color: var(--texto-suave);
  margin-bottom: 18px;
}
.selo em{
  font-family: var(--fonte-titulo);
  font-size: 1.12em;
  color: var(--bronze-esc);
}
.hero__lead{ font-size: 1.1rem; color: var(--texto-suave); max-width: 34em; margin-bottom: 28px; }
.hero__crp{ margin-top: 24px; font-size: 14px; color: var(--texto-suave); }

.foto--hero{ aspect-ratio: 4 / 3; border-radius: var(--raio-g); }
.foto--hero .foto__vazia{ border-radius: 28px; }

.triade{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--dourado);
}
.triade p{ margin: 0; font-family: var(--fonte-titulo); font-size: 1.1rem; line-height: 1.3; }
.triade p span{ font-style: italic; color: var(--bronze-esc); }
.simbolo-vivo{ width: 46px; height: 42px; flex: none; }
.simbolo-vivo circle{
  transform-box: fill-box;
  transform-origin: center;
  animation: pulsa 3.6s ease-in-out infinite;
}
.simbolo-vivo circle:nth-of-type(2){ animation-delay: 1.2s; }
.simbolo-vivo circle:nth-of-type(3){ animation-delay: 2.4s; }
@keyframes pulsa{
  0%, 60%, 100%{ transform: scale(1); }
  25%{ transform: scale(1.18); }
}

/* Entrada do hero */
.entra{
  opacity: 0;
  transform: translateY(24px);
  animation: sobe .9s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 120ms + 100ms);
}
@keyframes sobe{ to{ opacity: 1; transform: none; } }

/* ---------- Seções ---------- */
.secao{ padding: 88px 0; }
.secao--branca{ background: var(--branco); }
.secao--lavanda{ background: var(--lavanda-clara); }
.cabeca{ max-width: 640px; margin-bottom: 44px; }

.duas-colunas{ display: grid; gap: 48px; align-items: center; }
.duas-colunas > div > p:not(.rotulo){ color: var(--texto-suave); }

/* Revelar ao rolar */
.revelar{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.revelar.visivel{ opacity: 1; transform: none; }

/* Sobre */
#sobre .foto--retrato{ max-width: 460px; width: 100%; margin: 0 auto; }
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.chips li{
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--creme);
  border: 1px solid var(--linha);
  font-size: 15px;
}

/* ---------- Diagrama TCC ---------- */
.ciclo{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  background: var(--branco);
  border-radius: var(--raio-g);
  box-shadow: 0 1px 0 var(--linha);
}
.ciclo p{ margin: 0; }
.ciclo__etiqueta{
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: 4px;
}
.ciclo__situacao{
  padding: 14px 26px;
  border: 1.5px solid var(--grafite);
  border-radius: 999px;
  text-align: center;
}
.ciclo__situacao p{ font-family: var(--fonte-titulo); font-size: 1.1rem; }
.ciclo__seta{ width: 22px; height: 32px; color: var(--texto-suave); margin: 10px 0; }

.ciclo__trio{
  display: grid;
  gap: 12px;
  width: 100%;
}
.ciclo__card{
  padding: 18px;
  border-radius: 22px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ciclo__card:hover{ transform: translateY(-4px); box-shadow: var(--sombra); }
.ciclo__card p{ font-family: var(--fonte-titulo); font-size: 1.12rem; line-height: 1.3; }
.ciclo__card--pensar{ background: #F3E9DF; }
.ciclo__card--pensar .ciclo__etiqueta{ color: var(--bronze-esc); }
.ciclo__card--sentir{ background: var(--lavanda-clara); }
.ciclo__card--sentir .ciclo__etiqueta{ color: #4F5A7A; }
.ciclo__card--agir{ background: var(--grafite); color: var(--creme); }
.ciclo__card--agir .ciclo__etiqueta{ color: var(--dourado); }

.ciclo__volta{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1.5px dashed var(--bronze);
  border-radius: 22px;
  font-size: 15px;
  color: var(--texto-suave);
}
.ciclo__volta svg{ width: 24px; height: 24px; flex: none; color: var(--bronze-esc); margin-top: 1px; }

/* ---------- Cards ---------- */
.cards{
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.card{
  background: var(--branco);
  border-radius: var(--raio);
  padding: 30px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .8s var(--ease);
}
.card.visivel:hover, .card:hover{ transform: translateY(-4px); box-shadow: var(--sombra); }
.card p{ margin: 0; color: var(--texto-suave); }

/* ---------- Atendimento ---------- */
.modalidades{ display: grid; gap: 20px; }
.modalidade{ padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.modalidade__corpo{ padding: 30px 26px 34px; display: flex; flex-direction: column; align-items: flex-start; }
.modalidade__corpo p{ margin-bottom: 1em; }
.modalidade__endereco{ color: var(--grafite) !important; font-size: 15px; }
.foto--consultorio{ aspect-ratio: 16 / 10; border-radius: 0; }
.foto--consultorio .foto__vazia{ border-radius: 18px; }
.modalidade--online{ background: var(--grafite); color: var(--creme); justify-content: center; }
.modalidade--online .icone{ color: var(--dourado); }
.modalidade--online p{ color: rgba(250, 245, 239, .82) !important; }
.modalidade--online .botao{ margin-top: 8px; }

/* ---------- Dúvidas ---------- */
.acordeao details{ border-bottom: 1px solid var(--linha); }
.acordeao details:first-child{ border-top: 1px solid var(--linha); }
.acordeao summary{
  position: relative;
  padding: 22px 48px 22px 0;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.acordeao summary::-webkit-details-marker{ display: none; }
.acordeao summary::before,
.acordeao summary::after{
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 1.6px;
  background: var(--bronze-esc);
  transition: transform .3s var(--ease);
}
.acordeao summary::after{ transform: rotate(90deg); }
.acordeao details[open] summary::after{ transform: rotate(0); }
.acordeao details p{ padding: 0 0 22px; margin: 0; color: var(--texto-suave); max-width: 46em; }

/* ---------- Contato ---------- */
.contato{
  position: relative;
  padding: 120px 0 96px;
  background: var(--grafite);
  color: var(--creme);
}
.onda--contato{
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
}
.contato__grade{ display: grid; gap: 40px; }
.contato h2{ font-size: clamp(2.4rem, 6vw, 4rem); }
.contato h2 em{ color: var(--dourado); }
.contato__texto > p:not(.rotulo){ color: rgba(250, 245, 239, .8); max-width: 30em; margin-bottom: 36px; }

.foto--contato{
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  background: #3b3532;
}
.foto--contato .foto__vazia{ border-radius: 18px; border-color: rgba(169, 180, 208, .6); color: rgba(250, 245, 239, .75); }
.foto--contato .foto__vazia strong{ color: var(--dourado); }

.canais{ list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(250, 245, 239, .18); }
.canal{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(250, 245, 239, .18);
  color: var(--creme);
  text-decoration: none;
}
.canal__tipo{
  grid-column: 1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250, 245, 239, .7);
}
.canal__valor{
  grid-column: 1;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.canal__seta{
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(250, 245, 239, .35);
  transition: transform .3s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.canal__seta svg{ width: 20px; height: 20px; }
.canal--destaque .canal__tipo{ color: var(--dourado); }
.canal--destaque .canal__seta{ background: var(--dourado); border-color: var(--dourado); color: var(--grafite); }
.canal:hover .canal__valor{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.canal:hover .canal__seta{ background: var(--dourado); border-color: var(--dourado); color: var(--grafite); }
.canal__seta svg{ transition: transform .3s var(--ease); }
.canal:hover .canal__seta svg{ transform: translateX(3px); }

/* ---------- Rodapé ---------- */
.rodape{ padding: 40px 0 100px; font-size: 15px; }
.rodape__linha{ display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rodape p{ margin: 0; color: var(--texto-suave); }
.rodape__simbolo{ width: 36px; height: 33px; }
.rodape__links{ display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.rodape__links a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-decoration: none;
}
.rodape__links a:hover{ text-decoration: underline; }
.rodape__links a svg{ width: 18px; height: 18px; flex: none; }
.rodape__credito{ display: inline-flex; align-items: center; gap: .6em; }
.rodape__credito a{ opacity: .85; transition: opacity .25s, transform .25s; }
.rodape__credito a:hover{ opacity: 1; transform: translateY(-1px); text-decoration: none; }
.rodape__credito .neurazy-logo{ width: auto; height: 26px; }

/* ---------- WhatsApp flutuante ---------- */
.whats-flutuante{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--grafite);
  color: var(--creme);
  box-shadow: var(--sombra);
  transition: transform .25s var(--ease), background-color .25s;
}
.whats-flutuante svg{ width: 28px; height: 28px; }
.whats-flutuante:hover{ transform: translateY(-3px); background: var(--bronze-esc); }

/* ==========================================================
   Responsivo (mobile first)
   ========================================================== */
/* ---------- Ajustes de celular ---------- */
@media (max-width: 599px){
  .hero{ padding-bottom: 110px; }
  .hero .botoes .botao{ width: 100%; }
  .hero__grade{ gap: 28px; }
  .foto--retrato{ aspect-ratio: 1 / 1; }
  .foto--contato{ max-width: 220px; }
  .contato{ padding: 96px 0 72px; }
  .secao{ padding: 72px 0; }
  .ciclo__alternar{ width: 100%; justify-content: center; }
}

@media (min-width: 600px){
  :root{ --gutter: 32px; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .ciclo{ padding: 36px 32px; }
  .ciclo__trio{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px){
  :root{ --topo-h: 84px; }

  .menu-botao{ display: none; }
  .menu{
    position: static;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .menu ul{ display: flex; gap: 26px; margin: 0; }
  .menu li a{ padding: 6px 0; border: 0; font-size: 15px; position: relative; }
  .menu li a::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--bronze);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .menu li a:hover::after{ transform: scaleX(1); }
  .menu .botao{ width: auto; }

  .hero{ padding: 64px 0 190px; }
  .hero h1{ max-width: none; margin-bottom: 56px; }
  .hero__grade{ display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 64px; }
  .onda--hero{ height: 200px; }

  .secao{ padding: 120px 0; }
  .duas-colunas{ grid-template-columns: 1fr 1fr; gap: 80px; }
  .duas-colunas--tcc{ grid-template-columns: .9fr 1.1fr; }

  .modalidades{ grid-template-columns: 1fr 1fr; gap: 24px; }

  .contato{ padding: 170px 0 120px; }
  .onda--contato{ height: 110px; }
  .contato__grade{ grid-template-columns: 340px 1fr; align-items: center; gap: 88px; }

  .rodape{ padding-bottom: 40px; }
  .rodape__linha{ flex-direction: row; justify-content: space-between; text-align: left; }
  .rodape__linha > p{ flex: 1; }
}

@media (min-width: 1200px){
  .cards{ grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================
   Animações extras
   ========================================================== */

/* Barra de leitura */
.progresso{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
}

/* Título do hero palavra por palavra */
.titulo-hero.dividido{ opacity: 1; transform: none; animation: none; }
.palavra{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.palavra > span{
  display: inline-block;
  transform: translateY(110%);
  animation: palavra-sobe .9s var(--ease) forwards;
  animation-delay: calc(var(--i) * 70ms + 200ms);
}
@keyframes palavra-sobe{ to{ transform: none; } }

/* Traço à mão sob a palavra-chave */
h1 em, h2 em{ position: relative; display: inline-block; }
.sem-quebra{ white-space: nowrap; }
.traco{
  position: absolute;
  left: -2%;
  bottom: -.06em;
  width: 104%;
  height: .26em;
  overflow: visible;
  pointer-events: none;
}
.traco path{
  fill: none;
  stroke: var(--dourado);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}
.titulo-hero .traco path{ animation: traca 1s var(--ease) 1.1s forwards; }
.visivel .traco path{ animation: traca 1s var(--ease) .5s forwards; }
@keyframes traca{ to{ stroke-dashoffset: 0; } }

/* Fotos entram como cortina */
.foto.revelar{ opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--raio)); transition: clip-path 1.2s var(--ease); }
.foto.revelar.visivel{ clip-path: inset(0 0 0 0 round var(--raio)); }
.foto--hero.entra{ opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--raio-g)); animation: cortina 1.3s var(--ease) .45s forwards; }
@keyframes cortina{ to{ clip-path: inset(0 0 0 0 round var(--raio-g)); } }
.foto img.carregada{ animation: zoom-sai 1.8s var(--ease); }
@keyframes zoom-sai{ from{ transform: scale(1.12); } }

/* Ícones se desenham */
.card .icone *{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .35s; }
.card.visivel .icone *{ stroke-dashoffset: 0; }

/* Ciclo da TCC: fluxo em sequência */
.ciclo.visivel .ciclo__card{ animation: vez 4.2s ease-in-out 1s infinite; }
.ciclo.visivel .ciclo__card--sentir{ animation-delay: 1.7s; }
.ciclo.visivel .ciclo__card--agir{ animation-delay: 2.4s; }
@keyframes vez{
  0%, 30%, 100%{ transform: none; box-shadow: none; }
  12%{ transform: translateY(-6px); box-shadow: var(--sombra); }
}
.ciclo__card:hover{ animation-play-state: paused; }
.ciclo.visivel .ciclo__volta svg{ animation: gira 4.2s linear 1s infinite; }
@keyframes gira{ 60%{ transform: rotate(0); } 80%, 100%{ transform: rotate(-360deg); } }

/* Troca de cenário: evitação x enfrentamento */
.ciclo__card p, .ciclo__volta p{ display: grid; }
.ciclo p > span{ grid-area: 1 / 1; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; }
.ciclo p > .v2{ opacity: 0; transform: translateY(8px); visibility: hidden; }
.ciclo--novo p > .v1{ opacity: 0; transform: translateY(-8px); visibility: hidden; }
.ciclo--novo p > .v2{ opacity: 1; transform: none; visibility: visible; }
.ciclo__card{ transition: background-color .5s, color .5s, transform .3s var(--ease), box-shadow .3s var(--ease); }
.ciclo--novo .ciclo__card--agir{ background: var(--bronze-esc); }
.ciclo__volta{ transition: border-color .5s; }
.ciclo--novo .ciclo__volta{ border-style: solid; border-color: var(--dourado); }

.ciclo__alternar{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  min-height: 46px;
  padding: 10px 22px;
  border: 1.5px solid var(--grafite);
  border-radius: 999px;
  background: none;
  color: var(--grafite);
  font: 600 15px/1.2 var(--fonte-texto);
  cursor: pointer;
  transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.ciclo__alternar svg{ width: 20px; height: 20px; transition: transform .5s var(--ease); }
.ciclo__alternar:hover{ background: var(--grafite); color: var(--creme); transform: translateY(-2px); }
.ciclo__alternar[aria-pressed="true"] svg{ transform: rotate(180deg); }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
  }
  .entra, .revelar{ opacity: 1; transform: none; }
  .foto.revelar, .foto--hero.entra{ clip-path: none; }
  .palavra > span{ transform: none; }
  .traco path, .card .icone *{ stroke-dashoffset: 0; }
}