/* 1 · Sobre (so-) — "Prazer, eu sou a Dra. Yasmin" */

.so-ato1, .so-ato2 {
  max-width: 84rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
}

/* ---------- retrato no arco ---------- */
.so-figura { position: relative; margin: 0; }
.so-arco {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 78%;
  border-radius: 999px 999px var(--d-raio) var(--d-raio);
  background:
    repeating-linear-gradient(90deg, rgb(255 236 214 / .07) 0 2px, transparent 2px 1.6rem),
    radial-gradient(60% 40% at 55% 22% in oklab, rgb(236 168 112 / .55), rgb(236 168 112 / 0)),
    linear-gradient(170deg in oklab, #c77b52, #a9532e 70%, #8f4425);
  box-shadow: var(--wf-sombra);
}
.so-recorte { position: relative; }
.so-recorte img {
  width: 100%; height: auto;
  border-radius: 0 0 var(--d-raio) var(--d-raio);
}

/* ---------- texto ---------- */
.so-texto { align-self: center; }
.so-titulo { margin-bottom: clamp(1.4rem, 2.4vw, 2rem); }
.so-forte { font-size: clamp(4.4rem, 8.2vw, 8.6rem); line-height: .9; }
.so-script { margin-top: -.02em; }

.so-lead {
  margin: 0;
  max-width: 38rem;
  font-size: var(--wf-t-sub);
  font-weight: 500;
  line-height: 1.38;
  color: var(--d-tinta);
  text-indent: -.42em;
}
.so-corpo { margin: 1.2rem 0 0; }

.so-marcos {
  list-style: none;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 2rem;
}
.so-marcos li { display: grid; gap: .25rem; align-content: start; padding-top: .8rem; border-top: 2px solid rgb(154 67 33 / .35); }
.so-marcos b {
  font-family: var(--d-f-forte); font-weight: 400;
  font-size: clamp(2.7rem, 3.9vw, 4.2rem); line-height: .95;
  text-transform: uppercase; color: var(--d-tinta);
}
.so-marcos li:last-child b { color: var(--d-terracota-tinta); }
.so-marcos span { font-size: 1.02rem; line-height: 1.35; color: var(--d-tinta-2); }
.so-agora b { display: inline-flex; align-items: flex-start; gap: .14em; }
.so-agora b i { width: .17em; height: .17em; margin-top: .1em; border-radius: 50%; background: var(--d-terracota); animation: so-pulsa 1.8s ease-in-out infinite; }
@keyframes so-pulsa { 50% { opacity: .25; transform: scale(.7); } }

.so-assina { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.so-assina-nome { font-family: var(--d-f-script); font-size: clamp(2.4rem, 3vw, 3.2rem); line-height: 1; color: var(--d-terracota-tinta); padding: 0 .28em 0 .06em; }
.so-assina-cro { font-size: .9rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--d-tinta-2); }

/* ---------- ato 2: a fala + as lâminas ---------- */
.so-ato2 { margin-top: clamp(4.5rem, 9vw, 8.5rem); align-items: center; }
.so-citacao { margin: 0; }
.so-citacao p {
  margin: 0;
  font-size: clamp(1.55rem, 1.6vw + 1rem, 2.55rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--d-tinta);
  text-indent: -.4em;
  text-wrap: pretty;
}
.so-marca { position: relative; display: inline-block; white-space: nowrap; text-indent: 0; }
.so-marca .wf-risco { position: absolute; left: 0; right: 0; bottom: -.12em; height: .22em; }

.so-horas { margin: 1.6rem 0 0; font-size: var(--d-t-corpo); color: var(--d-tinta-2); }
.so-horas span {
  display: inline-block; margin-right: .6rem;
  font-size: .9rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--d-terracota-tinta);
}
.so-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* pilha de lâminas */
.so-pilha { justify-self: center; width: min(100%, 27rem); }
.so-cartas {
  position: relative;
  aspect-ratio: 4 / 5;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.so-cartas::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--d-raio);
  background: linear-gradient(160deg in oklab, #c77b52, #a9532e);
  transform: translate(5%, 3%) rotate(4deg);
}
.so-carta {
  position: absolute; inset: 0; margin: 0;
  border-radius: var(--d-raio);
  overflow: hidden;
  box-shadow: 0 30px 40px -30px rgb(50 24 10 / .7);
  transition: transform .7s var(--d-ease), opacity .5s;
  will-change: transform;
}
.so-carta img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; border-radius: inherit; }
.so-nav { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 1.6rem; }
.so-seta {
  width: 3rem; height: 3rem; padding: 0; border: 1.5px solid rgb(27 23 20 / .25); border-radius: 999px;
  background: rgb(251 244 232 / .5); color: var(--d-tinta); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .3s, border-color .3s;
}
.so-seta:hover { background: var(--d-creme); border-color: var(--d-tinta); }
.so-seta svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.so-pontos { display: flex; }
.so-pontos button {
  width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.so-pontos button::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 999px;
  background: rgb(27 23 20 / .26);
  transition: width .45s var(--d-ease), background-color .45s;
}
.so-pontos button[aria-current="true"]::before { width: 1.45rem; background: var(--d-terracota-tinta); }
.so-vivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* ---------- celular: pilha ---------- */
@media (max-width: 980px) {
.so-carta[data-pos="0"] { z-index: 4; transform: rotate(-1.5deg); }
  .so-carta[data-pos="1"] { z-index: 3; transform: translate(3%, 1.5%) rotate(2.5deg) scale(.97); }
  .so-carta[data-pos="2"] { z-index: 2; transform: translate(-3%, 2.5%) rotate(-4.5deg) scale(.94); }
  .so-carta[data-pos="3"] { z-index: 1; transform: translate(1%, 3.5%) rotate(1deg) scale(.91); }
  .so-carta.so-vai { animation: so-vai .8s var(--d-ease); }
  .so-carta.so-volta { animation: so-volta .8s var(--d-ease); }
  @keyframes so-vai {
    0%   { z-index: 5; transform: rotate(-1.5deg); }
    45%  { z-index: 5; transform: translate(-72%, -4%) rotate(-12deg); }
    55%  { z-index: 0; transform: translate(-72%, -4%) rotate(-12deg); }
    100% { z-index: 0; transform: translate(1%, 3.5%) rotate(1deg) scale(.91); }
  }
  @keyframes so-volta {
    0%   { z-index: 0; transform: translate(1%, 3.5%) rotate(1deg) scale(.91); }
    45%  { z-index: 0; transform: translate(-72%, -4%) rotate(-12deg); }
    55%  { z-index: 5; transform: translate(-72%, -4%) rotate(-12deg); }
    100% { z-index: 5; transform: rotate(-1.5deg); }
  }
  
  
  .so-fala { display: contents; }
  .so-fala > .wf-kicker { order: 1; margin-bottom: -1rem; }
  .so-citacao { order: 2; }
  .so-pilha { order: 3; }
  .so-horas { order: 4; margin: 0; }
  .so-acoes { order: 5; margin: -1rem 0 0; }
  .so-ato1 { gap: 0; }
  .so-texto { display: contents; }
  .so-texto > .wf-kicker { order: 1; }
  .so-titulo { order: 2; }
  .so-figura { order: 3; justify-self: center; margin: 1.4rem 0 2.4rem; }
  .so-lead { order: 4; }
  .so-corpo { order: 5; }
  .so-marcos { order: 6; }
  .so-assina { order: 7; }
  .so-ato2 { gap: 2.4rem; }
  .so-pilha { width: min(88%, 24rem); }
  .so-figura { width: min(94%, 28rem); }
}

/* ---------- notebook e desktop ---------- */
@media (min-width: 981px) {
  .so-ato1 { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); align-items: center; }
  .so-figura { max-width: 38rem; width: 100%; }
  .so-ato2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  /* leque: as quatro lâminas à vista, a escolhida sobe */
  .so-pilha { width: 100%; --cw: clamp(10.5rem, 15vw, 15rem); --passo: calc(var(--cw) * .7); }
  .so-cartas { aspect-ratio: auto; height: calc(var(--cw) * 1.25 + 5rem); cursor: pointer; }
  .so-cartas::before { display: none; }
  .so-carta {
    inset: auto; top: 2.5rem; left: calc(50% - var(--cw) / 2);
    width: var(--cw); height: calc(var(--cw) * 1.25);
    transform: translateX(calc(var(--k) * var(--passo))) translateY(calc(var(--k) * var(--k) * .5rem)) rotate(calc(var(--k) * 4deg)) scale(.94);
    filter: saturate(.85) brightness(.92);
    transition: transform .7s var(--d-ease), filter .5s;
  }
  .so-carta:hover { filter: none; }
  .so-carta.is-ativa {
    z-index: 6;
    filter: none;
    box-shadow: 1.1rem -1.1rem 0 0 #b45a33, 0 34px 44px -28px rgb(50 24 10 / .75);
    overflow: visible;
    transform: translateX(calc(var(--k) * var(--passo))) translateY(-1.4rem) rotate(calc(var(--k) * 1.2deg)) scale(1.06);
  }
  .so-carta.so-vai, .so-carta.so-volta { animation: none; }
}

/* ---------- rodada 2: legenda que se reescreve, luz do leque, arco que cresce ---------- */
.so-legenda {
  margin: 1.8rem 0 0;
  display: grid;
  justify-items: center;
  text-align: center;
}
.so-legenda-forte {
  font-family: var(--d-f-forte); font-size: clamp(1.35rem, 1.2vw + .9rem, 1.8rem);
  line-height: 1; text-transform: uppercase; color: var(--d-tinta);
}
.so-legenda-script {
  grid-area: 2 / 1;
  font-family: var(--d-f-script); font-size: clamp(2rem, 1.8vw + 1.2rem, 2.9rem);
  line-height: 1.12; color: var(--d-terracota-tinta);
  padding: 0 .28em 0 .06em;
  opacity: 0;
  transition: opacity .35s;
}
.so-legenda-script.is-on { opacity: 1; }
.js .so-legenda-script.is-on {
  -webkit-mask-image: linear-gradient(90deg, #000 0 44%, transparent 56% 100%);
          mask-image: linear-gradient(90deg, #000 0 44%, transparent 56% 100%);
  -webkit-mask-size: 230% 100%; mask-size: 230% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.js .so-legenda.is-vis .so-legenda-script.is-on { animation: d-escreve 1.1s cubic-bezier(.45,.1,.35,1) .15s both; }
.so-legenda + .so-nav { margin-top: .9rem; }

.so-pilha { position: relative; }
.so-pilha::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -18% -14% -10%;
  background: radial-gradient(closest-side in oklab, rgb(214 140 90 / .34), rgb(214 140 90 / 0));
}
.so-ato2 { position: relative; padding-top: clamp(3rem, 6vw, 5.5rem); }
.so-ato2::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg in oklab, rgb(154 67 33 / 0), rgb(154 67 33 / .3) 20% 80%, rgb(154 67 33 / 0));
}

/* o arco cresce da base e ela sobe por dentro */
.js .so-arco { transform: scaleY(.35); transform-origin: 50% 100%; opacity: 0; transition: transform 1.3s var(--d-ease), opacity .6s; }
.js .so-recorte { transform: translateY(7%); opacity: 0; transition: transform 1.4s .35s var(--d-ease), opacity .9s .35s; }
.js .so-figura.is-vis .so-arco { transform: none; opacity: 1; }
.js .so-figura.is-vis .so-recorte { transform: none; opacity: 1; }
.js .so-figura[data-rev] { transform: none; }

@media (max-width: 980px) {
  .so-legenda-script { white-space: normal; max-width: 20rem; }
  .so-legenda { margin-top: 1.5rem; }
}