
:root{
  --green:#087a46; --green-dark:#055d36; --green-soft:#eaf6f0;
  --ink:#16211b; --muted:#5d6a63; --line:#dfe8e3; --paper:#fff; --bg:#f5f8f6;
  --shadow:0 18px 45px rgba(10,52,32,.09); --radius:22px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{color:inherit} img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.topbar{background:var(--green-dark);color:#fff;font-size:.92rem}
.topbar .container{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.topbar a{text-decoration:none}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(8,122,70,.10)}
.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none}.brand-mark{width:46px;height:46px;border-radius:14px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900;font-size:1.12rem;box-shadow:0 8px 20px rgba(8,122,70,.20)}
.brand-text strong{display:block;font-size:1.2rem;letter-spacing:-.02em}.brand-text span{display:block;font-size:.78rem;color:var(--muted)}
.unger-logo{width:170px;height:70px;object-fit:contain;object-position:center;display:block}
.nav{display:flex;align-items:center;gap:24px}.nav a{text-decoration:none;font-weight:650;font-size:.95rem}.nav .cta{background:var(--green);color:#fff;padding:12px 18px;border-radius:999px}
.hero{background:radial-gradient(circle at 9% 10%,rgba(8,122,70,.15),transparent 28%),linear-gradient(135deg,#f7fbf9 0%,#fff 52%,#eef7f2 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:start;padding:68px 0 62px}
.kicker{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #cfe8da;border-radius:999px;background:#fff;color:var(--green-dark);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
h1{font-size:clamp(2.35rem,4.7vw,4.45rem);line-height:.99;letter-spacing:-.05em;margin:22px 0;max-width:790px}
.hero p{font-size:1.14rem;color:var(--muted);max-width:690px;margin:0 0 30px}
.actions{display:flex;flex-wrap:wrap;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 21px;border-radius:999px;text-decoration:none;font-weight:800;border:1px solid transparent;transition:.2s ease}
.btn-primary{background:var(--green);color:#fff}.btn-primary:hover{background:var(--green-dark);transform:translateY(-1px)}.btn-secondary{background:#fff;border-color:var(--line)}.btn-secondary:hover{border-color:#abcdbb;transform:translateY(-1px)}
.hero-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;margin-top:0}
.hero-img{position:relative;border-radius:24px;overflow:hidden;height:468px;background:#edf3ef;box-shadow:var(--shadow)}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img:first-child{transform:none}
.hero-label{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:14px;padding:12px 14px;font-weight:800;font-size:.92rem}
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-item{padding:22px 20px;text-align:center;border-right:1px solid var(--line)}.trust-item:last-child{border-right:0}.trust-item strong{display:block;font-size:1.1rem}.trust-item span{font-size:.87rem;color:var(--muted)}
section{padding:82px 0}.section-head{max-width:760px;margin-bottom:34px}.eyebrow{color:var(--green);font-weight:850;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.05;letter-spacing:-.035em;margin:10px 0 15px}.section-head p{color:var(--muted);font-size:1.05rem;margin:0}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 8px 28px rgba(10,52,32,.04);display:flex;flex-direction:column;min-height:410px}
.card-media{height:210px;overflow:hidden;background:#eef3f0}.card-media img{width:100%;height:100%;object-fit:cover}.card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}.card h3{font-size:1.42rem;margin:0 0 10px;letter-spacing:-.02em}.card p{color:var(--muted);margin:0 0 20px}.card a{margin-top:auto;color:var(--green-dark);font-weight:850;text-decoration:none}.card a:hover{text-decoration:underline}

.card-media-contain{
  background:#f5f8f6;
}
.card-media-contain img{
  object-fit:contain !important;
  padding:10px 12px;
}
.card-media-altura{
  background:#eef3f0;
}
.card-media-hydropower{
  background:#eef3f0;
}
.save-media-contain{
  background:#f7faf8;
}
.save-media-contain img{
  object-fit:contain !important;
  padding:12px 16px;
}

.alt{background:var(--bg)}.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center}.panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:var(--shadow)}
.checks{list-style:none;padding:0;margin:24px 0 0}.checks li{position:relative;padding:10px 0 10px 34px;border-bottom:1px solid #edf2ef}.checks li:last-child{border-bottom:0}.checks li:before{content:"✓";position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-weight:900;font-size:.8rem}
.sat-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:30px;overflow:hidden;background:linear-gradient(135deg,var(--green-dark),var(--green));color:#fff}
.sat-img{min-height:420px}.sat-img img{width:100%;height:100%;object-fit:cover}.sat-copy{padding:42px}.sat-copy p{color:rgba(255,255,255,.86)}.sat-copy .btn-secondary{border-color:rgba(255,255,255,.35);background:#fff;color:var(--green-dark)}

.estalvi-section{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbf8 100%);
}
.save-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.save-card{
  border:1px solid var(--line);
  border-radius:28px;
  background:#fff;
  box-shadow:0 12px 32px rgba(10,52,32,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.save-card-kits{border-top:5px solid var(--green)}
.save-card-points{border-top:5px solid #d5a700}
.save-media{
  height:245px;
  overflow:hidden;
  background:#f4f7f5;
}
.save-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.save-media-points img{
  object-fit:contain;
  padding:12px;
  background:#f7fbf8;
}
.save-content{
  padding:28px 30px 30px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.save-pill{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:var(--green-soft);
  color:var(--green-dark);
  font-size:.78rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.save-card-points .save-pill{
  background:#fff6cf;
  color:#7a5b00;
}
.save-card h3{
  font-size:1.55rem;
  line-height:1.15;
  letter-spacing:-.025em;
  margin:20px 0 12px;
}
.save-card p{
  color:var(--muted);
  margin:0 0 24px;
}
.save-content .btn{margin-top:auto;align-self:flex-start}

.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:8px 16px 8px 8px;
  border-radius:999px;
  background:#ffffff;
  color:#124c2f;
  text-decoration:none;
  font-weight:850;
  box-shadow:0 12px 35px rgba(0,0,0,.20);
  border:1px solid rgba(37,211,102,.25);
}
.whatsapp-float img{
  width:42px;
  height:42px;
}
.whatsapp-float:hover{
  transform:translateY(-1px);
  box-shadow:0 15px 40px rgba(0,0,0,.24);
}
.footer{background:#0b2117;color:#d9e6df;padding:42px 0 24px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}.footer strong{color:#fff}.footer a{color:#d9e6df;text-decoration:none}.footer a:hover{text-decoration:underline}.footer small{display:block;color:#9fb2a7;margin-top:8px}.footer-bottom{border-top:1px solid rgba(255,255,255,.10);margin-top:30px;padding-top:20px;font-size:.84rem;color:#9fb2a7}.mobile-cta{display:none}
@media(max-width:900px){.nav a:not(.cta){display:none}.save-grid{grid-template-columns:1fr}.hero-grid,.split,.sat-wrap{grid-template-columns:1fr}.hero-pair{grid-template-columns:1fr 1fr}.hero-img{height:360px}.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-item:nth-child(2){border-right:0}.trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}.cards{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}
@media(max-width:560px){.container{width:min(100% - 24px,1180px)}.topbar .container{justify-content:center;text-align:center}.topbar .container span:last-child{display:none}.header-inner{min-height:72px}.brand-text span{display:none}.unger-logo{width:170px;height:70px;object-fit:contain;object-position:center;display:block}.nav{display:none}h1{font-size:2.55rem}.hero-grid{gap:30px;padding:42px 0 46px}.hero-pair{grid-template-columns:1fr}.hero-img:first-child{transform:none}.hero-img{height:310px}section{padding:62px 0}.sat-copy{padding:30px 24px}.mobile-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;box-shadow:0 14px 35px rgba(0,0,0,.22)}body{padding-bottom:92px}.whatsapp-float{right:12px;bottom:78px}.whatsapp-float span{display:none}.whatsapp-float{padding:8px}}


/* V8: maximize selected images inside their cards without cropping */
.card-media-altura,
.card-media-hydropower,
.save-media-contain{
  display:flex;
  align-items:center;
  justify-content:center;
}

.card-media-altura{
  height:auto !important;
  aspect-ratio: 1 / 1;
}
.card-media-altura img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center;
  padding:0 !important;
}

.card-media-hydropower{
  height:auto !important;
  aspect-ratio: 1050 / 420;
}
.card-media-hydropower img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center;
  padding:0 !important;
}

.save-media-contain{
  height:auto !important;
  aspect-ratio: 1 / 1;
}
.save-media-contain img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center;
  padding:0 !important;
}


/* V9 — Desktop alignment fixes only */
@media (min-width: 901px) {
  .cards{
    align-items:stretch;
  }

  .card{
    min-height:0;
    height:100%;
  }

  /* Same image area for all four cards = perfect row alignment */
  .card-media,
  .card-media-altura,
  .card-media-hydropower{
    width:100%;
    height:330px !important;
    aspect-ratio:auto !important;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f4f7f5;
    overflow:hidden;
  }

  .card-media img{
    width:100%;
    height:100%;
  }

  /* Classic / kits configuration can fill the media box */
  .card-media:not(.card-media-contain) img{
    object-fit:cover;
  }

  /* Height and HydroPower: maximum possible size, never cropped */
  .card-media-altura img,
  .card-media-hydropower img{
    object-fit:contain !important;
    object-position:center center !important;
    padding:0 !important;
  }

  /* Savings cards: same visual height and bigger kit image */
  .save-grid{
    align-items:stretch;
  }

  .save-card{
    height:100%;
  }

  .save-media{
    height:340px !important;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .save-media-contain img{
    width:100%;
    height:100%;
    object-fit:contain !important;
    object-position:center center !important;
    padding:0 !important;
  }

  .save-media-points img{
    width:100%;
    height:100%;
    object-fit:contain !important;
    padding:20px !important;
  }
}

/* V9 — Preserve compact mobile presentation */
@media (max-width: 900px) {
  .card-media,
  .card-media-altura,
  .card-media-hydropower{
    height:210px !important;
    aspect-ratio:auto !important;
  }

  .card-media-altura img,
  .card-media-hydropower img{
    width:100%;
    height:100%;
    object-fit:contain !important;
    padding:0 !important;
  }

  .save-media,
  .save-media-contain{
    height:245px !important;
    aspect-ratio:auto !important;
  }

  .save-media-contain img{
    width:100%;
    height:100%;
    object-fit:contain !important;
    padding:0 !important;
  }
}

/* V9 — Small WhatsApp bubble on mobile, lower-right */
@media (max-width: 560px) {
  .whatsapp-float{
    width:48px !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 !important;
    right:12px !important;
    bottom:76px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
  }

  .whatsapp-float img{
    width:42px !important;
    height:42px !important;
  }

  .whatsapp-float span{
    display:none !important;
  }
}


/* V11 — definitive desktop card alignment */
@media (min-width: 901px) {
  .cards{
    grid-auto-rows:1fr;
    align-items:stretch;
  }
  .card{
    height:100%;
    min-height:0;
  }
  .card-media,
  .card-media-altura,
  .card-media-hydropower{
    width:100%;
    height:315px !important;
    aspect-ratio:auto !important;
    background:#f4f7f5 !important;
    overflow:hidden;
    display:block !important;
  }
  .card-media img,
  .card-media-altura img,
  .card-media-hydropower img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    padding:0 !important;
    display:block;
  }

  .card-body{
    min-height:260px;
  }

  /* Savings cards: exactly the same visual image height */
  .save-grid{
    grid-auto-rows:1fr;
    align-items:stretch;
  }
  .save-card{
    height:100%;
  }
  .save-media,
  .save-media-contain,
  .save-media-points{
    width:100%;
    height:315px !important;
    aspect-ratio:auto !important;
    overflow:hidden;
    background:#f4f7f5;
  }
  .save-media img,
  .save-media-contain img,
  .save-media-points img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    padding:0 !important;
    display:block;
  }
}

/* Mobile stays as before; do not enlarge the floating WhatsApp control */
@media (max-width: 560px) {
  .whatsapp-float{
    width:46px !important;
    height:46px !important;
    min-height:46px !important;
    max-width:46px !important;
    padding:0 !important;
    right:12px !important;
    bottom:76px !important;
    border-radius:50% !important;
  }
  .whatsapp-float img{
    width:40px !important;
    height:40px !important;
  }
  .whatsapp-float span{
    display:none !important;
  }
}


/* V12 — images flush to card edges, no artificial background */
@media (min-width: 901px) {
  .cards .card-media,
  .cards .card-media-altura,
  .cards .card-media-hydropower{
    height:315px !important;
    background:transparent !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .cards .card-media img,
  .cards .card-media-altura img,
  .cards .card-media-hydropower img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
  }

  /* Keep the important part of the tall pole image inside the horizontal header */
  .cards .card-media-altura img{
    object-position:center 48% !important;
  }

  /* HydroPower is already panoramic; center it */
  .cards .card-media-hydropower img{
    object-position:center center !important;
  }
}


/* V16 — mobile bottom controls */
.mobile-cta{
  display:none !important;
}

@media (max-width: 560px) {
  body{
    padding-bottom:24px !important;
  }

  .whatsapp-float{
    position:fixed !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    min-height:46px !important;
    max-height:46px !important;
    right:12px !important;
    left:auto !important;
    bottom:12px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    z-index:999 !important;
  }

  .whatsapp-float img{
    width:40px !important;
    height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    object-fit:contain !important;
    margin:0 !important;
  }

  .whatsapp-float span{
    display:none !important;
  }
}
