html {
  overflow-x: hidden;
  width: 100%;
}

html, body { background: var(--color-bg); color: var(--color-text); }
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  font-family: "DM Sans", sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
}

.numeric-glyph {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

p { text-align: justify; }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 9999;
  background: var(--color-primary); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-md);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.container { width: min(1600px, 100%); max-width: 100%; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 5rem); }
.section { padding-block: var(--space-xl); }
.section > .container > .page-head { padding-top: 0; }
main { padding-top: clamp(0.75rem, 1.8vw, 1.25rem); }
main.section { padding-top: clamp(0.75rem, 1.8vw, 1.25rem); }
.section-title { font-family: "Cormorant Garamond", serif; font-size: var(--text-xl); line-height: 1.1; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--text-xs); color: var(--color-accent);
}
.lead { color: var(--color-text-muted); max-width: 65ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.4rem; border-radius: var(--radius-pill); border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29,74,46,0.25); background: var(--color-accent); color: var(--color-bg-dark); }
.btn-outline { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-outline:hover { background: #fff; color: var(--color-bg-dark); border-color: #fff; }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-primary); color: #fff; }

.badge { display:inline-block; font-size: var(--text-xs); padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); background: rgba(45,106,79,0.1); color: var(--color-primary); font-weight: 500; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); }

.grid { display: grid; gap: var(--space-md); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Floating WhatsApp Widget */
.whatsapp-widget {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #25D366;
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.whatsapp-widget:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.45);
  color: #fff;
}
.whatsapp-widget svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}
.whatsapp-widget-pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  animation: whatsapp-pulse 2s infinite;
  pointer-events: none;
}
@keyframes whatsapp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 768px) {
  .whatsapp-widget {
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.8rem;
  }
  .whatsapp-widget span { display: none; }
}
