/* ===== ProtectoDiesel · Landing ===== */
:root{
  --pd-green:#0e6e2d;
  --pd-green-dark:#0a4f20;
  --pd-green-light:#16a34a;
  --pd-ink:#1f2733;
  --pd-muted:#5b6572;
  --pd-bg:#ffffff;
  --pd-bg-soft:#f4f7f4;
  --pd-bg-green:#eaf4ec;
  --pd-line:#e2e8e4;
  --pd-danger:#c0392b;
  --pd-shadow:0 10px 30px rgba(15,40,20,.10);
}

*{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--pd-ink);
  background:var(--pd-bg);
  line-height:1.6;
}
h1,h2,h3,h4,.display-5,.display-6{font-weight:800;letter-spacing:-.01em}
section{scroll-margin-top:80px}
.section-pad{padding:5rem 0}
.text-muted-pd{color:var(--pd-muted)!important}
.bg-soft{background:var(--pd-bg-soft)}
.bg-green-soft{background:var(--pd-bg-green)}
a{color:var(--pd-green)}
.lead-tight{font-size:1.12rem;color:var(--pd-muted)}

.kicker{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pd-green);background:var(--pd-bg-green);
  padding:.35rem .8rem;border-radius:100px;margin-bottom:1rem;
}

/* ===== Buttons ===== */
.btn-pd{
  background:var(--pd-green);border-color:var(--pd-green);color:#fff;font-weight:700;
  padding:.7rem 1.5rem;border-radius:10px;transition:.2s;
}
.btn-pd:hover{background:var(--pd-green-dark);border-color:var(--pd-green-dark);color:#fff;transform:translateY(-1px)}
.btn-outline-pd{
  border:2px solid var(--pd-green);color:var(--pd-green);font-weight:700;
  padding:.62rem 1.4rem;border-radius:10px;background:transparent;
}
.btn-outline-pd:hover{background:var(--pd-green);color:#fff}
.btn-wa{background:#25d366;border-color:#25d366;color:#0a3d1c;font-weight:700}
.btn-wa:hover{background:#1eb955;border-color:#1eb955;color:#0a3d1c}

/* ===== Navbar ===== */
.navbar-pd{background:var(--pd-green);transition:.25s;padding:.85rem 0}
.navbar-pd.scrolled{padding:.5rem 0;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.navbar-pd .navbar-brand img{height:26px}
.navbar-pd .nav-link{color:rgba(255,255,255,.88)!important;font-weight:600;font-size:.95rem}
.navbar-pd .nav-link:hover,.navbar-pd .nav-link.active{color:#fff!important}
.navbar-pd .navbar-toggler{border-color:rgba(255,255,255,.5)}
.navbar-pd .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

/* ===== Hero ===== */
.hero{
  position:relative;color:#fff;padding:8rem 0 5rem;
  background:linear-gradient(180deg,rgba(8,50,22,.86),rgba(8,50,22,.78)),
             url("../img/instalacion-tanque.jpg") center/cover no-repeat;
}
.hero h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12}
.hero .lead{color:rgba(255,255,255,.9);font-size:1.15rem;max-width:620px}
.hero-trust{font-size:.9rem;color:rgba(255,255,255,.8)}
.hero-trust span{white-space:nowrap}

/* ===== Stat band ===== */
.stat-band{background:var(--pd-green-dark);color:#fff}
.stat-band .stat-num{font-size:2rem;font-weight:800;line-height:1}
.stat-band .stat-lbl{font-size:.85rem;color:rgba(255,255,255,.78)}

/* ===== Cards ===== */
.card-pd{
  border:1px solid var(--pd-line);border-radius:16px;background:#fff;
  box-shadow:var(--pd-shadow);height:100%;transition:.2s;overflow:hidden;
}
.card-pd:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,40,20,.16)}
.prod-media{
  background:var(--pd-bg-soft);height:200px;display:flex;align-items:center;justify-content:center;padding:1rem;
}
.prod-media img{max-height:100%;max-width:100%;object-fit:contain}
.badge-top{background:var(--pd-green-light);color:#fff;font-weight:700;letter-spacing:.03em}
.prod-list{list-style:none;padding:0;margin:0}
.prod-list li{position:relative;padding-left:1.5rem;margin-bottom:.4rem;font-size:.94rem}
.prod-list li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;background:var(--pd-green-light);border-radius:2px}

/* ===== Feature icons ===== */
.feature-ico{
  width:52px;height:52px;border-radius:12px;background:var(--pd-bg-green);color:var(--pd-green);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:0 0 auto;
}

/* ===== Comparison table ===== */
.cmp-wrap{overflow-x:auto;border-radius:16px;box-shadow:var(--pd-shadow)}
table.cmp{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;background:#fff}
table.cmp th,table.cmp td{padding:.9rem 1rem;text-align:center;border-bottom:1px solid var(--pd-line);font-size:.92rem;vertical-align:middle}
table.cmp thead th{background:var(--pd-ink);color:#fff;font-weight:700;position:sticky;top:0}
table.cmp tbody th{text-align:left;font-weight:600;color:var(--pd-ink);background:var(--pd-bg-soft);min-width:220px}
table.cmp .col-pd{background:var(--pd-bg-green);font-weight:700}
table.cmp thead .col-pd{background:var(--pd-green);color:#fff}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:0}
.ic-yes{color:var(--pd-green-light);font-weight:800}
.ic-no{color:var(--pd-danger);font-weight:800}
.ic-mid{color:#c98a00;font-weight:800}
.cmp-note{font-size:.9rem;color:var(--pd-muted)}

/* ===== Calculator ===== */
.calc-card{background:#fff;border-radius:18px;box-shadow:var(--pd-shadow);border:1px solid var(--pd-line)}
.calc-out{background:var(--pd-green);color:#fff;border-radius:14px}
.calc-out .n{font-size:1.7rem;font-weight:800;line-height:1.1}
.calc-out .l{font-size:.82rem;color:rgba(255,255,255,.82)}
.form-range::-webkit-slider-thumb{background:var(--pd-green)}
.form-range::-moz-range-thumb{background:var(--pd-green)}

/* ===== Losses table ===== */
.loss-table th{background:var(--pd-green);color:#fff}
.loss-table tbody tr:nth-child(odd){background:var(--pd-bg-green)}
.loss-table td,.loss-table th{text-align:center}
.loss-table td:first-child,.loss-table th:first-child{text-align:left;font-weight:600}

/* ===== Coverage ===== */
.map-box img{max-width:100%;filter:drop-shadow(0 8px 20px rgba(15,40,20,.15))}

/* ===== Diagram ===== */
.diagram-box{background:#fff;border:1px solid var(--pd-line);border-radius:16px;padding:1rem;box-shadow:var(--pd-shadow)}
.diagram-box img{width:100%;border-radius:10px}

/* ===== Accordion ===== */
.accordion-button:not(.collapsed){background:var(--pd-bg-green);color:var(--pd-green-dark);box-shadow:none}
.accordion-button:focus{box-shadow:none;border-color:var(--pd-line)}
.accordion-item{border:1px solid var(--pd-line);border-radius:12px!important;margin-bottom:.6rem;overflow:hidden}

/* ===== Contact ===== */
.contact-band{background:var(--pd-green);color:#fff}
.contact-band a{color:#fff;text-decoration:underline}
.contact-card{background:#fff;border-radius:18px;box-shadow:var(--pd-shadow)}

/* ===== Social links ===== */
.social-links{display:flex;flex-wrap:wrap;gap:.6rem}
.social-links a{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--pd-bg-green);color:var(--pd-green);transition:.2s;flex:0 0 auto;
}
.social-links a:hover{background:var(--pd-green);color:#fff;transform:translateY(-2px)}
.social-links svg{width:20px;height:20px;fill:currentColor}
.footer-pd .social-links a{background:rgba(255,255,255,.1);color:#fff}
.footer-pd .social-links a:hover{background:var(--pd-green-light);color:#fff}

/* ===== Footer ===== */
.footer-pd{background:var(--pd-ink);color:rgba(255,255,255,.72);font-size:.9rem}
.footer-pd a{color:rgba(255,255,255,.72);text-decoration:none}
.footer-pd a:hover{color:#fff}
.footer-pd img{height:24px}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ===== Badge seal ===== */
.seal-img{max-width:150px}
@media (max-width:575px){
  .section-pad{padding:3.5rem 0}
  .hero{padding:6.5rem 0 3.5rem}
  .stat-band .stat-num{font-size:1.5rem}
}
