/* The connected-units map and its existing interactive controls. */
#recursos .n-units {
  padding: 16px 0 0;
}
/* The map carries its own glow; a column-wide halo here read as a green shadow behind the cards. */
#recursos .n-units::before { content: none; }
#recursos .n-organization { margin-bottom: clamp(8px, 2vw, 16px); }

/* Isometric map: three unit buttons around the PlantOn+ hub. Old .n-unit-graph rules no longer match. */
#recursos .u-map {
  position: relative;
  container-type: inline-size;
  width: min(100%, 560px);
  aspect-ratio: 600 / 500;
  margin: 0 auto;
}
#recursos .u-map::before {
  content: "";
  position: absolute;
  inset: 30% 5% 1%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(79, 231, 155, .2), rgba(6, 126, 99, .07) 55%, transparent 72%);
  pointer-events: none;
}
#recursos .u-map-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#recursos .u-map-links path { fill: none; stroke-linecap: round; }
#recursos .u-map-wires path {
  stroke: rgba(160, 255, 205, .95);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 5px rgba(65, 241, 157, .55));
}
#recursos .u-map-flow path {
  stroke: #d2ffe6;
  stroke-width: 3;
  stroke-dasharray: 7 93;
  opacity: 0;
  filter: drop-shadow(0 0 6px #73ffb0);
}
#recursos .u-map-nodes circle {
  fill: #e8ffe9;
  stroke: #7ff5bd;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px #48ec9d);
}

#recursos .u-map-hub {
  position: absolute;
  z-index: 2;
  top: 65%;
  left: 50%;
  width: 24%;
  transform: translate(-50%, -50%);
}
/* Every glow layer shares the hub centre, so nothing reads as an offset shadow. */
#recursos .u-map-hub::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(80, 250, 170, .3), rgba(40, 210, 140, .08) 52%, transparent 70%);
  pointer-events: none;
}
#recursos .u-map-hub-shape { display: block; width: 100%; height: auto; overflow: visible; }
#recursos .u-map-hub-halo {
  fill: rgba(70, 240, 160, .08);
  stroke: rgba(150, 255, 205, .38);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
#recursos .u-map-hub-face {
  fill: url(#uMapHubFill);
  stroke: #8dffc4;
  stroke-width: 2.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(70, 255, 160, .45));
}
#recursos .u-map-hub-copy {
  position: absolute;
  inset: 15% 21%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12em;
  color: #effff6;
  text-align: center;
  line-height: 1;
}
#recursos .u-map-hub-leaf { width: 15%; height: auto; fill: #d9ffe9; filter: drop-shadow(0 0 6px rgba(160, 255, 210, .6)); }
#recursos .u-map-hub-brand { font-size: clamp(9px, 2.1cqw, 13px); font-weight: 800; }
#recursos .u-map-hub-copy strong {
  font-size: clamp(24px, 7.8cqw, 46px);
  font-weight: 800;
  line-height: .95;
  text-shadow: 0 0 18px rgba(140, 255, 200, .55);
}
#recursos .u-map-hub-copy small { max-width: 11ch; color: #d4f9e6; font-size: clamp(8px, 1.75cqw, 11px); line-height: 1.2; }

#recursos .u-map-units { position: absolute; inset: 0; z-index: 3; }
#recursos .u-map-unit {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#recursos .u-map-unit--0 { top: 0; left: 50%; width: 40%; transform: translateX(-50%); }
#recursos .u-map-unit--1 { top: 50%; left: 0; width: 31%; }
#recursos .u-map-unit--2 { top: 50%; right: 0; width: 31%; }
#recursos .u-map-unit-figure { position: relative; display: block; width: 100%; }
#recursos .u-map-unit-base {
  position: absolute;
  z-index: 0;
  right: 2%;
  bottom: 2%;
  left: 2%;
  height: 40%;
  border: 1px solid rgba(140, 255, 200, .22);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(120, 255, 190, .34), rgba(60, 230, 150, .1) 58%, transparent 74%);
  opacity: .55;
  transition: opacity .3s ease, box-shadow .3s ease;
}
#recursos .u-map-unit-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 12px rgba(0, 25, 20, .38));
  transition: transform .35s cubic-bezier(.22, .7, .2, 1), filter .35s ease;
}
#recursos .u-map-unit-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: -4%;
  padding: .28em 1.1em .28em .3em;
  border: 1px solid rgba(114, 248, 179, .55);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(0, 82, 64, .97), rgba(0, 47, 43, .97));
  box-shadow: 0 0 15px rgba(45, 230, 150, .18), inset 0 1px rgba(224, 255, 231, .2);
  font-size: clamp(10px, 2.3cqw, 14px);
  white-space: nowrap;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
#recursos .u-map-unit-icon {
  display: grid;
  width: 2.1em;
  height: 2.1em;
  place-items: center;
  border: 1px solid rgba(170, 255, 210, .7);
  border-radius: 50%;
  background: linear-gradient(145deg, #1fcf8c, #037052);
  box-shadow: 0 0 10px rgba(60, 240, 160, .45);
  color: #effff6;
}
#recursos .u-map-unit-icon svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#recursos .u-map-unit-label strong { color: #f1fff7; font-weight: 800; }
#recursos .u-map-unit:hover .u-map-unit-art { transform: translateY(-2%); }
#recursos .u-map-unit[aria-pressed="true"] .u-map-unit-art {
  transform: translateY(-4%);
  filter: drop-shadow(0 18px 14px rgba(0, 25, 20, .42)) drop-shadow(0 0 16px rgba(80, 255, 170, .32));
}
#recursos .u-map-unit[aria-pressed="true"] .u-map-unit-base { opacity: 1; box-shadow: 0 0 24px rgba(90, 255, 175, .42); }
#recursos .u-map-unit[aria-pressed="true"] .u-map-unit-label {
  border-color: #9cffc8;
  background: linear-gradient(145deg, #0c8a63, #035241);
  box-shadow: 0 0 22px rgba(70, 255, 170, .4), inset 0 1px rgba(224, 255, 231, .3);
}
#recursos .u-map-unit:focus-visible { outline: none; }
#recursos .u-map-unit:focus-visible .u-map-unit-label { outline: 2px solid #baffdb; outline-offset: 3px; }

#recursos .u-map-leaf { position: absolute; z-index: 2; width: 5%; opacity: .85; pointer-events: none; }
#recursos .u-map-leaf svg { display: block; width: 100%; height: auto; fill: #4fd685; filter: drop-shadow(0 0 8px rgba(90, 255, 160, .45)); }
#recursos .u-map-leaf--one { top: 30%; left: 25%; transform: rotate(-24deg); }
#recursos .u-map-leaf--two { top: 36%; right: 24%; width: 3.6%; opacity: .7; transform: rotate(18deg) scaleX(-1); }

/* Selected-unit area: no outer frame. A glass pill like the map labels, then four 3D cards whose faces flip. */
#recursos .n-unit-detail {
  position: relative;
  display: flex;
  width: min(100%, 560px);
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  /* Legacy glass card in narrative.css blurred and saturated the backdrop into a visible rectangle. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#recursos .n-unit-identity {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 6px 20px 6px 6px;
  border: 1px solid rgba(114, 248, 179, .5);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(0, 82, 64, .92), rgba(0, 47, 43, .92));
  box-shadow: 0 0 18px rgba(45, 230, 150, .16), inset 0 1px rgba(224, 255, 231, .18);
  text-align: left;
}
#recursos .n-unit-detail-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(170, 255, 210, .7);
  border-radius: 50%;
  background: linear-gradient(145deg, #1fcf8c, #037052);
  box-shadow: 0 0 12px rgba(60, 240, 160, .4);
}
#recursos .n-unit-route { grid-column: auto; width: auto; min-width: 0; padding: 0; border: 0; text-align: center; }
#recursos .n-unit-route > strong { display: block; font-size: 16px; line-height: 1.2; }
#recursos .n-unit-route p { display: block; margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; }

#recursos .n-unit-scope { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; border: 0; }
#recursos .n-unit-scope-card {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  box-shadow: none;
  color: #effff6;
  font: inherit;
  text-align: center;
  cursor: pointer;
  perspective: 800px;
  transition: transform .25s ease;
}
#recursos .n-unit-scope-card::after { content: none; }
#recursos .n-unit-scope-card:hover { transform: translateY(-3px); }
#recursos .n-unit-scope-card:focus-visible { outline: 2px solid #baffdb; outline-offset: 3px; }
#recursos .n-scope-flip { position: relative; display: block; width: 100%; min-height: 104px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.22, .7, .2, 1); }
#recursos .n-unit-scope-card.is-flipped .n-scope-flip { transform: rotateY(180deg); }
#recursos .n-scope-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 10px;
  border: 1px solid rgba(114, 248, 179, .42);
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-align: center;
}
#recursos .n-scope-front {
  background: linear-gradient(160deg, #075e47, #04332e);
  transform: rotateY(0deg) translateZ(1px);
  box-shadow: 0 10px 22px rgba(0, 25, 22, .25), inset 0 1px rgba(224, 255, 231, .16);
  transition: border-color .25s ease, box-shadow .25s ease;
}
#recursos .n-unit-scope-card:hover .n-scope-front,
#recursos .n-unit-scope-card:focus-visible .n-scope-front {
  border-color: rgba(156, 255, 200, .85);
  box-shadow: 0 12px 24px rgba(0, 25, 22, .3), 0 0 16px rgba(91, 255, 174, .2), inset 0 1px rgba(224, 255, 231, .2);
}
#recursos .n-scope-back {
  justify-content: center;
  border-color: rgba(214, 255, 233, .9);
  background: linear-gradient(150deg, #effff5, #c9f5df);
  box-shadow: 0 10px 22px rgba(0, 25, 22, .25);
  color: #0b3d31;
  transform: rotateY(180deg) translateZ(1px);
}
#recursos .n-scope-hint {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: rgba(120, 245, 185, .16);
  color: #9dffd0;
}
#recursos .n-scope-hint svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#recursos .n-unit-scope-icon {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 3px;
  place-items: center;
  border: 1px solid rgba(170, 255, 210, .55);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(31, 207, 140, .55), rgba(3, 112, 82, .7));
  box-shadow: 0 0 10px rgba(60, 240, 160, .22);
}
#recursos .n-scope-front > strong { font-size: 13.5px; line-height: 1.2; }
#recursos .n-scope-front > small { color: #b8dfce; font-size: 11px; line-height: 1.25; }
#recursos .n-scope-back strong { color: #06533f; font-size: 12.5px; }
#recursos .n-scope-back small { color: #24584a; font-size: 11px; line-height: 1.35; }
#recursos .n-scope-return { margin-top: 2px; color: #078963; font-size: 10px; font-weight: 800; }

@container (max-width: 470px) {
  #recursos .u-map-unit--0 { width: 41%; }
  #recursos .u-map-unit--1, #recursos .u-map-unit--2 { top: 50%; width: 34%; }
  #recursos .u-map-unit--1 { left: -1%; }
  #recursos .u-map-unit--2 { right: -1%; }
  #recursos .u-map-hub { top: 61%; width: 29%; }
  #recursos .u-map-unit-label { gap: .4em; padding-right: .8em; }
}
@media (max-width: 560px) {
  #recursos .u-map { aspect-ratio: 600 / 520; }
}
@media (max-width: 560px) {
  #recursos .n-unit-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #recursos .n-unit-identity { padding-right: 16px; }
  #recursos .n-unit-route p { display: block; }
  #recursos .n-unit-route p::before { content: none; }
}
@media (prefers-reduced-motion: no-preference) {
  #recursos .u-map-flow path { opacity: .9; animation: u-map-flow 3.4s linear infinite; }
  #recursos .u-map-leaf { animation: u-map-leaf 6s ease-in-out infinite alternate; }
  #recursos .u-map-leaf--two { animation-delay: -3s; }
  #recursos .n-unit-detail > * { animation: unit-detail-in .3s ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
  #recursos .n-scope-flip, #recursos .n-unit-scope-card,
  #recursos .u-map-unit-art, #recursos .u-map-unit-base, #recursos .u-map-unit-label { transition: none; }
}
@keyframes u-map-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes u-map-leaf { to { translate: 0 -6px; } }
@keyframes unit-detail-in { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Largura alinhada ao texto da seção "O produto" (só desktop; mobile segue o .wrap padrão) */
@media (min-width: 701px) { #recursos > .wrap { width: min(1240px, calc(100% - 48px)); max-width: none; } }

/* Desktop: o texto da esquerda começa junto ao topo do mapa, em vez de centralizado na coluna alta */
@media (min-width: 1031px) { #recursos .highlight-copy { align-self: start; padding-top: 40px; } }

/* Desktop: sobe um pouco a coluna do mapa */
@media (min-width: 1031px) { #recursos .units-panel { position: relative; top: -16px; } }

/* Flutuação leve dos cards e dos prédios (`translate` não conflita com hover/seleção em `transform`) */
@keyframes u-bob { 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: no-preference) {
  #recursos .u-map-unit-art { animation: u-bob 6s ease-in-out infinite; }
  #recursos .u-map-unit--1 .u-map-unit-art { animation-delay: -2s; }
  #recursos .u-map-unit--2 .u-map-unit-art { animation-delay: -4s; }
}

/* Fundo da seção com mais variação: brilho esverdeado atrás do mapa, base mais profunda à esquerda.
   A primeira camada mantém a emenda com a onda do topo. */
#recursos.highlight.section {
  background-image:
    linear-gradient(#022d2b, transparent 84px),
    radial-gradient(ellipse 55% 60% at 72% 42%, rgba(38, 196, 145, .34), transparent 70%),
    radial-gradient(ellipse 45% 55% at 8% 92%, rgba(14, 170, 124, .22), transparent 70%),
    radial-gradient(ellipse 40% 40% at 96% 8%, rgba(120, 236, 190, .14), transparent 70%),
    linear-gradient(150deg, #021f1e 0%, #04423a 38%, #087259 68%, #03302c 100%) !important; /* narrative.css usa !important */
}