/*
 * Gramática cromática do símbolo Local Partner:
 * núcleo verde = presença e ação;
 * menta + amarelo = direção e expansão;
 * azul = território, orientação e moldura.
 */

body[data-page-type="home"] {
  --page-core: var(--lp-green-deep);
  --page-dominant: var(--lp-green);
  --page-support: var(--lp-mint);
  --page-atmosphere: var(--lp-sky-soft);
  --page-frame: var(--lp-sky);
  --page-accent: var(--lp-yellow);
}

body[data-page-type="service"] {
  --page-core: var(--lp-green-deep);
  --page-dominant: var(--lp-green);
  --page-support: var(--lp-mint);
  --page-atmosphere: var(--lp-mint-soft);
  --page-frame: var(--lp-sky);
  --page-accent: var(--lp-yellow);
  --page-rail: linear-gradient(
    90deg,
    var(--lp-sky) 0 18%,
    var(--lp-green-deep) 18% 88%,
    var(--lp-yellow) 88% 94%,
    var(--lp-sky) 94% 100%
  );
}

body[data-page-type="service-hub"] {
  --page-core: var(--lp-green-deep);
  --page-dominant: var(--lp-green);
  --page-support: var(--lp-mint);
  --page-atmosphere: var(--lp-mint-soft);
  --page-frame: var(--lp-sky);
  --page-accent: var(--lp-yellow);
  --page-rail: linear-gradient(
    90deg,
    var(--lp-sky) 0 18%,
    var(--lp-green-deep) 18% 88%,
    var(--lp-yellow) 88% 94%,
    var(--lp-sky) 94% 100%
  );
}

body[data-page-type="tool"] {
  --page-core: var(--lp-blue-deep);
  --page-dominant: var(--lp-blue);
  --page-support: var(--lp-sky);
  --page-atmosphere: var(--lp-sky-soft);
  --page-frame: var(--lp-sky);
  --page-accent: var(--lp-yellow);
  --page-rail: linear-gradient(
    90deg,
    var(--lp-sky) 0 62%,
    var(--lp-blue) 62% 90%,
    var(--lp-yellow) 90% 95%,
    var(--lp-sky) 95% 100%
  );
}

body[data-page-type="tool-hub"] {
  --page-core: var(--lp-blue-deep);
  --page-dominant: var(--lp-blue);
  --page-support: var(--lp-sky);
  --page-atmosphere: var(--lp-sky-soft);
  --page-frame: var(--lp-sky);
  --page-accent: var(--lp-yellow);
  --page-rail: linear-gradient(
    90deg,
    var(--lp-sky) 0 62%,
    var(--lp-blue) 62% 90%,
    var(--lp-yellow) 90% 95%,
    var(--lp-sky) 95% 100%
  );
}

body[data-page-type="segment"],
body[data-page-type="segment-hub"] {
  --page-core: var(--lp-green-deep);
  --page-dominant: var(--lp-mint);
  --page-support: var(--lp-yellow-soft);
  --page-atmosphere: var(--lp-mint-soft);
  --page-frame: var(--lp-sky);
  --page-accent: var(--lp-yellow);
  --page-rail: linear-gradient(
    90deg,
    var(--lp-sky) 0 18%,
    var(--lp-mint) 18% 48%,
    var(--lp-yellow) 48% 53%,
    var(--lp-mint) 53% 84%,
    var(--lp-sky) 84% 100%
  );
}

body[data-page-type="article"],
body[data-page-type="blog-hub"] {
  --page-core: var(--lp-blue-deep);
  --page-dominant: var(--lp-blue);
  --page-support: var(--lp-mint);
  --page-atmosphere: var(--lp-sky-soft);
  --page-frame: var(--lp-sky);
  --page-accent: var(--lp-yellow);
  --page-rail: linear-gradient(
    90deg,
    var(--lp-sky) 0 50%,
    var(--lp-blue) 50% 88%,
    var(--lp-yellow) 88% 93%,
    var(--lp-sky) 93% 100%
  );
}

body[data-page-type="minisite"],
body[data-page-type="error"],
body[data-page-type="staging-fixture"] {
  --page-core: var(--lp-green-deep);
  --page-dominant: var(--lp-green);
  --page-support: var(--lp-mint);
  --page-atmosphere: var(--lp-canvas);
  --page-frame: var(--lp-sky);
  --page-accent: var(--lp-yellow);
}

.site-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.25rem;
  background: var(--page-rail);
  content: "";
  pointer-events: none;
}

.site-footer {
  box-shadow: inset 0 0.25rem 0 var(--page-frame);
}

body[data-page-type] .eyebrow {
  color: var(--page-core);
}

/* Home: a plataforma apresenta todas as famílias em uma única jornada. */
body[data-page-type="home"] .home-hero {
  background:
    radial-gradient(circle at 89% 10%, transparent 0 7rem, rgb(184 235 252 / 74%) 7.1rem 7.28rem, transparent 7.38rem),
    linear-gradient(135deg, var(--lp-white) 0%, var(--lp-sky-soft) 46%, var(--lp-mint-soft) 100%);
}

body[data-page-type="home"] .home-section--tools {
  background: linear-gradient(180deg, var(--lp-white), var(--lp-sky-soft));
  border-top: 0.25rem solid var(--lp-blue);
}

body[data-page-type="home"] .home-section--services {
  background: linear-gradient(180deg, var(--lp-canvas), var(--lp-mint-soft));
  border-top: 0.25rem solid var(--lp-green);
}

body[data-page-type="home"] .home-section--segments {
  background: linear-gradient(180deg, var(--lp-white), var(--lp-mint-soft));
  border-top: 0.25rem solid var(--lp-mint);
}

body[data-page-type="home"] .home-feature,
body[data-page-type="home"] .home-resource {
  border-top: 0.25rem solid var(--lp-blue);
}

body[data-page-type="home"] .home-segment {
  border-top: 0.25rem solid var(--lp-mint);
}

body[data-page-type="home"] .home-segment strong,
body[data-page-type="home"] .home-resource strong {
  text-decoration-color: var(--page-accent);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.28rem;
}

/* Serviços: o núcleo verde do pin concentra método, presença e decisão. */
body[data-page-type="service"] .service-profile-hero,
body[data-page-type="service"] .template-hero {
  background:
    radial-gradient(circle at 89% 12%, transparent 0 7rem, rgb(184 235 252 / 62%) 7.1rem 7.28rem, transparent 7.38rem),
    linear-gradient(145deg, var(--lp-white), var(--lp-mint-soft) 58%, var(--lp-sky-soft));
}

body[data-page-type="service"] .service-profile-hero__note {
  border-left-color: var(--page-accent);
}

body[data-page-type="service"] .service-profile-signals__grid {
  border-top: 0.25rem solid var(--page-dominant);
}

body[data-page-type="service"] .service-profile-signals__grid strong,
body[data-page-type="service"] .service-profile-text-link,
body[data-page-type="service"] .service-profile-journey__grid a {
  color: var(--page-core);
}

body[data-page-type="service"] .service-profile-method {
  background:
    radial-gradient(circle at 92% 8%, rgb(184 235 252 / 12%), transparent 20rem),
    var(--page-core);
  border-top: 0.25rem solid var(--page-accent);
}

body[data-page-type="service"] .service-profile-method .eyebrow,
body[data-page-type="service"] .service-profile-method h2,
body[data-page-type="service"] .service-profile-method .section-header > p:last-child {
  color: var(--lp-white);
}

body[data-page-type="service"] .service-profile-deliverables__grid article:hover,
body[data-page-type="service"] .service-profile-resource:hover {
  border-color: var(--page-support);
}

body[data-page-type="service"] .service-profile-final {
  background:
    radial-gradient(circle at 91% 9%, rgb(255 179 18 / 18%), transparent 19rem),
    linear-gradient(145deg, var(--lp-mint-soft), var(--lp-white));
  border-top: 0.25rem solid var(--page-frame);
}

/* Ferramentas: o azul cria um campo calmo para entender e executar a tarefa. */
body[data-page-type="tool"] :is(.whatsapp-hero, .diagnostic-hero, .review-hero, .review-link-hero, .template-hero--tool) {
  background: linear-gradient(180deg, var(--lp-white), var(--lp-sky-soft));
  border-bottom-color: var(--lp-sky);
}

body[data-page-type="tool"] :is(.whatsapp-hero__media, .diagnostic-hero__media, .review-hero__media, .review-link-hero__media) {
  --brand-orbit-1: clamp(13rem, 26vw, 22rem);
  --brand-orbit-2: clamp(16rem, 34vw, 29rem);
  --brand-orbit-3: clamp(19rem, 43vw, 37rem);
  --brand-orbit-4: clamp(22rem, 53vw, 46rem);
  --brand-orbit-5: clamp(25rem, 64vw, 56rem);

  z-index: 0;
  width: min(80%, var(--hero-media-size));
  aspect-ratio: 1;
  isolation: isolate;
}

body[data-page-type="tool"] :is(.whatsapp-hero__media, .diagnostic-hero__media, .review-hero__media, .review-link-hero__media) > img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  clip-path: none;
}

/* Em desktop, a mídia ocupa sempre o mesmo palco visual, sem recortar os PNGs transparentes.
   Copies mais longas podem ampliar a hero sem deslocar o centro visual. */
@media (min-width: 62rem) {
  :is(
    body[data-page-type="home"] .home-hero__media,
    body[data-page-type="segment"] .segment-local-hero__media,
    body[data-page-type="service"] .service-profile-hero__media,
    body[data-page-type="tool"] .whatsapp-hero__media,
    body[data-page-type="tool"] .diagnostic-hero__media,
    body[data-page-type="tool"] .review-hero__media,
    body[data-page-type="tool"] .review-link-hero__media
  ) {
    align-self: start;
    width: min(100%, var(--hero-media-desktop-size));
    margin-block-start: calc((var(--hero-stage-size) - var(--hero-media-desktop-size)) / 2);
  }

  :is(
    body[data-page-type="home"] .home-hero__content,
    body[data-page-type="segment"] .segment-local-hero__copy,
    body[data-page-type="service"] .service-profile-hero__copy,
    body[data-page-type="tool"] .whatsapp-hero__content,
    body[data-page-type="tool"] .diagnostic-hero__content,
    body[data-page-type="tool"] .review-hero__content,
    body[data-page-type="tool"] .review-link-hero__content
  ) {
    align-self: start;
    margin-block-start: calc((var(--hero-stage-size) - var(--hero-media-desktop-size)) / 2);
  }
}

:is(
  body[data-page-type="home"] .home-hero,
  body[data-page-type="segment"] .segment-local-hero,
  body[data-page-type="service"] .service-profile-hero,
  body[data-page-type="tool"] .whatsapp-hero,
  body[data-page-type="tool"] .diagnostic-hero,
  body[data-page-type="tool"] .review-hero,
  body[data-page-type="tool"] .review-link-hero
) h1 {
  margin-top: var(--space-4);
}

body[data-page-type="tool"] :is(.whatsapp-hero__content, .diagnostic-hero__content, .review-hero__content, .review-link-hero__content),
body[data-page-type="tool"] :is(.whatsapp-hero, .diagnostic-hero, .review-hero, .review-link-hero) .breadcrumbs {
  position: relative;
  z-index: 4;
}

body[data-page-type="tool"] :is(.whatsapp-hero__shortcut, .diagnostic-hero__shortcut, .review-hero__shortcut, .review-link-hero__shortcut) {
  position: relative;
  z-index: 5;
}

body[data-page-type="tool"] :is(.whatsapp-hero__shortcut, .diagnostic-hero__shortcut, .review-hero__shortcut, .review-link-hero__shortcut) {
  color: var(--page-core);
}

body[data-page-type="tool"] :is(.whatsapp-tool__card, .diagnostic-shell, .review-calculator, .review-link-generator, .tool-shell) {
  border-top: 0.25rem solid var(--page-dominant);
  box-shadow: 0 1rem 3rem rgb(49 95 117 / 12%);
}

body[data-page-type="tool"] :is(.whatsapp-related, .diagnostic-related, .review-related, .review-link-related, .related-tools) {
  background: linear-gradient(180deg, var(--lp-sky-soft), var(--lp-white));
}

body[data-page-type="tool"] .tool-faq summary::after {
  color: var(--page-core);
  background: var(--page-atmosphere);
}

body[data-page-type="tool"] .tool-faq details[open] summary::after {
  background: var(--lp-yellow-soft);
}

/* Segmentos: menta e amarelo sugerem direções específicas sem virar doorway. */
body[data-page-type="segment"] .template-hero {
  background:
    radial-gradient(circle at 84% 16%, transparent 0 5.75rem, rgb(132 200 165 / 42%) 5.85rem 6.05rem, transparent 6.15rem),
    linear-gradient(145deg, var(--lp-white), var(--lp-mint-soft) 62%, var(--lp-sky-soft));
  border-bottom: 0.25rem solid var(--page-dominant);
}

body[data-page-type="segment"] .template-placeholder {
  position: relative;
  border-top: 0.25rem solid var(--page-dominant);
}

body[data-page-type="segment"] .template-placeholder::after {
  position: absolute;
  top: -0.25rem;
  right: var(--space-6);
  width: 2.5rem;
  height: 0.25rem;
  background: var(--page-accent);
  content: "";
}

/* Artigos: azul editorial enquadra a leitura; amarelo marca decisões. */
body[data-page-type="article"] .article-header,
body[data-page-type="blog-hub"] .blog-hero {
  background:
    radial-gradient(circle at 86% 14%, transparent 0 6rem, rgb(132 200 165 / 28%) 6.1rem 6.25rem, transparent 6.35rem),
    linear-gradient(145deg, var(--lp-white), var(--lp-sky-soft));
  border-bottom: 0.25rem solid var(--page-dominant);
}

body[data-page-type="article"] .article-body h2 {
  color: var(--page-core);
}

body[data-page-type="article"] .article-body h2::after {
  display: block;
  width: 2.75rem;
  height: 0.25rem;
  margin-top: var(--space-3);
  background: var(--page-accent);
  border-radius: 999px;
  content: "";
}

body[data-page-type="article"] .article-body .article-next-step .eyebrow,
body[data-page-type="article"] .article-body .article-next-step h2 {
  color: var(--lp-white);
}

body[data-page-type="article"] .article-body .article-next-step h2::after {
  background: var(--page-accent);
}

@media (prefers-reduced-motion: reduce) {
  .site-header::after {
    transition: none;
  }
}