/* ============================================
   CLARISSA CUNHA — SITE-WIDE STYLES
   Header, footer, common components
   ============================================ */

/* ============ LOADER ============ */
.cc-loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--cc-cream);
  display: grid; place-items: center;
  pointer-events: none;
  transition: opacity 800ms var(--ease-out), visibility 800ms;
}
.cc-loader.is-done { opacity: 0; visibility: hidden; }
.cc-loader__mark {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.cc-loader__logo {
  font-family: var(--ff-display); font-style: italic; font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  color: var(--cc-teal); letter-spacing: -0.02em;
  line-height: 1;
  animation: cc-loader-breathe 2s ease-in-out infinite;
}
.cc-loader__bar {
  width: 140px; height: 1px; background: var(--cc-line);
  position: relative; overflow: hidden;
}
.cc-loader__bar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--cc-lavender);
  animation: cc-loader-fill 2.4s ease-in-out forwards;
}
.cc-loader__text {
  font-family: var(--ff-sans); font-size: 10px;
  letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--cc-ink-muted);
}
@keyframes cc-loader-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes cc-loader-fill {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0%); }
}

/* ============ CURSOR ============ */
.cc-cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--cc-lavender);
  border-radius: 50%;
  pointer-events: none; z-index: 999;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 300ms var(--ease-out), background 300ms, opacity 200ms;
  mix-blend-mode: multiply;
  opacity: 0;
  transform-origin: center;
}
.cc-cursor.is-ready { opacity: 1; }
.cc-cursor.is-hover { transform: translate(-50%, -50%) scale(4); background: var(--cc-teal); }
.cc-cursor.is-image { transform: translate(-50%, -50%) scale(7.2); background: var(--cc-teal); opacity: 0.8; }
@media (pointer: coarse) { .cc-cursor { display: none; } }

/* ============ HEADER / NAV ============ */
.cc-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10001;
  padding: 22px var(--container-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  transition: background 400ms var(--ease-out), backdrop-filter 400ms, transform 400ms var(--ease-out);
  transform-origin: top center;
}
.cc-header.is-scrolled {
  background: rgba(251, 247, 241, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 14px var(--container-pad);
  border-bottom: 1px solid var(--cc-line-soft);
}
.cc-header.is-scrolled .cc-header__logo { transform: scale(0.88); }
.cc-header__logo {
  display: flex; align-items: center;
  transition: transform 500ms var(--ease-out);
}
.cc-header__logo:hover { transform: scale(0.98); }
.cc-header__logo img { height: 44px; width: auto; max-width: 220px; }
.cc-header.is-scrolled .cc-header__logo img { height: 36px; max-width: 180px; }

.cc-nav {
  display: flex; align-items: center; gap: 6px;
}
.cc-nav__link {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cc-ink); padding: 10px 14px;
  position: relative;
  transition: color 250ms;
}
.cc-nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px;
  background: var(--cc-teal); transform: scaleX(0); transform-origin: left;
  transition: transform 400ms var(--ease-out);
}
.cc-nav__link:hover { color: var(--cc-teal-deep); }
.cc-nav__link:hover::after { transform: scaleX(1); }
.cc-nav__link.is-active { color: var(--cc-teal-deep); }
.cc-nav__link.is-active::after { transform: scaleX(1); }

.cc-header__actions { display: flex; align-items: center; gap: 12px; }
.cc-header__cta {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--cc-ink); color: var(--cc-cream);
  padding: 12px 22px; border-radius: var(--radius-pill);
  transition: background 250ms, transform 250ms var(--ease-spring);
}
.cc-header__cta:hover { background: var(--cc-lavender-deep); transform: scale(1.03); }

.cc-header__burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cc-ink); color: var(--cc-cream);
  align-items: center; justify-content: center;
}
.cc-header__burger span {
  width: 16px; height: 1px; background: currentColor;
  position: relative;
}
.cc-header__burger span::before, .cc-header__burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor;
  transition: transform 400ms var(--ease-out), top 400ms var(--ease-out);
}
.cc-header__burger span::before { top: -5px; }
.cc-header__burger span::after  { top:  5px; }
.is-menu-open .cc-header__burger span { background: transparent; }
.is-menu-open .cc-header__burger span::before { top: 0; transform: rotate(45deg); }
.is-menu-open .cc-header__burger span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .cc-nav, .cc-header__cta { display: none; }
  .cc-header__burger { display: inline-flex; }
}

/* ============ FULLSCREEN MENU - ULTRA PREMIUM NOVO ============ */
.cc-menu {
  position: fixed;
  inset: 0;
  z-index: 99999 !important;
  background: linear-gradient(135deg, #FBF7F1 0%, #F8F3ED 50%, #F4EFE9 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.95);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 600ms,
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120px 32px 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.is-menu-open .cc-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

.cc-menu__primary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 500px;
}

.cc-menu__close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42,47,58,0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100001;
  opacity: 0;
  transform: scale(0.5) rotate(-180deg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  pointer-events: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(107,166,161,0.2);
}

.is-menu-open .cc-menu__close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition-delay: 300ms;
  pointer-events: auto;
}

.cc-menu__close:hover {
  background: var(--cc-teal);
  border-color: rgba(255,255,255,0.3);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 12px 32px rgba(107,166,161,0.4);
}

.cc-menu__close:active {
  transform: scale(0.9) rotate(90deg);
}

.cc-menu__close svg {
  transition: transform 300ms;
}

.cc-menu__close:hover svg {
  transform: rotate(90deg);
}

.cc-menu__primary a {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(32px, 8vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--cc-ink);
  padding: 20px 28px;
  border-radius: 20px;
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(107,166,161,0.12);
  transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(30px);
  box-shadow: 0 4px 16px rgba(42,47,58,0.06);
}

.cc-menu__primary a:hover {
  background: rgba(255,255,255,0.9);
  border-color: var(--cc-teal);
  transform: translateX(8px);
  box-shadow: 0 8px 24px rgba(107,166,161,0.15);
}

.is-menu-open .cc-menu__primary a {
  opacity: 1;
  transform: translateY(0);
}

.is-menu-open .cc-menu__primary a:nth-child(1) { transition-delay: 150ms; }
.is-menu-open .cc-menu__primary a:nth-child(2) { transition-delay: 200ms; }
.is-menu-open .cc-menu__primary a:nth-child(3) { transition-delay: 250ms; }
.is-menu-open .cc-menu__primary a:nth-child(4) { transition-delay: 300ms; }
.is-menu-open .cc-menu__primary a:nth-child(5) { transition-delay: 350ms; }
.is-menu-open .cc-menu__primary a:nth-child(6) { transition-delay: 400ms; }
.is-menu-open .cc-menu__primary a:nth-child(7) { transition-delay: 450ms; }
.is-menu-open .cc-menu__primary a:nth-child(8) { transition-delay: 500ms; }
.is-menu-open .cc-menu__primary a:nth-child(9) { transition-delay: 550ms; }
.is-menu-open .cc-menu__primary a:nth-child(10) { transition-delay: 600ms; }

.cc-menu__primary a:active {
  transform: scale(0.96);
  background: rgba(107,166,161,0.15);
  border-color: var(--cc-teal);
}

.cc-menu__primary a .num {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--cc-teal-deep);
  opacity: 0.6;
}

@media (max-width: 800px) {
  .cc-menu { 
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 16px 28px; border-radius: var(--radius-pill);
  transition: all 400ms var(--ease-out);
  cursor: pointer;
}
.btn--primary { background: var(--cc-ink); color: var(--cc-cream); }
.btn--primary:hover { background: var(--cc-lavender-deep); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn--ghost { border: 1px solid var(--cc-line); color: var(--cc-ink); }
.btn--ghost:hover { border-color: var(--cc-ink); background: var(--cc-ink); color: var(--cc-cream); }
.btn--teal { background: var(--cc-teal); color: white; }
.btn--teal:hover { background: var(--cc-teal-deep); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn .arrow { width: 16px; height: 10px; transition: transform 400ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============ FOOTER ============ */
.cc-footer {
  background: var(--cc-ink);
  color: var(--cc-cream);
  padding: var(--sp-9) var(--container-pad) var(--sp-6);
  position: relative;
  overflow: hidden;
}
.cc-footer::before {
  content: "Clarissa Cunha";
  position: absolute; bottom: -0.2em; left: -2vw; right: -2vw;
  font-family: var(--ff-display); font-style: italic; font-weight: 300;
  font-size: clamp(120px, 24vw, 400px);
  color: rgba(251, 247, 241, 0.05);
  letter-spacing: -0.04em; line-height: 0.85;
  white-space: nowrap;
  pointer-events: none;
}
.cc-footer__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(251,247,241, 0.12);
}
.cc-footer__lead h3 { font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: clamp(32px, 3vw, 44px); line-height: 1.15; max-width: 420px; margin-bottom: 24px; }
.cc-footer__lead p { color: rgba(251,247,241, 0.7); max-width: 380px; margin-bottom: 28px; font-size: 14px; line-height: 1.65; }
.cc-footer__col h4 { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(251,247,241, 0.5); margin-bottom: 18px; font-weight: 500; }
.cc-footer__col ul { list-style: none; padding: 0; margin: 0; }
.cc-footer__col li { margin-bottom: 10px; }
.cc-footer__col a { color: rgba(251,247,241, 0.85); font-size: 14px; transition: color 300ms; }
.cc-footer__col a:hover { color: var(--cc-lavender-soft); }
.cc-footer__bottom {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 24px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(251,247,241, 0.5);
}

@media (max-width: 900px) {
  .cc-footer__grid { grid-template-columns: 1fr 1fr; }
  .cc-footer__lead { grid-column: 1 / -1; }
  .cc-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============ COMMON SECTION ============ */
.section { padding: var(--sp-10) 0; position: relative; }
.section-sm { padding: var(--sp-8) 0; }
.section-lg { padding: var(--sp-11) 0; }
.section-head { text-align: center; margin-bottom: var(--sp-8); }
.section-head .eyebrow { margin-bottom: 20px; display: inline-flex; align-items: center; gap: 10px; }
.section-head .eyebrow::before, .section-head .eyebrow::after {
  content: ""; display: inline-block; width: 28px; height: 1px; background: var(--cc-teal);
}
.section-head h2 { font-family: var(--ff-display); font-weight: 300; font-size: var(--fs-2xl); line-height: 1.05; }
.section-head h2 em { font-style: italic; color: var(--cc-lavender-deep); }
.section-head p { max-width: 620px; margin: 18px auto 0; color: var(--cc-ink-soft); font-size: var(--fs-md); }

/* Decorative sprig (bouquet accent) */
.sprig {
  display: inline-block; width: 38px; height: 38px;
  vertical-align: middle;
}


/* ============================================
   GLOBAL PREMIUM IMPROVEMENTS
   ============================================ */

/* Smooth scroll nativo */
html { scroll-behavior: smooth; }

/* Selecao de texto premium */
::selection { background: var(--cc-lavender-soft); color: var(--cc-lavender-deep); }

/* Focus ring premium */
:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Imagens sem drag */
img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }

/* ============ PAGE HERO MOBILE ============ */
@media (max-width: 900px) {
  .page-hero {
    padding: 140px var(--container-pad) 60px;
  }
  .page-hero h1 {
    font-size: clamp(44px, 10vw, 80px);
  }
}
@media (max-width: 600px) {
  .page-hero {
    padding: 120px 20px 48px;
  }
  .page-hero h1 {
    font-size: clamp(36px, 11vw, 56px);
  }
  .page-hero__lede {
    font-size: clamp(17px, 4.5vw, 22px);
    margin-top: 24px;
  }
  .page-hero__crumb {
    font-size: 10px;
    margin-bottom: 20px;
  }
}

/* ============ SECTION HEAD MOBILE ============ */
@media (max-width: 600px) {
  .section-head {
    margin-bottom: 40px;
    padding: 0 4px;
  }
  .section-head h2 {
    font-size: clamp(32px, 9vw, 52px);
  }
  .section-head p {
    font-size: var(--fs-base);
    margin-top: 12px;
  }
}

/* ============ FOOTER MOBILE ============ */
@media (max-width: 600px) {
  .cc-footer {
    padding: 64px 20px 40px;
  }
  .cc-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cc-footer__lead { grid-column: 1; }
  .cc-footer__bottom {
    font-size: 10px;
    gap: 8px;
  }
}

/* ============ BUTTONS MOBILE ============ */
@media (max-width: 480px) {
  .btn {
    padding: 14px 22px;
    font-size: 11px;
  }
}

/* ============ STAT ROW MOBILE ============ */
@media (max-width: 600px) {
  .stat-row {
    grid-template-columns: 1fr 1fr;
    margin: 32px 0;
  }
  .stat-cell {
    padding: 20px 16px;
  }
  .stat-cell .v {
    font-size: 36px;
  }
}

/* ============ CONTAINER MOBILE ============ */
@media (max-width: 600px) {
  .container {
    padding: 0 20px;
  }
}

/* ============ MENU MOBILE ============ */
@media (max-width: 480px) {
  .cc-menu {
    padding: 90px 20px 48px;
  }
  .cc-menu__primary a {
    font-size: clamp(28px, 9vw, 48px);
  }
}

/* ============================================
   SKIP TO CONTENT (a11y)
   ============================================ */
.cc-skip {
  position: fixed; top: 12px; left: 50%;
  transform: translate(-50%, -200%);
  z-index: 1001;
  padding: 12px 22px;
  background: var(--cc-ink); color: var(--cc-cream);
  font-family: var(--ff-sans); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: transform 300ms var(--ease-out);
  box-shadow: var(--shadow-card);
}
.cc-skip:focus-visible {
  transform: translate(-50%, 0);
  outline: 2px solid var(--cc-teal); outline-offset: 3px;
}

/* ============================================
   WHATSAPP FLOAT (consolidated)
   ============================================ */
.wa-float {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 56px; height: 56px;
  background: #25D366; color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  z-index: 200;
  transition: transform 400ms var(--ease-out), box-shadow 400ms;
  animation: wa-pulse 4s ease-out 2s infinite;
  opacity: 1 !important;
  visibility: visible !important;
}
.wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(37,211,102,0.5);
}
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  50%      { box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 0 0 10px rgba(37,211,102,0); }
}
@media (max-width: 600px) {
  .wa-float {
    bottom: 20px; right: 20px;
    width: 48px; height: 48px;
  }
  .wa-float svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
}

/* ============================================
   TABLET BREAKPOINT REFINEMENTS (768–1100)
   ============================================ */
@media (min-width: 768px) and (max-width: 1100px) {
  .cc-header { padding: 18px var(--container-pad); }
  .cc-header.is-scrolled { padding: 12px var(--container-pad); }
}

/* ============================================
   NOJS FALLBACK
   ============================================ */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }
.no-js .cc-loader { display: none; }

/* ============================================
   IMAGE GLOBAL POLISH
   ============================================ */
img[data-cursor="image"] { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) {
  [data-cursor] { cursor: pointer; }
}

/* Footer watermark mobile - mostrar nome completo */
@media (max-width: 600px) {
  .cc-footer::before {
    font-size: clamp(48px, 18vw, 100px);
    bottom: -0.1em;
    left: 0;
    right: 0;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    line-height: 1;
  }
}
