/* Serviços
   Fundo claro. A Mentoria é um bloco dourado com raízes verdes; os demais serviços são cartões verdes esticados,
   um embaixo do outro, com moldura dourada, ícone em anel e raízes que crescem do canto com o mouse ou o foco. */

.serv-sec {
  position: relative; isolation: isolate; overflow: clip; background: var(--palha);
  padding: clamp(72px, 9vw, 120px) 0 clamp(96px, 11vw, 150px);
}
.serv-sec::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 36% at 96% 0%, rgba(206, 160, 65, .13), transparent 70%),
    radial-gradient(46% 30% at 0% 100%, rgba(19, 62, 42, .07), transparent 70%);
}
.serv-sec .curvas--serv { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; stroke: rgba(19, 62, 42, .07); pointer-events: none; }

/* o espaço entre cartões precisa caber a moldura dourada de fora */
.serv-grade { display: grid; gap: clamp(30px, 3.4vw, 44px); padding: 10px; }

.serv {
  --gx: 80%; --gy: 0%;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(28px, 3.4vw, 44px); border-radius: 20px; color: var(--palha);
  background: radial-gradient(90% 140% at 100% 0%, rgba(64, 128, 88, .36), transparent 65%), linear-gradient(160deg, #17482f, #0d2c1e);
  box-shadow: inset 0 0 0 1px rgba(226, 194, 116, .6), inset 0 1px 0 rgba(255, 255, 255, .1), 0 34px 50px -38px rgba(13, 44, 30, .75);
  outline: 1px solid rgba(206, 160, 65, .85); outline-offset: 7px;
  transition: outline-offset .5s var(--suave), outline-color .4s, box-shadow .5s, transform .5s var(--suave);
}
/* a entrada ao rolar tem transição própria; repete as outras para a moldura continuar animando */
.rv-pronto .serv.rv-espera.is-in {
  transition: opacity .9s var(--suave) calc(var(--i, 0) * 90ms), transform .9s var(--suave) calc(var(--i, 0) * 90ms),
    outline-offset .5s var(--suave), outline-color .4s, box-shadow .5s;
}
.serv::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(440px circle at var(--gx) var(--gy), rgba(255, 245, 215, .13), transparent 55%);
}
.serv:hover, .serv:focus-within {
  outline-offset: 11px; outline-color: var(--ouro);
  box-shadow: inset 0 0 0 1px rgba(236, 204, 124, .95), inset 0 1px 0 rgba(255, 255, 255, .14), 0 44px 60px -36px rgba(13, 44, 30, .85);
}
.serv:hover::after, .serv:focus-within::after { opacity: 1; }
.serv::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(98deg, rgba(10, 38, 26, .72) 0%, rgba(10, 38, 26, .5) 38%, transparent 72%);
}
.serv > :not(.serv__raizes) { position: relative; z-index: 2; }
.serv h2, .serv__texto { text-shadow: 0 1px 14px rgba(8, 28, 18, .6); }

/* ---------- ícone ---------- */
.serv__no {
  flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: var(--ouro-claro);
  background: radial-gradient(circle at 35% 30%, #1f5c3d, #0e3022 75%); border: 1px solid rgba(226, 194, 116, .55);
  box-shadow: 0 0 0 6px rgba(226, 194, 116, .07); transition: background-color .4s, color .4s, transform .6s var(--suave), box-shadow .6s;
}
.serv:hover .serv__no, .serv:focus-within .serv__no { background: var(--ouro-claro); color: #10251a; transform: scale(1.06); box-shadow: 0 0 0 9px rgba(226, 194, 116, .14); }
.serv__ico { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.serv__ico .tr { stroke-dasharray: 1; stroke-dashoffset: 0; }
.rv-pronto .serv.rv-espera:not(.is-in) .tr { stroke-dashoffset: 1; }
.rv-pronto .serv.is-in .tr { transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) .35s; }

/* ---------- raízes ----------
   A imagem é uma raiz real, só a forma, pintada em dourado. A máscara radial parte do canto de cima à direita:
   quanto maior --c, mais longe as raízes chegaram. Em repouso só um cantinho aparece, de leve; com mouse ou foco, crescem até o fim. */
@property --c { syntax: '<number>'; inherits: false; initial-value: 0; }
.serv__raizes {
  --c: .15; --rw: 84%; --ro: -4%; --rt: -4%; --rot: 0deg;
  position: absolute; z-index: 0; top: var(--rt); right: var(--ro); width: var(--rw); aspect-ratio: 1100 / 793; pointer-events: none;
  background: url('/img/raizes-ouro.webp') center / 100% 100% no-repeat; opacity: var(--op, .5);
  transform: rotate(var(--rot)); transform-origin: 70% 0;
  -webkit-mask-image: radial-gradient(circle farthest-corner at 70% 2%, #000 calc(var(--c) * 100%), transparent calc(var(--c) * 100% + 16%));
  mask-image: radial-gradient(circle farthest-corner at 70% 2%, #000 calc(var(--c) * 100%), transparent calc(var(--c) * 100% + 16%));
  transition: --c 1.6s cubic-bezier(.3, .55, .25, 1), opacity .6s;
}
.serv:hover .serv__raizes, .serv:focus-within .serv__raizes {
  --c: 1; opacity: .82;
  transition: --c 3.2s cubic-bezier(.22, .6, .2, 1), opacity .8s;
}
/* cada cartão recebe um recorte um pouco diferente */
.serv:nth-child(3n + 1) .serv__raizes { --rw: 92%; --rt: -9%; --rot: -3deg; }
.serv:nth-child(3n + 2) .serv__raizes { --rw: 78%; --ro: -2%; --rt: -2%; --rot: 2deg; }
.serv:nth-child(3n) .serv__raizes { --rw: 86%; --ro: -8%; --rt: -12%; --rot: -1deg; }
/* entrada ao rolar: partem do zero e crescem até o repouso; cartões já à vista crescem ao carregar */
.rv-pronto .serv.rv-espera:not(.is-in) .serv__raizes { --c: 0; }
.rv-pronto .serv.is-in .serv__raizes { transition-duration: 3s, .6s; transition-delay: .5s, 0s; }
.rv-pronto .serv.is-in:hover .serv__raizes { transition-delay: 0s; }
@keyframes cresce { from { --c: 0; } }
.serv__raizes { animation: cresce 2.8s cubic-bezier(.3, .55, .25, 1) .4s backwards; }

/* ---------- texto ---------- */
.serv__etq { margin: 6px 0 -4px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-claro); }
.serv h2 { margin: 6px 0 0; font-size: clamp(1.6rem, 2.5vw, 2.1rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--palha); }
.serv__texto { margin: 0; max-width: 46ch; color: rgba(247, 245, 237, .9); }
.serv__acoes { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.serv .link-seta { color: var(--ouro-claro); }
.serv .link-seta:hover { color: #fff3cf; }
.serv .btn--linha { min-height: 44px; padding: 10px 18px; color: var(--palha); border-color: rgba(247, 245, 237, .5); }
.serv .btn--linha:hover { background: rgba(206, 160, 65, .16); border-color: var(--ouro); }
.serv a:focus-visible, .serv button:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }

/* ---------- cartões esticados: ícone, texto e botões lado a lado ---------- */
@media (min-width: 860px) {
  .serv:not(.serv--feat) {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; column-gap: clamp(22px, 3vw, 44px); row-gap: 6px;
    min-height: 190px; padding: clamp(26px, 3vw, 38px) clamp(30px, 4vw, 56px);
  }
  .serv:not(.serv--feat) .serv__no { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .serv:not(.serv--feat) h2 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .serv:not(.serv--feat) .serv__texto { grid-column: 2; grid-row: 2; align-self: start; max-width: 62ch; }
  .serv:not(.serv--feat) .serv__acoes { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; flex-direction: column; align-items: flex-start; gap: 12px; }
  /* o cartão é baixo: as raízes ficam menores e o recorte mostra a parte de cima */
  .serv:not(.serv--feat) .serv__raizes { --rw: 36%; --ro: 0%; --rt: -14%; --rot: 0deg; }
  .serv:not(.serv--feat) .btn--linha { background: rgba(8, 32, 21, .68); }
}

/* ---------- Mentoria Raiz e Alma: bloco dourado, raízes verdes ---------- */
.serv.serv--feat {
  color: #10251a; padding: clamp(36px, 4.6vw, 68px) clamp(32px, 5vw, 76px); gap: 16px; border-radius: 24px;
  background:
    radial-gradient(70% 90% at 10% 0%, rgba(255, 248, 218, .8), transparent 62%),
    radial-gradient(60% 80% at 100% 100%, rgba(140, 96, 20, .38), transparent 66%),
    linear-gradient(150deg, #f5dc92 0%, #e2ba5e 34%, #cc9d3f 66%, #b2852c 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 205, .75), inset 0 1px 0 rgba(255, 255, 255, .65), 0 54px 80px -46px rgba(110, 76, 14, .75);
  outline: 2px solid #b8892f; outline-offset: 10px;
}
.serv.serv--feat:hover, .serv.serv--feat:focus-within {
  outline-color: #9c7020; outline-offset: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 225, .95), inset 0 1px 0 rgba(255, 255, 255, .7), 0 64px 90px -46px rgba(110, 76, 14, .85);
}
.serv.serv--feat::after { background: radial-gradient(520px circle at var(--gx) var(--gy), rgba(255, 255, 255, .32), transparent 58%); }
/* moldura interna verde, como uma placa gravada */
.serv.serv--feat::before { inset: 12px; border: 1px solid rgba(13, 44, 30, .5); border-radius: 15px; background: none; }
.serv--feat h2, .serv--feat .serv__texto { text-shadow: none; }
.serv--feat h2 { color: #0d2c1e; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.serv--feat .serv__texto { color: rgba(14, 40, 27, .94); font-size: clamp(1.05rem, 1.5vw, 1.22rem); max-width: 52ch; }
.serv--feat .serv__etq { color: #0d2c1e; display: inline-flex; align-items: center; gap: 12px; }
.serv--feat .serv__etq::before { content: ''; width: 36px; height: 2px; background: #0d2c1e; opacity: .7; }
/* medalhão verde com o ícone da colheita (dourado) */
.serv.serv--feat .serv__no, .serv.serv--feat:hover .serv__no, .serv.serv--feat:focus-within .serv__no {
  width: 104px; height: 104px; background: radial-gradient(circle at 35% 30%, #1f5c3d, #0a281a 78%); border: 1px solid rgba(255, 238, 180, .8);
  box-shadow: 0 0 0 7px rgba(13, 44, 30, .14), 0 18px 30px -16px rgba(13, 44, 30, .85);
}
.serv.serv--feat:hover .serv__no, .serv.serv--feat:focus-within .serv__no { transform: scale(1.05); }
.serv--feat .serv__no img { width: 68%; height: auto; display: block; }
/* raízes verdes sobre o dourado */
.serv.serv--feat .serv__raizes {
  background-image: url('/img/raizes-verde.webp'); --rw: 58%; --ro: -3%; --rt: -8%; --rot: 0deg; --op: .6;
  /* some do lado esquerdo, para as raízes não passarem por cima do título */
  -webkit-mask-image: radial-gradient(circle farthest-corner at 70% 2%, #000 calc(var(--c) * 100%), transparent calc(var(--c) * 100% + 16%)), linear-gradient(90deg, transparent 6%, #000 46%);
  mask-image: radial-gradient(circle farthest-corner at 70% 2%, #000 calc(var(--c) * 100%), transparent calc(var(--c) * 100% + 16%)), linear-gradient(90deg, transparent 6%, #000 46%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.serv.serv--feat:hover .serv__raizes, .serv.serv--feat:focus-within .serv__raizes { opacity: .85; }
.serv--feat .link-seta { color: #0d2c1e; }
.serv--feat .link-seta:hover { color: #000; }
.serv--feat .btn--linha { background: #0d2c1e; color: var(--palha); border-color: #0d2c1e; }
.serv--feat .btn--linha:hover { background: #17482f; border-color: #17482f; }
.serv--feat a:focus-visible, .serv--feat button:focus-visible { outline-color: #0d2c1e; }
@media (min-width: 860px) { .serv--feat { min-height: 420px; } }

@media (prefers-reduced-motion: reduce) {
  .serv, .serv * { transition: none !important; animation: none !important; }
  .serv__raizes { --c: .15; }
  .serv:hover .serv__raizes, .serv:focus-within .serv__raizes { --c: 1; }
}

/* ---------- área do aluno: abas e serviços bloqueados ---------- */
.aluno-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; }
.aluno-nav a, .aluno-nav button {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 18px; border-radius: 999px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: rgba(247, 245, 237, .85); background: transparent; border: 1px solid rgba(247, 245, 237, .28); transition: background-color .3s, border-color .3s, color .3s;
}
.aluno-nav a:hover, .aluno-nav button:hover { background: rgba(247, 245, 237, .08); color: var(--palha); }
.aluno-nav a[aria-current='page'] { background: rgba(226, 194, 116, .16); border-color: rgba(226, 194, 116, .6); color: var(--palha); }
.aluno-nav form { margin: 0 0 0 auto; }
.aluno-nav-faixa { background: #0d2c1e; padding: 14px 0 18px; border-top: 1px solid rgba(247, 245, 237, .08); }
.aluno-nav-faixa .aluno-nav { margin: 0; }
.aluno-nav a:focus-visible, .aluno-nav button:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }

.serv--bloq { opacity: .6; filter: saturate(.55); transition: opacity .4s, filter .4s, outline-offset .5s var(--suave), outline-color .4s, box-shadow .5s; }
.serv--bloq:hover, .serv--bloq:focus-within { opacity: .92; filter: none; }
.serv--bloq .serv__no { border-style: dashed; }
.serv--bloq .serv__ico { stroke-width: 1.8; }
.rv-pronto .serv--bloq.rv-espera.is-in { opacity: .6; }
.rv-pronto .serv--bloq.rv-espera.is-in:hover { opacity: .92; }

/* ---------- cabeçalho da página Serviços ---------- */
.page-head .serv-cab { display: grid; gap: clamp(28px, 4vw, 48px); align-items: end; }
.serv-cab__rot { margin: 0 0 12px; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-claro); }
.page-head .serv-cab h1 { max-width: none; font-size: clamp(2.8rem, 6.4vw, 5.2rem); }
.page-head .serv-cab .lead { max-width: 52ch; color: rgba(247, 245, 237, .9); }
.serv-cab__acoes { margin-top: 26px; }
.serv-cab__pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-radius: 20px; overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 45%), rgba(10, 34, 23, .55);
  border: 1px solid rgba(226, 194, 116, .5); box-shadow: 0 30px 50px -40px rgba(2, 12, 8, .9); }
.serv-cab__pontos li { display: grid; gap: 4px; padding: 18px 22px; }
.serv-cab__pontos li + li { border-top: 1px solid rgba(226, 194, 116, .25); }
.serv-cab__pontos b { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--ouro-claro); }
.serv-cab__pontos span { font-size: .97rem; color: rgba(247, 245, 237, .85); }
@media (min-width: 900px) { .page-head .serv-cab { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); } }