/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.site-body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Tahoma, Arial, sans-serif;
  line-height: 1.5;
  color: #fff;
  background: rgb(80,100,100);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Layout */
.container { max-width: 720px; margin-inline: auto; }
.card {
  background: #506464; color: #111;
  border-radius: 20px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Header banner */
.site-header { padding: 0; margin: 0 0 10px; }
.header-banner { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Socials */
.socials { text-align:center; margin:8px 0 14px; }
.socials ul { list-style:none; margin:0; padding:0; display:inline-flex; gap:14px; }
.socials a { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; color:inherit; text-decoration:none; }
.socials svg { width:24px; height:24px; fill:currentColor; }

/* Main image */
.logo-link { display:block; text-decoration:none; outline:none; }
.hero-img { width:100%; height:auto; display:block; border-radius:16px; border: 0.5px solid rgba(0,0,0,0.07); box-shadow: 0 6px 18px rgba(0,0,0,0.10); aspect-ratio: 4 / 5; object-fit: cover; inline-size: 100%; }

/* Footer */
footer.site{
  text-align:center;
  font-size:.9rem;
  color:rgba(255,255,255,.9);
  padding:14px;
  border-top:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.18);
  margin-top: 16px;
  border-radius: 12px;
}
footer.site p{ margin:4px 0; unicode-bidi:isolate; }

[lang="en"] { direction: ltr; }

@media (min-width: 768px) {
  .container { max-width: 860px; }
  .card { padding: 22px; }
}


/* Brand colors for social icons (simple, colored) */
.socials a.facebook svg path { fill: #1877F2; }   /* Facebook */
.socials a.instagram svg path { fill: #E4405F; }  /* Instagram */
.socials a.youtube svg path { fill: #FF0000; }    /* YouTube */
.socials a.tiktok svg path { fill: #000000; }     /* TikTok */
.socials a.whatsapp svg path { fill: #25D366; }   /* WhatsApp */

/* Ensure anchors inherit no unexpected color overrides */
.socials a { color: inherit; }
.socials svg { width:24px; height:24px; }


/* High-quality brand SVG colors */
.socials a.facebook svg path { fill: #1877F2; }   /* Facebook */
.socials a.instagram svg path { fill: #E4405F; }  /* Instagram */
.socials a.youtube svg path { fill: #FF0000; }    /* YouTube */
.socials a.tiktok svg path { fill: #000000; }     /* TikTok */
.socials a.whatsapp svg path { fill: #25D366; }   /* WhatsApp */

.socials a { color: inherit; }
.socials svg { width:24px; height:24px; display:block; }
.socials a:hover svg { opacity: .9; }

/* WhatsApp CTA Button */
.cta-wa { text-align: center; margin: 6px 0 16px; }
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #25D366;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform .08s ease, box-shadow .18s ease, background .2s ease;
}
.btn-wa:hover { background: #22c45d; box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.btn-wa:active { transform: translateY(1px); }
.btn-wa .wa-icon { width: 18px; height: 18px; fill: currentColor; color: #111; }