/* ==========================================================================
   Legado 7 — Dobra 05: nossas estruturas de marketing (Presença, Autoridade, Crescimento)
   Tríptico expansível: as três estruturas ficam sempre visíveis; a escolhida se abre.
   A mesma linguagem arquitetônica evolui de uma para outra. estruturas.js controla o
   acordeão (botões com aria-expanded). Sem JS: as três aparecem abertas.
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.estruturas {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(88px, 12vh, 140px) var(--gutter) clamp(64px, 9vh, 110px);
  background:
    radial-gradient(40% 40% at 50% 60%, rgba(164, 5, 78, .12), transparent 70%),
    linear-gradient(180deg, var(--l7-abismo), #060a24 50%, var(--l7-abismo));
}
.estruturas__inner { max-width: var(--max); margin: 0 auto; }

/* Cabeçalho centralizado ------------------------------------------------- */
.estruturas__head { max-width: 820px; margin: 0 auto; text-align: center; }
.estruturas__eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font-family: var(--l7-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--l7-rosa-glow);
}
.estruturas__eyebrow span { width: 28px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.estruturas__title { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.06; font-size: clamp(32px, 3vw + 12px, 60px); text-wrap: balance; }
.estruturas__title em { font-style: normal; color: var(--l7-rosa-glow); text-shadow: 0 0 30px rgba(255, 26, 94, .3); }
.estruturas__lead { margin: 18px auto 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--l7-texto-suave); }
.estruturas__dica {
  margin: clamp(32px, 5vh, 52px) 0 16px; text-align: center;
  font-family: var(--l7-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--l7-texto-suave);
}

/* Tríptico ----------------------------------------------------------------- */
.estruturas__trilha { display: grid; gap: 14px; }
.estrutura {
  position: relative; overflow: hidden; border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(165deg, rgba(14, 24, 62, calc(.55 + var(--nivel) * .12)), rgba(5, 4, 25, .92));
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* Sofisticação cresce com o nível: Presença minimalista → Autoridade em destaque → Crescimento integrado */
.estrutura--presenca { --nivel: 0; background: linear-gradient(165deg, rgba(14, 24, 62, .45), rgba(5, 4, 25, .95)); }
.estrutura--autoridade { --nivel: 1; border-color: rgba(255, 26, 94, .35); }
.estrutura--crescimento {
  --nivel: 2; border-color: transparent;
  background:
    linear-gradient(165deg, rgba(24, 30, 86, .92), rgba(8, 6, 32, .96)) padding-box,
    conic-gradient(from var(--giro, 0deg), rgba(255, 26, 94, .7), rgba(4, 31, 87, .6), rgba(164, 5, 78, .7), rgba(37, 111, 161, .5), rgba(255, 26, 94, .7)) border-box;
}
.estrutura--crescimento::after { /* grade sutil: estrutura integrada */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 60%, #000, transparent 80%); mask-image: radial-gradient(70% 70% at 70% 60%, #000, transparent 80%);
}
.estrutura > * { position: relative; z-index: 1; }
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Indicador de nível (conceitual: essencial, ampliada, integrada) */
.estrutura__nivel { display: inline-flex; gap: 4px; margin-right: 10px; vertical-align: middle; }
.estrutura__nivel i { display: block; width: 18px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.estrutura__nivel i.on { background: var(--l7-rosa-glow); box-shadow: 0 0 8px rgba(255, 26, 94, .7); }
.estrutura__para { font-family: var(--l7-mono); font-size: 11.5px !important; letter-spacing: .14em; text-transform: uppercase; color: #DDE0EE !important; }
.estrutura__inclui {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 26, 94, .3); background: rgba(255, 26, 94, .06);
  font-size: 14px; line-height: 1.5; color: #E6E8F4;
}
.estrutura__inclui span { color: var(--l7-rosa-glow); font-weight: 800; margin-right: 4px; }
/* destaque discreto da Autoridade: fio de luz no topo */
.estrutura--autoridade::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--l7-rosa-glow), transparent); opacity: .9;
}

.estrutura__titulo { margin: 0; }
.estrutura__botao {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 16px;
  width: 100%; padding: 24px 28px 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.estrutura__num { font-family: var(--l7-mono); font-size: 13px; letter-spacing: .1em; color: var(--l7-rosa-glow); }
.estrutura__nome { font-size: clamp(26px, 1.4vw + 16px, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.estrutura__para { grid-column: 2; font-size: 13px; color: var(--l7-texto-suave); letter-spacing: .01em; }
.estrutura__botao:focus-visible { outline: 2px solid #fff; outline-offset: -6px; border-radius: 20px; }

.estrutura__conteudo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; padding: 18px 28px 28px; align-items: center; }
.estrutura__frase { margin: 0; font-size: clamp(20px, .8vw + 14px, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.estrutura__desc { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--l7-texto-suave); }
.estrutura__obj-titulo { margin: 18px 0 10px; font-family: var(--l7-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--l7-rosa-glow); }
.estrutura__objetivos { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.estrutura__objetivos li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.45; color: #DDE0EE; }
.estrutura__objetivos li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 2px;
  background: var(--l7-rosa-glow); transform: rotate(45deg); box-shadow: 0 0 8px rgba(255, 26, 94, .7);
}
.estrutura__cta { margin-top: 24px; }
.estrutura__visual { position: relative; aspect-ratio: 420 / 300; border-radius: 16px; background: radial-gradient(60% 70% at 50% 60%, rgba(4, 31, 87, .5), transparent 75%); }

/* Desktop: três colunas; a aberta se expande ------------------------------ */
@media (min-width: 1101px) {
  .js .estruturas__trilha { display: flex; gap: 14px; min-height: 760px; }
  .js .estrutura { flex: 0 0 168px; display: flex; flex-direction: column; transition: flex-basis .7s cubic-bezier(.65, 0, .35, 1), flex-grow .7s cubic-bezier(.65, 0, .35, 1), border-color .4s; }
  .js .estrutura.is-aberta { flex: 1 1 0; }
  .js .estrutura:not(.is-aberta) .estrutura__botao {
    height: 100%; grid-template-columns: 1fr; align-content: space-between; align-items: start; padding: 26px 22px;
  }
  .js .estrutura:not(.is-aberta) .estrutura__nome { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: start; font-size: 34px; }
  .js .estrutura:not(.is-aberta) .estrutura__para { grid-column: 1; font-size: 10.5px !important; line-height: 1.6; letter-spacing: .1em; }
  .js .estrutura:not(.is-aberta) .estrutura__nivel { display: flex; margin: 0 0 8px; }
  .js .estrutura:not(.is-aberta):hover { border-color: rgba(255, 26, 94, .45); }
  .js .estrutura:not(.is-aberta):hover .estrutura__nome { color: var(--l7-rosa-glow); }
  .js .estrutura.is-aberta .estrutura__botao { cursor: default; }
  /* conteúdo já na largura final: é revelado enquanto o painel se expande, sem o texto se reorganizar */
  .js .estrutura__conteudo { flex: 1; width: calc(min(var(--max), 100vw - var(--gutter) * 2) - 168px * 2 - 28px); }
  .js .estrutura:not(.is-aberta) .estrutura__conteudo { display: none; }
  .no-js .estruturas__trilha { grid-template-columns: repeat(3, 1fr); }
  .no-js .estrutura__conteudo { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Ilustrações (estado final = estático)
   -------------------------------------------------------------------------- */
.ilu5 { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ilu5 * { transform-box: fill-box; transform-origin: 50% 100%; }
.ilu5-chao path { stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
.ilu5-chao .guia { stroke: rgba(255, 255, 255, .05); }
.ilu5-rotulo { font-family: var(--l7-mono); font-size: 10px; letter-spacing: .3em; fill: var(--l7-texto-suave); }
.fundacao { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .25); }
.bloco-frente { fill: rgba(20, 34, 86, .9); stroke: rgba(255, 26, 94, .45); stroke-width: 1.2; }
.bloco-topo { fill: rgba(60, 80, 160, .6); stroke: rgba(255, 26, 94, .45); stroke-width: 1.2; }
.bloco-lado { fill: rgba(10, 18, 50, .95); stroke: rgba(255, 26, 94, .35); stroke-width: 1.2; }
.bloco--apoio .bloco-frente { fill: rgba(20, 34, 86, .6); }
.bloco--torre .bloco-frente { fill: rgba(255, 26, 94, .3); stroke: var(--l7-rosa-glow); }
.bloco--torre .bloco-topo { fill: rgba(255, 26, 94, .55); stroke: var(--l7-rosa-glow); }
.bloco--torre { filter: drop-shadow(0 0 14px rgba(255, 26, 94, .45)); }
.planta { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.halo ellipse { fill: none; stroke: rgba(255, 26, 94, .45); stroke-width: 1.2; transform-origin: 50% 50%; }
.farol { fill: #fff; filter: drop-shadow(0 0 10px var(--l7-rosa-glow)); transform-origin: 50% 50%; }
.rede { fill: none; stroke: rgba(255, 26, 94, .7); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linejoin: round; }
.rede--2 { stroke: rgba(255, 26, 94, .3); }
.rede-fluxo { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .001 .2; opacity: 0; }
.no5 { fill: var(--l7-rosa-glow); filter: drop-shadow(0 0 6px var(--l7-rosa-glow)); transform-origin: 50% 50%; }
.expansao { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .js .estrutura.is-aberta .estrutura__texto > * { animation: est-sobe .6s var(--ease) both; }
  .js .estrutura.is-aberta .estrutura__desc { animation-delay: .06s; }
  .js .estrutura.is-aberta .estrutura__obj-titulo, .js .estrutura.is-aberta .estrutura__objetivos { animation-delay: .12s; }
  .js .estrutura.is-aberta .estrutura__cta { animation-delay: .18s; }

  /* blocos sobem do chão, em ordem */
  .estrutura.is-aberta .bloco { animation: est-ergue .8s cubic-bezier(.2, 1, .3, 1) var(--d, 0s) both; }
  .estrutura.is-aberta .fundacao { animation: est-fundacao .7s var(--ease) .15s both; transform-origin: 50% 50%; }
  /* Presença: a planta é traçada e a base se estabelece */
  .estrutura.is-aberta .planta { animation: est-desenha 1.2s var(--ease) 1.1s both; }
  .estrutura.is-aberta .ilu5-rotulo { animation: est-aparece .6s var(--ease) 1.8s both; }
  /* Autoridade: a torre se destaca e emite reconhecimento */
  .estrutura.is-aberta .halo ellipse { animation: est-halo 3s ease-out 1.3s infinite; }
  .estrutura.is-aberta .halo ellipse:nth-child(2) { animation-delay: 2.3s; }
  .estrutura.is-aberta .halo ellipse:nth-child(3) { animation-delay: 3.3s; }
  .estrutura.is-aberta .farol { animation: est-pop .6s cubic-bezier(.2, 1.4, .4, 1) 1.1s both, est-brilha 2.4s ease-in-out 1.8s infinite; }
  /* Crescimento: os módulos se conectam e passam a trocar fluxo */
  .estrutura.is-aberta .rede { animation: est-desenha 1.1s var(--ease) 1s both; }
  .estrutura.is-aberta .no5 { animation: est-pop .5s cubic-bezier(.2, 1.4, .4, 1) var(--d, 0s) both; }
  .estrutura.is-aberta .rede-fluxo { opacity: .9; animation: est-fluxo 2.4s linear 2s infinite backwards; }
  .estrutura.is-aberta .expansao { animation: est-aparece .6s var(--ease) 2s both; }

  .estrutura--crescimento { animation: est-borda 9s linear infinite; }
  /* faixa de competências em movimento contínuo e lento */
  .estruturas__faixa { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .estruturas__lista { animation: est-faixa 38s linear infinite; }
  .estruturas__faixa:hover .estruturas__lista { animation-play-state: paused; }
}
@keyframes est-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes est-ergue { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes est-fundacao { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
@keyframes est-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes est-aparece { from { opacity: 0; } }
@keyframes est-halo { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
@keyframes est-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes est-brilha { 50% { transform: scale(1.4); opacity: .7; } }
@keyframes est-fluxo { from { stroke-dashoffset: .2; } to { stroke-dashoffset: 0; } }
@keyframes est-faixa { to { transform: translateX(-100%); } }
@keyframes est-borda { to { --giro: 360deg; } }

/* Consultoria + competências ---------------------------------------------- */
.estruturas__consultoria {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 20px; padding: 26px 28px; border-radius: 20px;
  border: 1px dashed rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .02);
}
.estruturas__consultoria-titulo { margin: 0; font-size: clamp(19px, .6vw + 15px, 24px); font-weight: 700; letter-spacing: -.01em; }
.estruturas__consultoria p { margin: 6px 0 0; font-size: 15px; color: var(--l7-texto-suave); }

.estruturas__competencias { margin-top: clamp(48px, 7vh, 80px); text-align: center; }
.estruturas__comp-titulo { margin: 0; font-size: clamp(18px, .6vw + 14px, 22px); font-weight: 700; }
.estruturas__comp-titulo span { color: var(--l7-rosa-glow); }
.estruturas__faixa { display: flex; overflow: hidden; margin-top: 22px; padding: 6px 0; }
.estruturas__lista { flex: none; display: flex; margin: 0; padding: 0; list-style: none; }
.estruturas__lista li {
  display: inline-flex; align-items: center; white-space: nowrap; padding: 0 22px;
  font-size: clamp(15px, .6vw + 11px, 19px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C9CDE3;
}
.estruturas__lista li::after { content: ""; width: 6px; height: 6px; margin-left: 44px; border-radius: 50%; background: var(--l7-rosa-glow); box-shadow: 0 0 8px var(--l7-rosa-glow); }
.estruturas__nota { margin: 14px 0 0; font-size: 13px; color: var(--l7-texto-suave); }
.estruturas__next {
  margin: clamp(36px, 6vh, 56px) 0 0; display: flex; justify-content: center; align-items: center; gap: 10px;
  font-family: var(--l7-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--l7-texto-suave);
}
.estruturas__next::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--l7-rosa-glow); border-bottom: 1.5px solid var(--l7-rosa-glow); transform: rotate(45deg) translateY(-2px); }

/* Movimento reduzido: competências quebram em linhas, sem faixa rolando */
@media (prefers-reduced-motion: reduce) {
  .estruturas__faixa { justify-content: center; }
  .estruturas__lista { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .estruturas__lista--eco { display: none; }
}

/* Tablet e celular: acordeão vertical ------------------------------------- */
@media (max-width: 1100px) {
  .estrutura__botao { position: relative; padding: 20px 52px 20px 20px; }
  .estrutura__botao::after { /* seta do acordeão */
    content: ""; position: absolute; right: 22px; top: 28px; width: 9px; height: 9px;
    border-right: 2px solid var(--l7-rosa-glow); border-bottom: 2px solid var(--l7-rosa-glow);
    transform: rotate(45deg); transition: transform .3s var(--ease);
  }
  .estrutura__botao[aria-expanded="true"]::after { transform: rotate(-135deg); top: 32px; }
  .no-js .estrutura__botao::after { display: none; }
  .estrutura__conteudo { grid-template-columns: 1fr; padding: 0 20px 22px; gap: 16px; }
  .estrutura__visual { order: -1; }
  .js .estrutura:not(.is-aberta) .estrutura__conteudo { display: none; }
  .estruturas__consultoria { padding: 22px 20px; }
  .estruturas__consultoria .btn { width: 100%; }
  .estrutura__cta { width: 100%; }
}