/* =========================================================
   ESG — PROJETO DOAÇÃO (Mission Control / NASA vibe)
   - Usa site.css como base (navbar, botões, tipografia)
   - Aqui é só o "skin" + layout exclusivo
   ========================================================= */

:root{
  --pd-bg: #0A0E16;
  --pd-1: rgba(255,255,255,.06);
  --pd-2: rgba(255,255,255,.10);
  --pd-text: rgba(240,244,255,.96);
  --pd-muted: rgba(184,196,224,.86);

  --pd-blue: rgba(0,102,255,.95);
  --pd-cyan: rgba(0,212,170,.95);
  --pd-orange: rgba(255,107,53,.95);
  --pd-green: rgba(0,212,100,.95);
  --pd-purple: rgba(180,80,255,.95);

  --pd-radius-xl: 26px;
  --pd-radius-lg: 18px;
  --pd-radius-md: 12px;
  --pd-shadow: 0 18px 50px rgba(0,0,0,.45);
  --pd-glow: 0 0 42px rgba(0,212,170,.12);
  --pd-glow-green: 0 0 42px rgba(0,212,100,.12);
  --pd-glow-purple: 0 0 42px rgba(180,80,255,.12);
}

.pd-body{
  background: var(--pd-bg);
}

/* container local */
.pd-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px 22px 64px;
}

/* breadcrumb */
.pd-breadcrumb{
  display:flex;
  gap:10px;
  align-items:center;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 14px;
}
.pd-breadcrumb a{ color: rgba(255,255,255,.75); text-decoration:none; }
.pd-breadcrumb a:hover{ text-decoration:underline; color: rgba(255,255,255,.92); }
.pd-breadcrumb .sep{ opacity:.45; }

/* HERO */
.pd-hero{
  border: 1px solid var(--pd-2);
  border-radius: var(--pd-radius-xl);
  background:
    radial-gradient(920px 420px at 15% 15%, rgba(0,102,255,.18), transparent 60%),
    radial-gradient(780px 420px at 85% 10%, rgba(0,212,170,.14), transparent 55%),
    radial-gradient(680px 380px at 70% 90%, rgba(255,107,53,.09), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: var(--pd-shadow);
  overflow: hidden;
  position: relative;
}

.pd-hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  padding: 24px;
  align-items: start;
}

.pd-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(0,212,170,.95);
  margin-bottom: 10px;
}
.pd-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(0,212,170,.95);
  box-shadow: 0 0 18px rgba(0,212,170,.55);
}

.pd-title{
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.06;
  margin: 0 0 12px;
  color: var(--pd-text);
  letter-spacing: -0.02em;
}
.pd-title-accent{
  background: linear-gradient(90deg, rgba(0,212,170,.95), rgba(0,102,255,.95));
  -webkit-background-clip:text; -webkit-text-fill-color: transparent;
}

.pd-lead{
  margin: 0 0 16px;
  color: var(--pd-muted);
  font-size: 16px;
  line-height: 1.58;
  max-width: 70ch;
}

.pd-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.pd-chip{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(240,244,255,.88);
  font-size: 12.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pd-chip b{ color: rgba(255,255,255,.95); }

.pd-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pd-actions .btn{ min-width: 240px; }

.pd-mission-note{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--pd-radius-lg);
  padding: 12px 12px 12px;
  background: rgba(10,14,22,.35);
  backdrop-filter: blur(10px);
}
.pd-mission-badge{
  display:inline-block;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
  margin-bottom: 8px;
}
.pd-mission-note p{
  margin:0;
  color: rgba(184,196,224,.86);
  font-size: 13px;
  line-height: 1.5;
}

/* Telemetry card */
.pd-telemetry{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--pd-radius-xl);
  background: rgba(10,14,22,.60);
  backdrop-filter: blur(12px);
  box-shadow: var(--pd-glow);
  padding: 14px;
}

.pd-telemetry-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 10px;
}
.pd-telemetry-title{
  font-weight: 900;
  color: rgba(240,244,255,.95);
  letter-spacing: -0.01em;
}
.pd-telemetry-sub{
  font-size: 12px;
  color: rgba(184,196,224,.78);
  margin-top: 2px;
}

.pd-signal{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(0,212,170,.95);
  border: 1px solid rgba(0,212,170,.18);
  background: rgba(0,212,170,.06);
  padding: 7px 10px;
  border-radius: 999px;
}
.pd-signal-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(0,212,170,.95);
  box-shadow: 0 0 16px rgba(0,212,170,.55);
}

/* Metrics grid */
.pd-metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 10px;
}
.pd-metric{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pd-metric .k{
  font-size: 11px;
  color: rgba(255,255,255,.62);
  letter-spacing:.06em;
  text-transform: uppercase;
}
.pd-metric .v{
  margin-top: 7px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, rgba(0,212,170,.95), rgba(0,102,255,.95));
  -webkit-background-clip:text; -webkit-text-fill-color: transparent;
  display:flex;
  align-items: baseline;
  gap: 8px;
}
.pd-metric .arrow{ opacity:.75; -webkit-text-fill-color: rgba(255,255,255,.55); }
.pd-metric .s{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  margin-top: 3px;
}

/* Calc */
.pd-calc{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.pd-calc label{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  margin-bottom: 8px;
}
.pd-calc input[type="range"]{ width:100%; }
.pd-range-row{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}
.pd-range-row b{
  font-size: 14px;
  color: rgba(255,255,255,.92);
}

.pd-mini{
  margin-top: 10px;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.02);
}
.pd-mini-k{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 4px;
}
.pd-mini-v{
  font-size: 12.5px;
  color: rgba(184,196,224,.88);
  line-height: 1.4;
}

/* Telemetry actions */
.pd-telemetry-actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pd-telemetry-actions .btn{ flex: 1; min-width: 220px; }

.pd-telemetry-foot{
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 10px;
}
.pd-foot-line{
  display:flex;
  gap: 10px;
  align-items:center;
  font-size: 12px;
  color: rgba(184,196,224,.85);
}
.tag{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
}

/* Sections */
.pd-section{
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--pd-radius-xl);
  background: rgba(255,255,255,.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
}
.pd-section-h{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.pd-section-h h2{
  margin:0;
  font-size: 16px;
  letter-spacing: .01em;
}
.pd-section-sub{
  font-size: 12px;
  color: rgba(255,255,255,.60);
}
.pd-section-b{
  padding: 18px;
}

.pd-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pd-grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Cards Especializados */
.pd-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(10,14,22,.35);
  padding: 14px;
}
.pd-card h3{
  margin:0 0 8px;
  font-size: 15px;
}
.pd-card p{
  margin:0 0 10px;
  color: rgba(184,196,224,.88);
  line-height: 1.55;
}

.pd-card-social{
  border: 1px solid rgba(0,212,100,.20);
  background: rgba(0,212,100,.04);
  box-shadow: var(--pd-glow-green);
}
.pd-social-header{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 12px;
}
.pd-social-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0,212,100,.12);
  border: 1px solid rgba(0,212,100,.25);
  display:grid;
  place-items:center;
  font-size: 22px;
}

.pd-social-icon img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0,212,170,.45));
}


.pd-social-location{
  font-size: 12px;
  color: rgba(0,212,100,.95);
  font-weight: 600;
  margin-top: 2px;
}
.pd-social-stats{
  display:flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pd-stat{
  text-align:center;
}
.pd-stat-value{
  font-size: 18px;
  font-weight: 900;
  color: rgba(0,212,100,.95);
}
.pd-stat-label{
  font-size: 11px;
  color: rgba(255,255,255,.70);
  margin-top: 4px;
}

.pd-esg-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(10,14,22,.35);
  padding: 14px;
  text-align:center;
}
.pd-esg-icon{
  font-size: 32px;
  margin-bottom: 10px;
}

.pd-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(240,244,255,.86);
}
.pd-list li{ margin: 8px 0; color: rgba(240,244,255,.86); }

/* Tabela Comparativa */
.pd-comparison-table{
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--pd-radius-lg);
  overflow: hidden;
  background: rgba(10,14,22,.35);
}
.pd-comparison-table h4{
  margin:0;
  padding: 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15px;
}
.pd-comparison-table table{
  width:100%;
  border-collapse: collapse;
}
.pd-comparison-table th{
  padding: 12px 14px;
  text-align:left;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pd-comparison-table td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: rgba(240,244,255,.88);
}
.pd-comparison-table tr:last-child td{
  border-bottom: none;
}
.pd-positive{
  color: rgba(0,212,100,.95) !important;
  font-weight: 600;
}

.pd-callout{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border: 1px solid rgba(0,212,170,.18);
  background: rgba(0,212,170,.06);
  border-radius: 18px;
  padding: 12px;
}
.pd-callout-ico{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(0,212,170,.95);
  border: 1px solid rgba(0,212,170,.22);
  background: rgba(0,212,170,.08);
  box-shadow: 0 0 24px rgba(0,212,170,.14);
}
.pd-callout-txt{
  color: rgba(240,244,255,.90);
  line-height: 1.55;
}

/* Timeline */
.pd-timeline{
  display:grid;
  gap: 12px;
}
.pd-step{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(10,14,22,.28);
  padding: 12px;
}
.pd-step-n{
  width: 56px; height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(70px 70px at 30% 30%, rgba(0,102,255,.28), transparent 60%),
    radial-gradient(60px 60px at 80% 20%, rgba(0,212,170,.22), transparent 60%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}
.pd-step-c h3{
  margin: 0 0 6px;
  font-size: 15px;
}
.pd-step-c p{
  margin: 0 0 10px;
  color: rgba(184,196,224,.88);
  line-height: 1.55;
}

.pd-pillset{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(240,244,255,.88);
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Circular Flow */
.pd-circular-flow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.pd-flow-step{
  flex:1;
  min-width: 120px;
  text-align:center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--pd-radius-md);
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.pd-flow-number{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,212,170,.15);
  color: rgba(0,212,170,.95);
  display:grid;
  place-items:center;
  font-weight: 900;
  margin: 0 auto 8px;
  border: 1px solid rgba(0,212,170,.25);
}
.pd-flow-step h4{
  margin: 0 0 6px;
  font-size: 13px;
}
.pd-flow-step p{
  margin:0;
  font-size: 11px;
  color: rgba(184,196,224,.80);
  line-height: 1.4;
}
.pd-flow-arrow{
  color: rgba(0,212,170,.60);
  font-weight: 900;
}

/* Certifications */
.pd-certifications{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.pd-cert-badge{
  display:flex;
  gap: 8px;
  align-items:center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.02);
}
.pd-cert-icon{
  font-size: 16px;
}
.pd-cert-text{
  font-size: 12px;
  color: rgba(240,244,255,.88);
}

/* Final CTA */
.pd-final{
  margin-top: 18px;
}
.pd-final-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--pd-radius-xl);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(0,102,255,.16), transparent 55%),
    radial-gradient(680px 380px at 95% 30%, rgba(0,212,170,.14), transparent 55%),
    rgba(255,255,255,.02);
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
  padding: 18px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.pd-final-kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(0,212,170,.90);
  margin-bottom: 8px;
}
.pd-final-title{
  margin:0 0 10px;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.pd-final-sub{
  margin:0;
  color: rgba(184,196,224,.88);
  line-height: 1.6;
  max-width: 70ch;
}
.pd-final-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pd-final-chip{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,212,170,.08);
  border: 1px solid rgba(0,212,170,.18);
  color: rgba(0,212,170,.95);
  font-size: 12px;
  font-weight: 500;
}
.pd-final-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pd-final-actions .btn{ min-width: 240px; }

/* Footer */
.pd-footer{
  margin-top: 18px;
  padding: 10px 4px 2px;
  color: rgba(184,196,224,.70);
  font-size: 12.5px;
}
.pd-footer-inner{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.pd-sep{ opacity:.45; }

/* Mobile actions area in mobile menu */
.pd-mobile-actions{
  margin-top: 14px;
}

/* Reveal (intersec observer) */
.pd-reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.pd-reveal.on{
  opacity: 1;
  transform: translateY(0);
}

/* ===== MELHORIAS VISUAIS AVANÇADAS ===== */

/* Efeitos de profundidade e brilho */
.pd-mission-phase {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-mission-phase:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 0 60px rgba(0,212,170,0.1);
}

.pd-phase-header {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.02) 0%,
    rgba(255,255,255,.05) 50%,
    rgba(255,255,255,.02) 100%
  );
  position: relative;
  overflow: hidden;
}

.pd-phase-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.05) 50%,
    transparent 100%
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

.pd-phase-number {
  background: linear-gradient(135deg, 
    rgba(255,255,255,.2) 0%, 
    rgba(255,255,255,.05) 100%);
  box-shadow: 
    0 8px 24px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 20px rgba(0,212,170,0.2);
  position: relative;
  overflow: hidden;
}

.pd-phase-number::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent,
    rgba(255,255,255,0.1),
    transparent 30%
  );
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.pd-phase-metric {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,.01) 100%
  );
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.3s ease;
}

.pd-phase-metric:hover {
  transform: translateY(-2px);
  border-color: rgba(0,212,170,0.3);
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 30px rgba(0,212,170,0.1);
}

.pd-tech-pill {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.02) 100%
  );
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.pd-tech-pill:hover {
  transform: scale(1.05);
  border-color: rgba(0,212,170,0.4);
  background: linear-gradient(
    135deg,
    rgba(0,212,170,.1) 0%,
    rgba(0,212,170,.05) 100%
  );
  box-shadow: 0 4px 12px rgba(0,212,170,0.2);
}

.pd-phase-insight {
  background: linear-gradient(
    90deg,
    rgba(0,212,170,.08) 0%,
    rgba(0,212,170,.04) 100%
  );
  border: 1px solid rgba(0,212,170,.2);
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

.pd-phase-insight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0,212,170,0.8),
    rgba(0,102,255,0.8)
  );
}

.pd-visual-map {
  background: 
    radial-gradient(circle at 30% 60%, rgba(0,212,170,.15), transparent 50%),
    radial-gradient(circle at 45% 40%, rgba(255,107,53,.15), transparent 50%),
    linear-gradient(135deg, rgba(10,14,22,.4) 0%, rgba(10,14,22,.6) 100%);
  border: 1px solid rgba(255,255,255,.1);
  position: relative;
}

.pd-visual-map::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 60%, transparent 30%, rgba(0,212,170,.05) 70%),
    radial-gradient(circle at 45% 40%, transparent 30%, rgba(255,107,53,.05) 70%);
  pointer-events: none;
}

.pd-map-label {
  background: linear-gradient(
    135deg,
    rgba(10,14,22,.95) 0%,
    rgba(20,25,35,.95) 100%
  );
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}

.pd-map-label:hover {
  transform: scale(1.05);
  border-color: rgba(0,212,170,0.5);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.pd-flow-step {
  background: linear-gradient(
    135deg,
    rgba(0,212,170,.15) 0%,
    rgba(0,212,170,.05) 100%
  );
  border: 1px solid rgba(0,212,170,.3);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.pd-flow-step:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,212,170,0.2);
}

.pd-flow-step:nth-child(2) {
  background: linear-gradient(
    135deg,
    rgba(0,102,255,.15) 0%,
    rgba(0,102,255,.05) 100%
  );
  border-color: rgba(0,102,255,.3);
}

.pd-flow-step:nth-child(2):hover {
  box-shadow: 0 8px 20px rgba(0,102,255,0.2);
}

.pd-flow-step:nth-child(4) {
  background: linear-gradient(
    135deg,
    rgba(180,80,255,.15) 0%,
    rgba(180,80,255,.05) 100%
  );
  border-color: rgba(180,80,255,.3);
}

.pd-flow-step:nth-child(4):hover {
  box-shadow: 0 8px 20px rgba(180,80,255,0.2);
}

.pd-flow-step:nth-child(6) {
  background: linear-gradient(
    135deg,
    rgba(255,107,53,.15) 0%,
    rgba(255,107,53,.05) 100%
  );
  border-color: rgba(255,107,53,.3);
}

.pd-flow-step:nth-child(6):hover {
  box-shadow: 0 8px 20px rgba(255,107,53,0.2);
}

.pd-flow-step:nth-child(8) {
  background: linear-gradient(
    135deg,
    rgba(0,212,100,.15) 0%,
    rgba(0,212,100,.05) 100%
  );
  border-color: rgba(0,212,100,.3);
}

.pd-flow-step:nth-child(8):hover {
  box-shadow: 0 8px 20px rgba(0,212,100,0.2);
}

.pd-summary-card {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.01) 100%
  );
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-summary-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0,212,170,0.3);
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.3),
    0 0 60px rgba(0,212,170,0.15);
}

.pd-summary-icon {
  transition: all 0.3s ease;
}

.pd-summary-card:hover .pd-summary-icon {
  transform: scale(1.2) rotate(5deg);
  box-shadow: 0 0 30px currentColor;
}

/* Efeitos de brilho sutil */
.pd-mission-phase::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at top right,
    rgba(0,212,170,0.03) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* Garantir que o conteúdo fique acima dos efeitos */
.pd-phase-header,
.pd-phase-content {
  position: relative;
  z-index: 1;
}


@media (max-width: 768px) {
  .pd-phase-header {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  
  .pd-phase-number {
    margin: 0 auto;
  }
  
  .pd-phase-status {
    align-items: center;
  }
  
  .pd-phase-grid {
    grid-template-columns: 1fr;
  }
  
  .pd-flow-animation {
    flex-direction: column;
    gap: 12px;
  }
  
  .pd-flow-arrow {
    transform: rotate(90deg);
  }
  
  .pd-mission-summary {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 768px) {
  /* Adaptações para o Mission Control Dashboard */
  .pd-phase-header {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  
  .pd-phase-number {
    margin: 0 auto;
  }
  
  .pd-phase-status {
    align-items: center;
  }
  
  .pd-phase-grid {
    grid-template-columns: 1fr;
  }
  
  .pd-flow-animation {
    flex-direction: column;
    gap: 12px;
  }
  
  .pd-flow-arrow {
    transform: rotate(90deg);
  }
  
  .pd-mission-summary {
    grid-template-columns: 1fr;
  }
  
  /* Adaptações para as melhorias visuais */
  .pd-mission-phase:hover {
    transform: translateY(-2px);
  }
  
  .pd-phase-header::after {
    animation: shimmer-mobile 4s infinite;
  }
  
  @keyframes shimmer-mobile {
    0% { left: -100%; }
    100% { left: 300%; }
  }
  
  .pd-phase-number::before {
    display: none; /* Desativa animação pesada em mobile */
  }
  
  .pd-summary-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
  
  .pd-tech-pill {
    font-size: 12px;
    padding: 8px 12px;
  }
  
  .pd-phase-insight {
    padding: 12px;
    flex-direction: column;
    text-align: center;
  }
  
  .pd-insight-icon {
    margin-bottom: 8px;
  }
}


/* Metodologia de cálculo — texto ocupando todo o card */
.pd-section .pd-lead{
  max-width: 100%;
  text-align: justify;
}


/* CTA FINAL — centralização total (texto + chips + botões) */
.pd-final-card{
  text-align: center;
}

.pd-final-left{
  margin: 0 auto;
}

.pd-final-left h2,
.pd-final-left p{
  text-align: center;
}

.pd-final-left .pd-final-kicker{
  justify-content: center;
}

.pd-final-actions{
  justify-content: center;
}

.pd-final-actions .btn{
  min-width: 220px;
}


/* CTA FINAL — ocupar todo o container e centralizar conteúdo */
.pd-final-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pd-final-left{
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}
.pd-final-left h2,
.pd-final-left p{
  max-width: 900px; /* controla leitura sem criar vazio */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.pd-final-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.pd-final-actions .btn{
  min-width: 240px;
}

/* ============================
   OVERRIDES (SEM RETROAGIR)
   - Centraliza pills do CTA final
   - Centraliza texto da metodologia de cálculo
   ============================ */

/* Pills do CTA final (Forvia & Lear etc.) */
.pd-final-chips{
  justify-content: center;
  width: 100%;
}

/* Metodologia de cálculo — centralizar texto no card */
.pd-section .pd-lead{
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* Remover CTA e rodapé da telemetria */
.pd-telemetry-actions,
.pd-telemetry-foot{
  display: none;
}


/* ===============================
   DOAÇÃO — MOBILE LAYOUT FIX
   Telemetria embaixo do hero + botões responsivos
   =============================== */
@media (max-width: 900px){

  /* respiro correto abaixo do navbar */
  .pd-wrap{
    padding: 96px 16px 56px;
  }

  /* hero não pode “cortar” nada no mobile */
  .pd-hero{
    overflow: visible;
  }

  /* 1 coluna no mobile (telemetria vai naturalmente para baixo) */
  .pd-hero-grid{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  /* botões não podem forçar largura */
  .pd-actions .btn{
    min-width: 100%;
  }

  /* telemetria ocupa 100% */
  .pd-telemetry{
    width: 100%;
  }

  /* métricas em 1 coluna (para não esmagar) */
  .pd-metrics{
    grid-template-columns: 1fr;
  }

  /* ações da telemetria em 1 coluna */
  .pd-telemetry-actions .btn{
    min-width: 100%;
  }
}


/* ===============================
   DOAÇÃO — MOBILE LAYOUT FIX
   Telemetria embaixo do hero + botões responsivos
   =============================== */
@media (max-width: 900px){

  /* respiro correto abaixo do navbar */
  .pd-wrap{
    padding: 96px 16px 56px;
  }

  /* hero não pode “cortar” nada no mobile */
  .pd-hero{
    overflow: visible;
  }

  /* 1 coluna no mobile (telemetria vai naturalmente para baixo) */
  .pd-hero-grid{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  /* botões não podem forçar largura */
  .pd-actions .btn{
    min-width: 100%;
  }

  /* telemetria ocupa 100% */
  .pd-telemetry{
    width: 100%;
  }

  /* métricas em 1 coluna (para não esmagar) */
  .pd-metrics{
    grid-template-columns: 1fr;
  }

  /* ações da telemetria em 1 coluna */
  .pd-telemetry-actions .btn{
    min-width: 100%;
  }
}


/* ===============================
   DOAÇÃO — MOBILE FIX GLOBAL (SEÇÕES CORTADAS)
   Corrige grids (2 e 3 colunas) para 1 coluna no mobile
   =============================== */
@media (max-width: 900px){

  /* Evita qualquer overflow horizontal em seções */
  html, body{
    overflow-x: hidden;
  }

  /* Qualquer grid multi-coluna vira 1 coluna no mobile */
  .pd-grid-2,
  .pd-grid-3{
    grid-template-columns: 1fr !important;
  }

  /* Dá um respiro melhor nas seções */
  .pd-section-b{
    padding: 14px !important;
  }

  /* Cards ocupam 100% e não estouram */
  .pd-card,
  .pd-esg-card{
    width: 100%;
    max-width: 100%;
  }

  /* Header do card social quebra linha se precisar (evita corte) */
  .pd-social-header{
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Garante que textos longos não empurrem a tela */
  .pd-card p,
  .pd-list,
  .pd-social-meta{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* =========================================
   DOAÇÃO — MOBILE FIX (SEÇÕES CORTADAS)
   - Impacto Social Dual (pd-grid-2)
   - Benefícios ESG Quantificados (pd-grid-3)
   - Antes vs Depois (tabela comparativa)
   ========================================= */
@media (max-width: 900px){

  /* 0) Zera qualquer “vazamento” lateral */
  html, body{ overflow-x: hidden !important; }

  /* 1) Qualquer grid multi-coluna vira 1 coluna */
  .pd-grid-2,
  .pd-grid-3{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 2) Garante que cards ocupem 100% e não “empurrem” para fora */
  .pd-card,
  .pd-esg-card,
  .pd-card-social{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3) Impacto Social Dual: header do card não pode “estourar” */
  .pd-social-header{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  /* 4) Benefícios ESG Quantificados: se houver listas grandes */
  .pd-list{
    padding-left: 18px !important;
  }

  /* 5) Antes vs Depois — Transformação Mensurável (TABELA)
        Hoje ela corta porque .pd-comparison-table tem overflow:hidden
        No mobile: permitir rolagem horizontal (sem quebrar layout) */
  .pd-comparison-table{
    overflow: visible !important;     /* libera o corte */
  }

  .pd-comparison-table table{
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;       /* rolagem horizontal */
    -webkit-overflow-scrolling: touch; /* inércia iOS */
    white-space: nowrap !important;    /* evita quebrar e ficar ilegível */
  }

  /* 6) Deixa colunas com largura mínima para leitura */
  .pd-comparison-table th,
  .pd-comparison-table td{
    min-width: 140px !important;
  }

  /* primeira coluna (Indicador) um pouco maior */
  .pd-comparison-table th:first-child,
  .pd-comparison-table td:first-child{
    min-width: 170px !important;
  }
}

/* =========================================
   MOBILE — Hint animado “← deslize →” na tabela (Antes x Depois)
   Aparece somente no mobile
   ========================================= */
@media (max-width: 900px){

  .pd-comparison-table{
    position: relative;
  }

  .pd-comparison-table::before{
    content: "← deslize →";
    position: absolute;
    top: -30px;
    right: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--brand-primary);
    letter-spacing: .06em;
    opacity: .85;
    animation: slideHint 1.6s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes slideHint{
    0%,100%{ transform: translateX(0); opacity: .55; }
    50%{ transform: translateX(-8px); opacity: 1; }
  }
}