:root{
  --green-900:#004e3b;
  --green-700:#00704f;
  --green-600:#0a8a63;
  --cream:#e6efdf;
  --accent:#15a05b;
  --muted:#0e4a3a;
  --glass: rgba(255,255,255,0.06);
  --max-width:980px;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{min-height:100%}
body{
  /* extreme page background: desert collage with a subtle green tint and low contrast */
  background:
    linear-gradient(0deg, rgba(6,56,42,0.55), rgba(6,56,42,0.55)),
    url('caa.jpg') center/cover no-repeat;
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  align-items:flex-start; /* allow page to grow and scroll vertically */
  justify-content:center;
  padding:18px;
}

.page{
  width:100%;
  max-width:var(--max-width);
  background:linear-gradient(180deg, rgba(0,0,0,0.06), transparent);
  border-radius:8px;
  overflow:hidden;
  box-shadow: 0 6px 30px rgba(0,0,0,0.4);
}

/* HERO */
.hero{
  position:relative;
  background:linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15)), url('0101010101') center/cover no-repeat;
  min-height:60vh; /* flexible hero height so different resolutions can scroll */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  padding:24px 20px 36px;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.2));
  pointer-events:none;
}

.hero-inner{
  position:relative;
  /* match the hero background image size: use the same percentage as the desktop background-size */
  width:60%;
  max-width:820px;
  aspect-ratio:1 / 1; /* force a square */
  z-index:2;
  transform:translateY(-10px); /* reduce overall lift so we can lift only the text block */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:12px; /* keep inner spacing for text and CTA */
  box-sizing:border-box;
}

.logo{
  display:block;
  width:60vmin;
  max-width:420px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,0.55)) saturate(0.9);
  /* lift the logo only: add a negative translateY and increase negative top margin */
  margin:-22px auto -8px;
  transform:translateY(-18px);
  position:relative;
  z-index:4;
  border-radius:0;
  background:transparent;
  padding:0;
}

/* lift only the text block so it's centered between logo and CTA */
.text-block{
  margin-top:-40px; /* moved the text lower so it sits further down between the logo and CTA */
  margin-bottom:6px;
  position:relative;
  z-index:3;
}

/* text */
.lead{
  margin:6px 0;
  color:var(--cream);
  opacity:0.95;
  line-height:1.5;
  font-size:19px;
  font-weight:700;
}

.lead.small{font-size:16px;opacity:0.9}

/* CTA */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  margin-top:48px; /* moved CTA further down */
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.2px;
  min-width:260px;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
  /* allow multi-line stacked content */
  flex-direction:column;
  white-space:normal;
  text-align:center;
  line-height:1.1;
}

.btn-cta{
  background:linear-gradient(90deg,var(--green-700),var(--green-600));
  color:#fff;
  border:3px solid rgba(255,255,255,0.06);
}

/* CTA internal lines */
.cta-line{
  display:block;
  padding:0 6px;
  width:100%;
  box-sizing:border-box;
}

.cta-line-1{
  font-size:14px;
  opacity:0.95;
  text-transform:uppercase;
  letter-spacing:0.6px;
}

.cta-line-2{
  font-size:15px;
  margin-top:4px;
  background:rgba(255,255,255,0.03);
  padding:6px 10px;
  border-radius:6px;
}

.btn-cta .wa{margin-left:6px;font-size:16px;line-height:1;vertical-align:middle}

/* responsive tweaks for mobile */
@media (max-width:560px){
  /* decrease base font on mobile for compactness */
  html, body { font-size:14px; }

  .logo{
    width:100%;
    max-width:240px;
    height:auto;
    margin:0 auto 8px;
    transform:none;
  }
  .lead{font-size:14px}
  .lead.small{font-size:13px}
  .contact-inner{flex-direction:column;align-items:stretch}
  .btn{min-width:unset;width:100%; margin-top:36px; flex-direction:column}
  .btn-cta{justify-content:center}

  /* Mobile-specific CTA size reductions so the multi-line text fits */
  .btn-cta {
    padding:8px 10px;
    min-width:unset;
    border-radius:10px;
  }
  .btn-cta .cta-line-1{font-size:12px}
  .btn-cta .cta-line-2{font-size:11px; padding:5px 6px}

  /* Make the central square match the (mobile) background image size: full width but limited to logo size */
  .hero-inner{
    width:100%;
    max-width:256px;
    aspect-ratio:unset;
    min-height:auto;
    padding:16px 8px 12px;
    transform:none;
    margin-inline:auto;
  }

  .btn-whatsapp{justify-content:center}
  .footer-inner{flex-direction:column;align-items:center;text-align:center}
  body{padding:12px}
}

/* Desktop-only: raise the central text block (move it up) and reduce hero background image size */
@media (min-width:561px){
  .text-block{
    margin-top:-140px; /* increased negative margin to lift the central text on desktop only */
  }

  /* decrease background image size only on desktop so it appears smaller behind the hero */
  .hero{
    /* keep existing background layers but override image sizing and position for desktop */
    background-position: center top;
    background-size: 60%;
    background-repeat: no-repeat;
  }
}

/* contact band */
.contact-band{
  background:var(--cream);
  color:var(--muted);
  padding:18px 14px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.contact-inner{
  width:100%;
  max-width:var(--max-width);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:6px 10px;
}

.contact-inner h3{margin:6px 0;font-size:15px;font-weight:700;color:var(--muted)}

.btn-whatsapp{
  background:transparent;
  color:var(--green-700);
  border:2px solid rgba(0,0,0,0.06);
  padding:10px 14px;
  border-radius:28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:700;
}

.btn-whatsapp .icon{width:20px;height:20px;display:inline-block;vertical-align:middle}

/* footer */
.site-footer{
  background:var(--green-900);
  color:var(--cream);
  border-top:1px solid rgba(255,255,255,0.03);
  padding:0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
  flex-wrap:nowrap;
  padding:10px 14px; /* brings content to the edges of the card */
}
.footer-inner small{
  opacity:0.95;
  font-size:13px;
  color:var(--cream);
  margin:0;
}
.social a{
  color:var(--cream);
  opacity:1;
  margin:0 6px;
  text-decoration:none;
  font-weight:700;
}



/* responsive */
@media (max-width:560px){
  /* mirrored mobile adjustments to ensure consistent sizing */
  html, body { font-size:14px; }

  .logo{
    width:100%;
    max-width:240px;
    height:auto;
    margin:0 auto 8px;
    transform:none;
  }
  .lead{font-size:14px}
  .lead.small{font-size:13px}
  .contact-inner{flex-direction:column;align-items:stretch}
  .btn{min-width:unset;width:100%; margin-top:36px}
  .btn-whatsapp{justify-content:center}
  .footer-inner{flex-direction:column;align-items:center;text-align:center}
  body{padding:12px}
}