.marketing-page { background: #f4f7f2; color: #162620; }
.site-header, .hero { background: #06261e; color: #fff; }
.site-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem 1.5rem; padding-block: .9rem; }
.site-nav nav { align-items: center; flex-wrap: wrap; gap: .5rem; }
.site-nav nav a { padding: .55rem .75rem; border: 0; }
.site-nav .site-link { border: 1px solid #8aa699; border-radius: .5rem; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.hero h1 { margin: 0; max-width: 16ch; font-size: clamp(2.35rem, 6vw, 4.5rem); letter-spacing: -.06em; }
.hero h1 span { color: #82f342; display: block; }
.hero p { max-width: 47ch; color: #d7e7df; font-size: 1.12rem; margin-block: 1.2rem 1.55rem; }
.site-cta { display: inline-flex; align-items: center; gap: .8rem; border: 1px solid transparent; border-radius: .55rem; padding: .7rem 1rem; color: #12240c; background: #82f342; font: inherit; font-weight: 750; text-decoration: none; }
.site-cta:hover { background: #a0fb70; color: #12240c; }
.hero :focus-visible { outline-color: #a9dcff; }
.hero-photo { display: block; width: 100%; height: clamp(22rem, 41vw, 33rem); object-fit: cover; border: 1px solid #416257; border-radius: 1rem; background: #0e362b; }
.site-section { padding-block: clamp(2rem, 6vw, 4rem); }
.marketing-page h2 { font-size: clamp(1.65rem, 4vw, 2.45rem); letter-spacing: -.035em; }
.story-intro { max-width: 62ch; color: #435950; }
.story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0 0; padding: 0; counter-reset: etapa; }
.story li { counter-increment: etapa; border: 1px solid #cad7cd; border-radius: .8rem; background: #fff; overflow: hidden; }
.story li::marker { content: ''; }
.story img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #dfead8; }
.story-copy { padding: 1.15rem; }
.story h3::before { content: counter(etapa, decimal-leading-zero); display: block; margin-bottom: .35rem; color: #276342; font-size: .85rem; letter-spacing: .08em; }
.story p, .participation p, .demo-panel p { color: #435950; }
.story p { margin-bottom: 0; }
.participation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.25rem, 5vw, 3.5rem); }
.participation > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .9rem; background: #dfead8; }
.norm-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; padding: 0; margin-bottom: 0; }
.norm-links a { color: #134735; font-weight: 650; text-underline-offset: .18em; }
.demo-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); background: #e6f3e6; border: 1px solid #cad7cd; border-radius: 1rem; padding: clamp(1.15rem, 4vw, 2.5rem); }
.form-note { font-size: .9rem; }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; padding-block: 1.2rem; border-top: 1px solid #cad7cd; }
.site-footer a { color: #134735; }
@media (max-width: 760px) {
  .hero-inner, .participation { grid-template-columns: 1fr; }
  .hero-photo { height: clamp(15rem, 75vw, 29rem); }
  .story { grid-template-columns: 1fr; }
}

.insights {
  background: #e6f3e6;
  border-block: 1px solid #cad7cd;
}
.insights-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.insights-inner p, .insight-list, .feature-card p { color: #435950; }
.insight-list { margin: 1.35rem 0 0; padding-inline-start: 1.2rem; }
.insight-list li + li { margin-top: .65rem; }
.insight-list li::marker { color: #276342; }
.indicator-sample {
  margin: 0;
  padding: clamp(1.05rem, 3vw, 1.6rem);
  border: 1px solid #cad7cd;
  border-radius: .9rem;
  background: #fff;
}
.sample-caption { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; }
.sample-caption span { font-size: .8rem; color: #435950; }
.sample-total { margin: .75rem 0 1.15rem; }
.sample-total strong { color: #162620; font-size: 1.8rem; line-height: 1; }
.sample-chart { list-style: none; padding: 0; margin: 0; }
.sample-chart li + li { margin-top: .75rem; }
.sample-chart li > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .5rem; font-size: .9rem; }
.sample-chart meter { display: block; width: 100%; height: .9rem; margin-top: .18rem; }
.sample-chart meter::-webkit-meter-bar { border: 0; border-radius: .25rem; background: #e6f3e6; }
.sample-chart meter::-webkit-meter-optimum-value { border-radius: .25rem; background: #276342; }
.sample-chart meter::-moz-meter-bar { border-radius: .25rem; background: #276342; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.feature-card { padding: 1.2rem; border: 1px solid #cad7cd; border-radius: .8rem; background: #fff; }
.feature-card p { margin-bottom: 0; }

@media (max-width: 760px) {
  .insights-inner, .feature-grid { grid-template-columns: 1fr; }
}