/* SUGAR SPELL CAFÉ — Redesigned: Clean, Premium, Minimal */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  --green: #253929;
  --green-dark: #1a2b1e;
  --green-muted: #586A5B;
  --copper: #cd9a7b;
  --copper-gold: #d4a882;
  --copper-light: rgba(205,154,123,0.15);
  --taupe: #A78D78;
  --cream: #FFF9EF;
  --beige: #E8DDD0;
  --coffee: #3A2A1C;
  --white: #FFFCF7;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --transition: 0.4s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; }

body { font-family:var(--font-body); color:var(--coffee); background:var(--cream); line-height:1.7; overflow-x:hidden; }

img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; transition:color 0.2s ease; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

h1,h2,h3,h4 { font-family:var(--font-display); font-weight:400; line-height:1.2; }
h1 { font-size:clamp(2.5rem,5vw,4.2rem); letter-spacing:-0.02em; }
h2 { font-size:clamp(1.8rem,3.5vw,3rem); letter-spacing:-0.01em; }
h3 { font-size:clamp(1.2rem,2vw,1.6rem); }
h4 { font-size:clamp(1rem,1.5vw,1.2rem); }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.text-copper { color:var(--copper); }
.section-label { font-family:var(--font-body); font-size:0.72rem; font-weight:600; letter-spacing:0.25em; text-transform:uppercase; color:var(--copper); margin-bottom:1rem; display:block; }
.section-label-light { color:var(--copper-gold); }

.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.9rem 2.2rem; font-family:var(--font-body); font-size:0.8rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; border-radius:50px; transition:all var(--transition); }
.btn-primary { background:var(--copper); color:var(--green); }
.btn-primary:hover { background:var(--copper-gold); transform:translateY(-2px); box-shadow:0 8px 30px rgba(205,154,123,0.35); }
.btn-outline { background:transparent; color:var(--copper); border:1.5px solid var(--copper); }
.btn-outline:hover { background:var(--copper); color:var(--green); transform:translateY(-2px); }
.btn-outline-light { border-color:var(--cream); color:var(--cream); }
.btn-outline-light:hover { background:var(--cream); color:var(--green); }
.btn-green { background:var(--green); color:var(--cream); border:1.5px solid var(--green); }
.btn-green:hover { background:var(--green-dark); transform:translateY(-2px); }

/* NAV */
.navbar { position:fixed; top:0; left:0; width:100%; z-index:1000; padding:1.2rem 0; transition:all var(--transition); }
.navbar.scrolled { background:rgba(26,43,30,0.95); backdrop-filter:blur(20px); padding:0.8rem 0; box-shadow:0 4px 30px rgba(0,0,0,0.15); }
.navbar .container { display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:0.75rem; }
.nav-logo img { height:44px; width:44px; border-radius:50%; object-fit:cover; }
.navbar.scrolled .nav-logo img { height:38px; width:38px; }
.nav-logo-text { font-family:var(--font-display); font-size:1.25rem; color:var(--cream); letter-spacing:0.05em; }
.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a { font-size:0.8rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--beige); padding:0.25rem 0; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1.5px; background:var(--copper); transition:width var(--transition); }
.nav-links a:hover { color:var(--copper); }
.nav-links a:hover::after { width:100%; }
.nav-toggle { display:none; flex-direction:column; gap:5px; z-index:1001; padding:5px; }
.nav-toggle span { width:24px; height:2px; background:var(--cream); border-radius:2px; transition:all var(--transition); }
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translateY(5px) translateX(5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translateY(-5px) translateX(5px); }

/* HERO */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--green); overflow:hidden; }
.hero-bg-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0.5; filter:brightness(0.6) saturate(0.85); }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(37,57,41,0.4) 0%, rgba(37,57,41,0.6) 100%); z-index:0; pointer-events:none; }
#sparkle-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.hero-content { position:relative; z-index:2; text-align:center; padding:2rem; max-width:800px; }
.hero-logo { width:200px; height:200px; margin:0 auto 2rem; border-radius:50%; object-fit:cover; animation:logoFloat 6s ease-in-out infinite; filter:drop-shadow(0 0 40px rgba(205,154,123,0.25)); }
@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hero h1 { color:var(--cream); margin-bottom:0.75rem; }
.hero h1 span { color:var(--copper); font-style:italic; }
.hero-tagline { font-family:var(--font-accent); font-size:clamp(1.1rem,2.2vw,1.5rem); color:var(--taupe); font-style:italic; font-weight:300; margin-bottom:2.5rem; letter-spacing:0.03em; max-width:600px; margin-left:auto; margin-right:auto; }
.hero-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:0.5rem; color:var(--taupe); font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; animation:scrollPulse 2s ease-in-out infinite; }
.hero-scroll svg { width:20px; height:20px; stroke:var(--copper); animation:scrollBounce 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
@keyframes scrollBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* BRAND / STORY */
.brand { padding:7rem 0; background:var(--cream); }
.brand-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.brand-content h2 { color:var(--green); margin-bottom:1.5rem; }
.brand-content p { color:#5a4a3a; font-size:1.05rem; margin-bottom:1.2rem; line-height:1.85; }
.brand-image { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; }
.brand-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.brand-image:hover img { transform:scale(1.03); }

/* MENU */
.menu { padding:7rem 0; background:var(--green); }
.menu-header { text-align:center; margin-bottom:3rem; }
.menu-header h2 { color:var(--cream); margin-bottom:0.75rem; }
.menu-header p { font-family:var(--font-accent); font-style:italic; color:var(--taupe); font-size:1.1rem; max-width:500px; margin:0 auto; }
.menu-tabs { display:flex; justify-content:center; gap:1.5rem; margin-bottom:3rem; flex-wrap:wrap; }
.menu-tab { font-size:0.75rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--taupe); padding:0.5rem 0; position:relative; cursor:pointer; transition:color 0.2s; }
.menu-tab::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--copper); transition:width var(--transition); }
.menu-tab:hover, .menu-tab.active { color:var(--copper); }
.menu-tab.active::after, .menu-tab:hover::after { width:100%; }
.menu-panel { display:none; }
.menu-panel.active { display:flex; flex-direction:column; gap:0.6rem; max-width:600px; margin:0 auto; }
.menu-list-item { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid rgba(255,249,239,0.08); transition:all var(--transition); }
.menu-list-item:last-child { border-bottom:none; }
.menu-list-item:hover { background:rgba(255,249,239,0.04); transform:translateX(4px); }
.menu-list-item h4 { font-family:var(--font-display); color:var(--cream); font-size:1.05rem; display:flex; align-items:center; gap:0.5rem; }
.menu-list-item p { font-family:var(--font-accent); font-style:italic; color:var(--taupe); font-size:0.85rem; margin-top:0.15rem; }
.signature-badge { display:inline-block; font-family:var(--font-body); font-size:0.5rem; font-style:normal; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; background:var(--copper); color:var(--green); padding:2px 8px; border-radius:20px; }

/* EXPERIENCE */
.experience { padding:7rem 0; background:var(--cream); }
.experience-inner { max-width:700px; margin:0 auto; text-align:center; margin-bottom:4rem; }
.experience-inner h2 { color:var(--green); margin-bottom:1.5rem; }
.experience-inner p { color:#5a4a3a; font-size:1.05rem; line-height:1.85; margin-bottom:1rem; }
.instagram-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; }
.instagram-item { position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; aspect-ratio:1; }
.instagram-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.instagram-item:hover img { transform:scale(1.08); }
.instagram-item::after { content:''; position:absolute; inset:0; background:rgba(37,57,41,0.3); opacity:0; transition:opacity 0.3s; }
.instagram-item:hover::after { opacity:1; }
.instagram-cta { text-align:center; margin-top:2rem; }
.instagram-cta a { font-size:0.8rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--copper); border-bottom:1px solid var(--copper); padding-bottom:2px; }
.instagram-cta a:hover { color:var(--green); border-color:var(--green); }

/* VISUAL BREAK */
.visual-break { position:relative; height:60vh; min-height:400px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.visual-break img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.visual-break::after { content:''; position:absolute; inset:0; background:rgba(37,57,41,0.55); }
.visual-break h2 { position:relative; z-index:1; color:var(--cream); font-size:clamp(1.8rem,3.5vw,3rem); font-style:italic; letter-spacing:0.03em; }

/* REVIEWS */
.reviews { padding:7rem 0; background:var(--cream); }
.reviews-header { text-align:center; margin-bottom:3.5rem; }
.reviews-header h2 { color:var(--green); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:1000px; margin:0 auto; }
.review-card { background:var(--white); border:1px solid var(--beige); border-radius:var(--radius-lg); padding:2.5rem 2rem; text-align:center; transition:all var(--transition); }
.review-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.06); border-color:var(--copper); }
.review-card p { font-family:var(--font-accent); font-style:italic; font-size:1.15rem; color:var(--coffee); line-height:1.7; margin-bottom:1.5rem; }
.review-card span { font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--copper); }

/* NEWS */
.news { padding:7rem 0; background:var(--white); }
.news-header { text-align:center; margin-bottom:3.5rem; }
.news-header h2 { color:var(--green); }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.news-card { border-radius:var(--radius-lg); overflow:hidden; background:var(--cream); border:1px solid var(--beige); transition:all var(--transition); }
.news-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.06); }
.news-card-image { aspect-ratio:16/10; overflow:hidden; }
.news-card-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.news-card:hover .news-card-image img { transform:scale(1.05); }
.news-card-body { padding:1.5rem; }
.news-card-body h3 { color:var(--green); margin-bottom:0.5rem; font-size:1.15rem; }
.news-card-body p { color:#5a4a3a; font-size:0.92rem; line-height:1.6; }

/* LOCATION */
.location { padding:7rem 0; background:var(--cream); }
.location-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.location-info h2 { color:var(--green); margin-bottom:2rem; }
.location-detail { margin-bottom:2rem; }
.location-detail h4 { font-family:var(--font-body); font-weight:600; font-size:0.78rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--copper); margin-bottom:0.4rem; }
.location-detail p { color:#5a4a3a; font-size:1rem; line-height:1.7; }
.location-social { display:flex; gap:0.75rem; margin-top:1.5rem; }
.social-link { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--green); color:var(--cream); transition:all var(--transition); }
.social-link:hover { background:var(--copper); color:var(--green); transform:translateY(-3px); }
.social-icon-svg { width:20px; height:20px; fill:currentColor; }
.whatsapp-btn { display:inline-flex; align-items:center; gap:0.75rem; padding:0.8rem 1.6rem; background:#25D366; color:white; border-radius:50px; font-weight:600; font-size:0.85rem; margin-top:1rem; transition:all var(--transition); }
.whatsapp-btn:hover { background:#128C7E; transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,211,102,0.3); }
.whatsapp-btn svg { width:18px; height:18px; fill:currentColor; }
.location-map { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; background:var(--beige); }
.location-map-inner { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--green) 0%,#234535 100%); color:var(--cream); text-align:center; padding:2rem; }
.location-map-inner .map-icon { font-size:2.5rem; margin-bottom:0.75rem; opacity:0.7; }
.location-map-inner p { font-family:var(--font-accent); font-style:italic; color:var(--taupe); }

/* FOOTER */
.footer { padding:3.5rem 0 2.5rem; background:var(--green-dark); }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,var(--copper),transparent); opacity:0.3; }
.footer-content { display:flex; flex-direction:column; align-items:center; text-align:center; }
.footer-logo { width:70px; height:70px; border-radius:50%; object-fit:cover; margin-bottom:1rem; opacity:0.85; }
.footer-info { margin-bottom:1.5rem; }
.footer-info p { color:var(--taupe); font-size:0.88rem; line-height:1.8; }
.footer-info a { color:var(--copper); }
.footer-info a:hover { color:var(--cream); }
.footer-social { display:flex; gap:0.75rem; margin-bottom:1.5rem; }
.footer-social a { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(205,154,123,0.25); color:var(--taupe); transition:all var(--transition); }
.footer-social a:hover { background:var(--copper); color:var(--green); border-color:var(--copper); transform:translateY(-2px); }
.footer-copyright { font-size:0.72rem; color:var(--taupe); opacity:0.5; }

/* RESPONSIVE */
@media(max-width:1024px) {
  .reviews-grid, .news-grid { grid-template-columns:repeat(2,1fr); }
  .instagram-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px) {
  .nav-links { position:fixed; top:0; right:-100%; width:80%; max-width:320px; height:100vh; background:rgba(26,43,30,0.98); backdrop-filter:blur(20px); flex-direction:column; justify-content:center; gap:2rem; padding:3rem; transition:right var(--transition); box-shadow:-10px 0 40px rgba(0,0,0,0.3); }
  .nav-links.open { right:0; }
  .nav-links a { font-size:1rem; }
  .nav-toggle { display:flex; }
  .brand-grid, .location-grid { grid-template-columns:1fr; gap:2.5rem; }
  .brand-image { aspect-ratio:16/10; }
  .hero-logo { width:160px; height:160px; }
  .reviews-grid, .news-grid { grid-template-columns:1fr; }
  .instagram-grid { grid-template-columns:repeat(2,1fr); }
  .visual-break { height:45vh; min-height:300px; }
}
@media(max-width:480px) {
  .hero-logo { width:130px; height:130px; }
  .menu-tabs { gap:0.75rem; }
  .hero-buttons { flex-direction:column; align-items:center; }
}