:root{
  /* AppColors */
  --teal-dark:  #3B7E7A; /* edificio central */
  --green-gray: #6EA29A; /* edificio izq */
  --sand-beige: #D2C4AF; /* edificio der */
  --ink-blue:   #1F2B33; /* techo/textos */
  --white:      #FFFFFF;

  --gray-light:  #F7F7F7;
  --gray-border: #E0E0E0;

  --whatsapp:    #25D366;

  /* Derivados / tokens de UI */
  --color-bg: var(--white);
  --color-text: var(--ink-blue);
  --color-primary: var(--ink-blue);
  --color-secondary: var(--teal-dark);
  --color-tertiary: var(--sand-beige);
  --color-muted: #6b7280;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow-1: 0 12px 28px rgba(0,0,0,.12);
  --container: 1200px;

  /* Tipografías (coinciden con tu ThemeData) */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family: var(--font-sans); line-height:1.55;
}
img{max-width:100%; display:block}
a{color:var(--color-primary); text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 16px}
h1,h2,h3{margin:0 0 8px}
h1{font-family:var(--font-display); font-weight:800; font-size:clamp(28px,4vw,42px)}
h2{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3vw,28px)}
.muted{color:var(--color-muted)}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:12px; border:1px solid transparent;
  font-weight:700; cursor:pointer;
}
.btn.primary{background:var(--color-primary); color:#fff}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.divider{height:1px; background:var(--gray-border); margin:24px auto; width:calc(100% - 80px)}