@font-face{
  font-family: 'InterVar';
  src: local('Inter'), local('InterVariable');
  font-display: swap;
}

:root {
  --primary: #7C52A3;
  --accent: #44C7C7;
  --dark: #3B2B4B;
  --light: #FFF8FF;
  --radius: 18px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, InterVar, Arial, sans-serif;
  color: var(--dark);
  background: #fff;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }

.container { width: min(1100px, 92vw); margin: 0 auto; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left: 0; background:#000; color:#fff; padding:.5rem 1rem; z-index:1000; }

.site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: .6rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; color: var(--dark);}
.brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.hamburger { display:none; font-size: 2rem; cursor: pointer; }
#nav-toggle { display:none; }
.menu { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.menu a { text-decoration:none; color: var(--dark); padding:.5rem .8rem; border-radius: 10px; }
.menu a:hover { background: #f2edf7; color: var(--primary); }

.hero { position: relative; }
.hero img { width: 100%; height: clamp(320px, 55vw, 640px); object-fit: cover; filter: brightness(.75); }
.hero-text { position: absolute; inset: 0; display:grid; place-content:center; text-align:left; color:#fff; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin:0 0 .5rem; }
.hero h1 span { color: var(--accent); }
.hero .cta-row { display:flex; gap:.7rem; flex-wrap:wrap; }

.btn { display:inline-block; padding:.9rem 1.1rem; border-radius: 999px; text-decoration:none; font-weight:600; transition: .2s; border:2px solid transparent; }
.btn.primary { background: var(--primary); color:#fff; }
.btn.primary:hover { filter: brightness(.95); transform: translateY(-1px); }
.btn.ghost { background: transparent; color:#fff; border-color:#fff; }
.btn.link { background: #f2edf7; color: var(--primary); }

.services h2, .promos h2, .gallery h2, .video h2 { text-align:center; font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.services .cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.card { background: #fff; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(62, 27, 94, 0.08); overflow:hidden; padding:1rem; }
.card h3 { margin-bottom:.3rem; color: var(--primary); }
.card p { opacity: .85; }

.experience { background: linear-gradient(180deg, #ffffff 0%, #fbf7ff 60%, #f6feff 100%); padding: 2.5rem 0; }
.experience .container { display:grid; grid-template-columns: 1.2fr .8fr; gap:1.2rem; align-items:center; }
.exp-img img { border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.bullets { display:grid; gap:.5rem; padding-left: 1.1rem; }
.bullets li { margin-left:.4rem; }

.promos .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; align-items:start; }
.fb-wrap { position: relative; width:100%; padding-top: 120%; }
.fb-wrap iframe { position:absolute; inset:0; width:100%; height:100%; }

.gallery .masonry { columns: 2 280px; column-gap: .8rem; }
.gallery .masonry img { width:100%; margin:0 0 .8rem; border-radius: 12px; }

.video .video-placeholder { display:grid; place-content:center; border:2px dashed #c7b7dd; padding: 2rem; border-radius: var(--radius); background: #fff; color:#6d5a8a; min-height: 220px; }

.contact { background:#faf7ff; padding:2rem 0; }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; align-items:start; }
.contact-form { background:#fff; border-radius: var(--radius); padding:1rem; box-shadow: 0 8px 24px rgba(0,0,0,.06); display:grid; gap:.6rem; }
.contact-form label { display:grid; gap:.2rem; font-weight:600; color: var(--dark); }
.contact-form input, .contact-form textarea { padding:.7rem .8rem; border-radius: 12px; border:1px solid #e4dff0; font: inherit; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,82,163,.15);}
.help { font-size:.85rem; opacity:.7; }

.site-footer { background:#211629; color:#cdbbe6; padding: 1rem 0; }
.footer-grid { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.site-footer a { color:#cbeff1; }

.whatsapp-float {
  position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); display:grid; place-content:center; box-shadow: 0 12px 30px rgba(0,0,0,.2); z-index: 200;
}
.whatsapp-float svg { width: 28px; height: 28px; fill: white; }

@media (max-width: 900px) {
  .nav { grid-template-columns: auto auto; }
  .menu { display:none; flex-direction: column; background:#fff; position:absolute; top:60px; right:4%; padding: .8rem; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12);}
  #nav-toggle:checked ~ .menu { display:flex; }
  .hamburger { display:block; }
  .experience .container, .contact-grid, .promos .grid-2 { grid-template-columns: 1fr; }
  .fb-wrap { padding-top: 140%; }
}