/* ═══════════════════════════════════════════════════
   Matias Studio — Shared Stylesheet
   ═══════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --black:#080808; --dark:#111; --mid:#1c1c1c;
  --border:rgba(255,255,255,0.07); --accent:#e8ff3c;
  --light:#f2f0eb; --muted:#8a8a8a;
}

/* ── Reset & Base ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--black);
  color:var(--light);
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { text-decoration:none; }

/* ── Nav ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 60px;
  background:rgba(8,8,8,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-brand {
  font-family:'Bebas Neue',sans-serif;
  font-size:1.3rem;
  letter-spacing:0.2em;
  color:var(--light);
  text-decoration:none;
}
.nav-brand span { color:var(--accent); }
.nav-links {
  display:flex; gap:36px; list-style:none;
}
.nav-links a {
  font-size:0.84rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color 0.3s;
}
.nav-links a:hover,
.nav-links a.active { color:var(--light); }
.nav-cta {
  padding:11px 28px;
  background:var(--accent);
  color:var(--black);
  font-size:0.75rem; letter-spacing:0.15em; text-transform:uppercase;
  font-weight:500; text-decoration:none;
  transition:opacity 0.3s;
}
.nav-cta:hover { opacity:0.85; }

/* Desktop: hide the CTA inside hamburger menu (only show .nav-cta-desktop) */
@media(min-width:768px) {
  .nav-cta-wrap { display:none; }
}
/* Mobile: hide the desktop CTA, show the one inside the menu */
@media(max-width:767px) {
  .nav-cta-desktop { display:none !important; }
}

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column; justify-content:center; align-items:center;
  width:36px; height:36px; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span {
  display:block; width:22px; height:1.5px;
  background:var(--light); transition:all 0.3s;
}
.hamburger.active span:nth-child(1) {
  transform:translateY(6.5px) rotate(45deg);
}
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) {
  transform:translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav overlay */
.nav-menu-wrap {
  display:contents; /* on desktop: behaves as if children are directly in nav */
}
@media(max-width:767px) {
  .nav-menu-wrap {
    display:block;
    position:fixed;
    top:65px; left:0; right:0;
    background:rgba(8,8,8,0.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    padding:0;
    max-height:0; overflow:hidden;
    transition:max-height 0.35s ease, padding 0.35s ease;
  }
  .nav-menu-wrap.open {
    max-height:400px;
    padding:20px 0 28px;
  }
  .nav-links {
    flex-direction:column; gap:0; padding:0 28px;
  }
  .nav-links li { border-bottom:1px solid var(--border); }
  .nav-links a {
    display:block; padding:14px 0;
    font-size:0.9rem;
  }
  .nav-cta-wrap {
    padding:16px 28px 0;
  }
  .hamburger { display:flex; }
}

/* ── Footer ── */
footer {
  border-top:1px solid var(--border);
  padding:36px 60px;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-brand {
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:0.25em;
  color:var(--light);
}
.footer-brand span { color:var(--accent); }
.footer-copy { font-size:0.75rem; color:var(--muted); }
.footer-contact { font-size:0.75rem; color:var(--muted); }
.footer-contact a {
  color:var(--muted); text-decoration:none; transition:color 0.3s;
  display:inline-flex; align-items:center; gap:7px;
}
.footer-contact a:hover { color:var(--accent); }

/* ── Buttons ── */
.btn-primary {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 48px;
  background:var(--accent); color:var(--black);
  font-size:0.8rem; letter-spacing:0.2em; text-transform:uppercase;
  font-weight:500; text-decoration:none;
  transition:opacity 0.3s, transform 0.2s;
}
.btn-primary:hover { opacity:0.9; transform:translateY(-1px); }
.btn-primary::after {
  content:'';
  position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);
  transition:none;
}
.btn-primary:hover::after {
  left:150%;
  transition:left 0.55s ease;
}

.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 48px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:0.8rem; letter-spacing:0.2em; text-transform:uppercase;
  text-decoration:none; transition:all 0.3s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--light); }

.btn-wa {
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 48px;
  background:#25d366; color:#fff;
  font-size:0.8rem; letter-spacing:0.15em; text-transform:uppercase;
  font-weight:500; text-decoration:none;
  transition:opacity 0.3s, transform 0.2s;
}
.btn-wa:hover { opacity:0.9; transform:translateY(-1px); }

/* ── Utilities ── */
.section-tag {
  font-size:0.7rem; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--accent); margin-bottom:60px;
  display:flex; align-items:center; gap:14px;
}
.section-tag::before {
  content:''; width:32px; height:1px; background:var(--accent);
}

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.6s, transform 0.6s; }
.reveal.visible { opacity:1; transform:translateY(0); }
.rd1 { transition-delay:0.1s; }
.rd2 { transition-delay:0.2s; }
.rd3 { transition-delay:0.3s; }

/* ── Cursor glow ── */
.cursor-glow {
  position:fixed;
  width:400px; height:400px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(232,255,60,0.05) 0%, transparent 70%);
  transition:left 0.08s linear, top 0.08s linear;
}

/* ── Glow cards ── */
.glow-card {
  position:relative; overflow:hidden;
  background:var(--dark);
  border:1px solid var(--border);
  transition:border-color 0.4s, transform 0.4s;
}
.glow-card:hover { border-color:rgba(232,255,60,0.25); transform:translateY(-3px); }
.glow-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(232,255,60,0.06) 0%, transparent 60%);
  opacity:0;
  transition:opacity 0.4s;
  pointer-events:none;
  z-index:0;
}
.glow-card:hover::before { opacity:1; }
.glow-card > * { position:relative; z-index:1; }

/* Shimmer helper (for extra shimmer on non-btn-primary elements) */
.shimmer {
  position:relative; overflow:hidden;
}
.shimmer::after {
  content:'';
  position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform:skewX(-20deg);
}
.shimmer:hover::after {
  left:150%;
  transition:left 0.55s ease;
}

/* ── Animations ── */
@keyframes up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ── Page header (inner pages) ── */
.page-header {
  padding:160px 60px 80px;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-header-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.page-header h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(44px,6vw,80px);
  font-weight:400; line-height:1.05;
  letter-spacing:-0.02em;
  max-width:800px;
}
.page-header h1 em { font-style:italic; color:var(--accent); }
.page-header-sub {
  margin-top:20px; max-width:520px;
  font-size:1.05rem; line-height:1.9; color:var(--muted);
}

/* ── Review cards & form ── */
.review-card {
  background:var(--dark); padding:36px 32px;
  transition:background 0.3s;
  border:1px solid var(--border);
}
.review-card:hover { background:rgba(232,255,60,0.02); }
.review-stars {
  color:var(--accent); font-size:0.9rem;
  letter-spacing:2px; margin-bottom:16px;
}
.review-text {
  font-size:0.95rem; color:var(--muted);
  line-height:2; margin-bottom:20px; font-style:italic;
}
.review-author {
  font-size:0.75rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--light);
}
.review-business { font-size:0.68rem; color:var(--muted); margin-top:3px; }

.review-form-wrap {
  background:rgba(232,255,60,0.03);
  border:1px solid var(--border);
  padding:48px;
}
.review-form-title {
  font-family:'Playfair Display',serif;
  font-size:1.4rem; margin-bottom:8px;
}
.review-form-title em { font-style:italic; color:var(--accent); }
.review-form-sub {
  font-size:0.95rem; color:var(--muted);
  margin-bottom:32px; line-height:1.8;
}
.review-form {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.review-input {
  padding:14px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color:var(--light);
  font-family:'DM Sans',sans-serif;
  font-size:0.95rem; font-weight:400;
  outline:none; transition:border-color 0.3s;
}
.review-input:focus { border-color:var(--accent); }
.review-input::placeholder { color:var(--muted); }
.review-textarea { grid-column:1/-1; height:100px; resize:vertical; }
.review-select { appearance:none; cursor:pointer; }
.review-submit {
  grid-column:1/-1; padding:16px;
  background:var(--accent); color:var(--black);
  border:none;
  font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase;
  cursor:pointer; font-family:'DM Sans',sans-serif; font-weight:500;
  transition:opacity 0.3s;
}
.review-submit:hover { opacity:0.85; }
.review-submit:disabled { opacity:0.5; cursor:not-allowed; }
.review-note {
  grid-column:1/-1; font-size:0.82rem; color:var(--muted);
  text-align:center; line-height:1.8;
}
.review-success { display:none; text-align:center; padding:32px; }
.review-success.show { display:block; }
.reviews-empty {
  font-size:0.88rem; color:var(--muted); font-style:italic; padding:20px 0;
}

/* ── CTA section ── */
.cta-section {
  margin:0 60px 80px; padding:80px;
  background:var(--dark); border:1px solid var(--border);
  position:relative; overflow:hidden;
  display:flex; justify-content:space-between; align-items:center; gap:60px;
}
.cta-glow {
  position:absolute; top:50%; left:30%;
  transform:translate(-50%,-50%);
  width:400px; height:200px;
  background:radial-gradient(ellipse, rgba(232,255,60,0.06), transparent 70%);
  pointer-events:none;
}
.cta-left { position:relative; z-index:1; }
.cta-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,3vw,44px); font-weight:400; line-height:1.2;
}
.cta-title em { font-style:italic; color:var(--accent); }
.cta-sub {
  margin-top:16px; font-size:1.05rem; color:var(--muted);
  max-width:380px; line-height:1.9;
}
.cta-right {
  position:relative; z-index:1; flex-shrink:0;
  display:flex; flex-direction:column; gap:14px;
}
.whatsapp-btn {
  display:flex; align-items:center; gap:12px;
  padding:20px 44px;
  background:var(--accent); color:var(--black);
  text-decoration:none;
  font-size:0.82rem; letter-spacing:0.15em; text-transform:uppercase;
  font-weight:500; transition:opacity 0.3s, transform 0.2s;
}
.whatsapp-btn:hover { opacity:0.9; transform:translateY(-1px); }
.email-btn {
  display:flex; align-items:center; gap:12px;
  padding:20px 44px;
  border:1px solid var(--border); color:var(--muted);
  text-decoration:none;
  font-size:0.82rem; letter-spacing:0.15em; text-transform:uppercase;
  transition:all 0.3s;
}
.email-btn:hover { border-color:var(--light); color:var(--light); }

/* ── Responsive ── */
@media(max-width:900px) {
  nav { padding:18px 24px; }
  .page-header { padding:120px 24px 60px; }
  .cta-section { margin:0 24px 60px; padding:40px 28px; flex-direction:column; align-items:flex-start; }
  footer { padding:24px; flex-direction:column; gap:12px; text-align:center; }
  .section-tag { margin-bottom:40px; }
  .review-form { grid-template-columns:1fr; }
  .review-form-wrap { padding:32px 20px; }
  .whatsapp-btn,.email-btn { padding:16px 24px; width:100%; justify-content:center; }
}
@media(max-width:480px) {
  .btn-primary,.btn-ghost,.btn-wa { width:100%; justify-content:center; padding:16px 28px; }
  .review-form-wrap { padding:28px 16px; }
}