:root {
  --chocolate: #482720;
  --creme: #efe0c8;
  --terracota: #893d25;
  --taupe: #d3b59d;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--creme);
  color: var(--chocolate);
  overflow-x: hidden;
}

.font-display {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: -0.01em;
}

/* Navbar glass on scroll */
.nav-scrolled {
  background: rgba(239, 224, 200, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(72, 39, 32, 0.08);
}

/* Menu link hover underline */
.nav-link {
  position: relative;
  transition: color .25s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1.5px;
  background: var(--terracota);
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--terracota); }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.stagger > * { transition-delay: 0ms; }
.stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.visible > *:nth-child(2) { transition-delay: 100ms; }
.stagger.visible > *:nth-child(3) { transition-delay: 200ms; }
.stagger.visible > *:nth-child(4) { transition-delay: 300ms; }
.stagger.visible > *:nth-child(5) { transition-delay: 400ms; }
.stagger.visible > *:nth-child(6) { transition-delay: 500ms; }
.stagger.visible > *:nth-child(7) { transition-delay: 600ms; }
.stagger.visible > *:nth-child(8) { transition-delay: 700ms; }

/* Hero decorative blob */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* Marquee tape */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
}

/* Service card — on chocolate background */
.service-card {
  background: rgba(239, 224, 200, 0.04);
  border: 1px solid rgba(239, 224, 200, 0.14);
  transition: transform .45s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease, color .45s ease;
}
.service-card h3,
.service-card p {
  transition: color .45s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  background: var(--taupe);
  border-color: var(--taupe);
  box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.5);
}
.service-card:hover h3 { color: var(--chocolate) !important; }
.service-card:hover p  { color: rgba(72, 39, 32, 0.78) !important; }

.service-card .icon-wrap {
  transition: background .45s ease, color .45s ease, transform .45s ease;
}
.service-card:hover .icon-wrap {
  background: var(--terracota);
  color: var(--creme);
  transform: rotate(-6deg) scale(1.05);
}

/* Variante com accent terracota (último card — CTA) */
.service-card.accent {
  background: var(--terracota);
  border-color: var(--terracota);
}
.service-card.accent:hover {
  background: var(--chocolate);
  border-color: var(--creme);
  box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.6);
}
.service-card.accent:hover h3 { color: var(--creme) !important; }
.service-card.accent:hover p  { color: rgba(239, 224, 200, 0.85) !important; }
.service-card.accent:hover .icon-wrap {
  background: var(--creme);
  color: var(--chocolate);
}

/* Insta grid */
.insta-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.insta-tile img {
  transition: transform .8s ease;
}
.insta-tile:hover img { transform: scale(1.08); }
.insta-tile .overlay {
  position: absolute; inset: 0;
  background: rgba(72, 39, 32, 0.65);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .4s ease;
}
.insta-tile:hover .overlay { opacity: 1; }

/* Social card */
.social-card {
  transition: transform .4s ease, box-shadow .4s ease;
}
.social-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px -20px rgba(72, 39, 32, 0.4);
}

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.76,0,.24,1);
}
.mobile-menu.open { transform: translateX(0); }

/* Testimonials */
.testimonial-slide {
  opacity: 0;
  transform: translateX(30px);
  position: absolute;
  inset: 0;
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.testimonial-slide.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
  pointer-events: auto;
}

/* Custom selection */
::selection {
  background: var(--terracota);
  color: var(--creme);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--creme); }
::-webkit-scrollbar-thumb {
  background: var(--taupe);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--terracota); }

/* ============ GLOBO 3D ============ */
.globe-scene {
  width: min(100%, 460px);
  aspect-ratio: 1;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.globe-sphere {
  transform-style: preserve-3d;
  animation: globe-spin 32s linear infinite;
  will-change: transform;
}
.globe-scene:hover .globe-sphere {
  animation-duration: 14s;
}
@keyframes globe-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.meridian {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(137, 61, 37, 0.22);
  border-radius: 50%;
  transform: rotateY(var(--rot));
  backface-visibility: visible;
}
.globe-parallels { pointer-events: none; }

.globe-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pin-dot {
  position: absolute;
  inset: 3px;
  background: var(--terracota);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(137, 61, 37, 0.18);
}
.pin-dot.pin-center {
  inset: 0;
  background: var(--chocolate);
  box-shadow: 0 0 0 6px rgba(72, 39, 32, 0.18), 0 0 20px rgba(72, 39, 32, 0.4);
}
.pin-ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--terracota);
  border-radius: 50%;
  animation: pin-pulse 2.4s ease-out infinite;
  opacity: 0;
}
@keyframes pin-pulse {
  0%   { transform: scale(1);   opacity: .8; }
  80%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ============ MARCA D'ÁGUA ATH ============ */
.watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.06;
  mix-blend-mode: multiply;
  animation: watermark-drift 22s ease-in-out infinite;
}
.watermark.on-dark {
  opacity: 0.08;
  mix-blend-mode: screen;
}
.watermark.spin {
  animation: watermark-spin 60s linear infinite;
}
@keyframes watermark-drift {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50%      { transform: translate(10px, -14px) rotate(4deg); }
}
@keyframes watermark-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Back to top */
.back-to-top {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background-color .3s ease;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { transform: translateY(-3px); }

/* Button sheen */
.btn-primary {
  background: var(--terracota);
  color: var(--creme);
  position: relative;
  overflow: hidden;
  transition: transform .3s ease;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left .6s ease;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover { transform: translateY(-2px); }

.btn-ghost {
  border: 1.5px solid currentColor;
  transition: background .3s ease, color .3s ease;
}
.btn-ghost:hover {
  background: var(--chocolate);
  color: var(--creme);
  border-color: var(--chocolate);
}