:root{
  --brand-gold:#c59b20;
  --brand-dark:#111214;
  --muted:#7b7b7b;
  --accent:#f4e9c0;
  --radius:10px;
  --container-max:1100px;
  --gap:18px;
  --shadow: 0 6px 18px rgba(17,18,20,0.18);
  --text:#111214;
  --bg:#fff;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Watermark: tiled, semi-transparent background image behind content (responsive tile sizing) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("/Logo-marcadagua.png");
  background-repeat: repeat;
  background-position: center;
  /* responsive tile size: scales between 220px and 640px based on viewport width */
  background-size: clamp(220px, 24vw, 640px);
  opacity: 0.09; /* subtle / slightly more visible */
  z-index: 0;
  filter: saturate(0.03) brightness(1.02);
}

/* Photographic background only on pages that opt-in (class="has-photo") */
body.has-photo::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("/Welton-Solueservi-inicio.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: clamp(240px, 40vw, 480px) auto;
  opacity: 0.25; /* restored subtler visibility for the about page */
  z-index: 0;
  /* reduce grayscale, boost brightness and contrast for a clearer photo */
  filter: grayscale(0%) brightness(1.06) contrast(1.02);
}

/* Mobile-specific: shrink and center-right the photo so it never reaches the left edge */
@media (max-width:900px){
  body.has-photo::after{
    background-position: right 12px center; /* center vertically, slightly inset from the right edge */
    /* doubled sizing for mobile so the photo is noticeably larger but still constrained */
    background-size: clamp(240px, 72vw, 520px) auto; /* increased to about 2× the previous values */
    opacity: 0.32; /* slightly more visible on small screens */
  }
}

/* Ensure main structural regions sit above the watermark */
.site-header,
.hero,
.banner-center,
.features,
.page,
.site-footer,
.contact-panel,
.about-hero,
.footer-left,
.footer-right{
  position: relative;
  z-index: 1;
  -webkit-font-smoothing:antialiased;
}

/* Header */
.site-header{
  width:100%;
  background:linear-gradient(90deg,var(--brand-gold),#e0b84f);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow: var(--shadow);
}

.brand{display:flex;align-items:center;gap:12px}
.brand-img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.brand-text{font-weight:700;color:var(--brand-dark);font-size:1.05rem}

.nav{display:flex;gap:10px;align-items:center}
.nav-link{
  padding:8px 12px;
  border-radius:8px;
  color:var(--brand-dark);
  font-weight:600;
  transition:0.2s;
}

.nav-link:hover{
  background:rgba(0,0,0,0.05);
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:0.2s;
}

/* WhatsApp quick contact button shown inline before the phone number */
.whatsapp-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(90deg,#25D366,#1EBE52);
  color:#fff;
  font-weight:700;
  box-shadow: 0 8px 20px rgba(37,211,102,0.18);
  transform:translateY(0);
  animation: whatsapp-pulse 1.6s infinite;
}

.whatsapp-button svg{display:block;flex-shrink:0}
.whatsapp-text{display:inline-block;font-size:0.95rem}

@keyframes whatsapp-pulse{
  0%{ transform:translateY(0) scale(1); box-shadow: 0 6px 18px rgba(37,211,102,0.14); opacity:1; }
  50%{ transform:translateY(-4px) scale(1.02); box-shadow: 0 14px 30px rgba(37,211,102,0.22); opacity:0.9; }
  100%{ transform:translateY(0) scale(1); box-shadow: 0 6px 18px rgba(37,211,102,0.14); opacity:1; }
}

/* reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .whatsapp-button{ animation: none; }
}

.button.primary{
  background:var(--brand-dark);
  color:var(--accent);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  /* slow blink/pulse: subtle opacity + lighten on peak */
  animation: blink 3s ease-in-out infinite;
  transition: box-shadow 0.2s, transform 0.15s;
}

/* keep hover lift but not clash with animation */
.button.primary:hover{
  transform:translateY(-2px);
}

/* keyframes: never fully hide, just change opacity and tint */
@keyframes blink{
  0%   { opacity: 1; filter: none; box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
  50%  { opacity: 0.65; filter: brightness(1.08) saturate(1.05); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
  100% { opacity: 1; filter: none; box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
}

/* respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
  .button.primary{
    animation: none;
  }
}

.button.ghost{
  background:transparent;
  border:1px solid #ccc;
  color:var(--brand-dark);
}

.button.large{padding:12px 18px}

/* Hero */
.hero{
  max-width:var(--container-max);
  margin:30px auto;
  display:flex;
  gap:30px;
  padding:18px;
  align-items:center;
  justify-content:space-between;
}

.hero-inner{flex:1;min-width:240px}

.hero h1{
  font-size:1.6rem; /* slightly smaller for better layout and readability */
  margin:0 0 12px;
  padding:6px 12px;
  border-radius:8px;
  background: linear-gradient(90deg, rgba(197,155,32,0.14), rgba(224,184,79,0.10));
  color: #0f1314; /* a touch darker for improved contrast */
}

.hero p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.5;
}

.cta-row{display:flex;gap:12px}

.hero-figure{
  width:340px;
  flex-shrink:0;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* Banner centralizado */
.banner-center{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:40px 0;
}

.banner-center img{
  max-width:820px; /* smaller, easier to view on most screens */
  width:100%;
  border-radius:18px; /* slightly tighter corners */
  box-shadow: var(--shadow);
}

/* Features (default stacked / grid) */
.features{
  display:flex;
  gap:16px;
  max-width:var(--container-max);
  margin:44px auto 20px; /* increased top spacing to separate CTA and carousel */
  padding:0 18px;
  transition: transform 0.3s ease;
}

/* Carousel behaviour for desktop */
@media (min-width:901px){
  .features{
    overflow:hidden;
    padding:0;
  }

  .features-inner{
    display:flex;
    gap:16px;
    transition: transform 0.5s ease;
    will-change: transform;
  }

  .feature{
    flex:0 0 calc((var(--container-max) - (var(--gap) * 2)) / 3); /* show three cards approx */
    min-width:320px;
    margin:0 8px;
  }
}

.feature{
  flex:1;
  background:#fff;
  border-radius:12px;
  padding:18px;
  box-shadow:var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.feature h3{margin:0 0 8px}

/* Page */
.page{
  max-width:var(--container-max);
  margin:18px auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* About */
.about-hero{
  display:flex;
  gap:28px;
  align-items:center;
}
/* Prppriedades image sobre, dashboard    */
.about-hero figure{
  width:80%;
  border-radius:12px;
  overflow:hidden;
  align-items: center;
  box-shadow:var(--shadow);
}

.about-content{
  flex:1;
}

.about-content h1{
  font-size:1.8rem;
  margin-bottom:10px;
}

.about-content p{
  color:var(--muted);
  line-height:1.6;
  margin-bottom:16px;
}

/* make prominent lead paragraphs in the about page use the main text color for better readability */
.about-content p.lead{
  color: var(--text);
}

.about-content ul{
  padding-left:18px;
  margin-bottom:16px;
}

.about-content li{
  margin-bottom:6px;
}

/* Contact */
.contact-page{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:18px;
  align-items:start;
}

.contact-panel{
  background:#fff;
  padding:18px;
  border-radius:12px;
  box-shadow:var(--shadow);
}

.contact-aside .card{
  background:#fff;
  padding:14px;
  border-radius:10px;
  box-shadow:var(--shadow);
  margin-bottom:12px;
}

.contact-form label{
  display:block;
  margin-bottom:10px;
  font-weight:600;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #e6e6e6;
  margin-top:6px;
  font-size:0.95rem;
}

.form-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:center;
}

.muted{
  color:var(--muted);
  font-size:0.95rem;
}

/* Footer */
.site-footer{
  max-width:var(--container-max);
  margin:30px auto;
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* ensure left and right blocks behave like two columns on desktop */
.footer-left,
.footer-right{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* left content aligns left, right content aligns right on wide screens */
.footer-left{ text-align:left; align-items:flex-start; }
.footer-right{ text-align:right; align-items:flex-end; }

/* Logo rodapé */
.footer-logo{
  width:140px; /* reduced to keep footer compact and improve layout */
  height:140px;
  border-radius:8px;
  object-fit:cover;
}

/* footer nav */
.footer-nav{
  display:flex;
  gap:12px;
}

/* small WhatsApp icon link shown in footer next to contact */
.footer-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  text-decoration:none;
  margin-left:6px;
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.footer-whatsapp svg{display:block}
.footer-whatsapp:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,0.12); }

/* Responsive */
@media (max-width:900px){

  .hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-figure{
    width:100%;
  }

  /* ensure stacked features have clear vertical spacing on mobile */
  .features{
    flex-direction:column;
    gap:18px; /* add consistent vertical gap between cards */
    padding: 0 18px;
  }

  /* remove desktop horizontal margins and add mobile bottom margin to each card */
  .feature{
    margin: 0;
  }
  .features .feature{
    margin-bottom: 16px;
  }

  .contact-page{
    grid-template-columns:1fr;
  }

  .about-hero{
    flex-direction:column;
  }

  .about-hero figure{
    width:100%;
  }

  .site-header{
    padding:10px;
  }

  .brand-text{
    display:none;
  }

  .banner-center img{
    max-width:90%;
  }

  /* On mobile: stack footer with menu block first and logo/text last */
  .site-footer{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:14px;
    padding:12px 16px;
  }
  .footer-left{
    width:100%;
    align-items:flex-start;
    text-align:left;
    /* make it visually lightweight, like a card without border */
  }
  .footer-right{
    width:100%;
    align-items:flex-start;
    text-align:left;
    order:-1; /* ensure menu/year comes first when stacked */
  }

  /* make footer logo smaller on mobile */
  .footer-logo{
    width:120px;
    height:120px;
    border-radius:8px;
  }
}