/*
Theme Name:   SocialBake Clivi
Description:  Rediseno estructura+paleta estilo Clivi (claro/morado) para SocialBake.
Template:     twentytwentyfive
Version:      1.1
Text Domain:  socialbake-clivi
*/

/* ─── CSS VARIABLES ──────────────────────────────────────────────── */
:root {
  --sb-bg-dark:   #FFFFFF;
  --sb-bg-card:   #F3EEFF;
  --sb-border-d:  rgba(31,41,55,.08);
  --sb-accent:    #6138B7;
  --sb-text:      #1F2937;
  --sb-text-muted:rgba(31,41,55,.6);
}

/* ─── GLOBAL DARK BG ─────────────────────────────────────────────── */
html, body, #page, #content, .site, .site-content,
.mxd-page-content, .site-main {
  background: #FFFFFF !important;
}
body { font-size: 17px; }

/* ─── HEADER ─────────────────────────────────────────────────────── */
#site-header, .site-header,
.octf-main-header, .mxd-header,
.header_mobile {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(31,41,55,.08) !important;
}
.octf-mainbar-container {
  max-width: 100% !important;
  padding: 0 40px !important;
}
.octf-mainbar {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* ─── LOGO ───────────────────────────────────────────────────────── */
.sb-logo-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.sb-mark,
.mxd-logo img,
.site-logo img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  filter: brightness(0) invert(1) !important;
}
.sb-wordmark {
  font-family: 'Montserrat', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #1F2937 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  width: auto !important;
}

/* ─── TOP-LEVEL NAV LINKS ────────────────────────────────────────── */
#site-navigation .main-navigation,
.main-navigation {
  position: relative;
}
.main-navigation ul.menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation ul > li > a,
#site-navigation ul.menu > li > a {
  display: block !important;
  padding: 10px 14px !important;
  font-family: 'Inter', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(31,41,55,.8) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
.main-navigation ul > li > a:hover,
#site-navigation ul.menu > li > a:hover,
#site-navigation ul.menu > li.current-menu-item > a,
#site-navigation ul.menu > li.current-menu-ancestor > a {
  color: #1F2937 !important;
  background: rgba(31,41,55,.07) !important;
}

/* ─── DROPDOWN SUBMENU ───────────────────────────────────────────── */
/* Override Rayo's white background — keep its visibility/opacity approach */
.main-navigation ul ul,
#site-navigation ul.sub-menu {
  background: #F5F0FF !important;
  border: 1px solid rgba(31,41,55,.12) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  min-width: 240px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4) !important;
  left: 0 !important;
  top: 100% !important;
  z-index: 9999 !important;
  /* Keep Rayo's animation but start invisible */
  visibility: hidden;
  opacity: 0;
}
/* Show on hover — use visibility like Rayo does */
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul,
#site-navigation ul li:hover > .sub-menu,
#site-navigation ul li:focus-within > .sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Submenu links */
.main-navigation ul ul li,
#site-navigation ul.sub-menu li {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
}
.main-navigation ul ul li a,
.main-navigation ul li li a,
#site-navigation ul.sub-menu li a {
  color: rgba(31,41,55,.75) !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-family: 'Inter', 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: block !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: color .15s, background .15s !important;
  white-space: nowrap !important;
}
.main-navigation ul ul li a:hover,
#site-navigation ul.sub-menu li a:hover {
  color: #6138B7 !important;
  background: rgba(97,56,183,.08) !important;
}

/* ─── NAV CTA BUTTON (Agenda) ────────────────────────────────────── */
#menu-item-42 > a,
.menu-item-42 > a,
#site-navigation .menu-item-cta > a {
  background: #6138B7 !important;
  color: #FFFFFF !important;
  border-radius: 28px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  margin-left: 8px !important;
}
#menu-item-42 > a:hover,
.menu-item-42 > a:hover,
#site-navigation .menu-item-cta > a:hover {
  background: #4C2F91 !important;
  color: #FFFFFF !important;
}

/* ─── CONTENT AREA: full width ───────────────────────────────────── */
.mxd-page-content.inner-page-content { padding-top: 0 !important; }
.inner-post, .entry-content, article.page, .site-main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ─── HERO ───────────────────────────────────────────────────────── */
.sb-hero {
  padding-top: 32px !important;
}
.sb-hero h1 {
  font-size: clamp(44px, 6.5vw, 84px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
  margin-bottom: 28px !important;
}
.sb-hero-sub {
  font-size: 19px !important;
  line-height: 1.8 !important;
  color: rgba(31,41,55,.65) !important;
  max-width: 560px !important;
}
.sb-hero-badge {
  font-size: 12px !important;
  padding: 7px 18px !important;
  margin-bottom: 32px !important;
}
.sb-hero-img-wrap img {
  height: 620px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
@media(max-width:860px){
  .sb-hero-img-wrap img { height: 420px !important; }
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────── */
.sb-btn-primary, .sb-btn-y {
  font-size: 16px !important;
  padding: 17px 36px !important;
  border-radius: 36px !important;
  letter-spacing: -.01em !important;
}
.sb-btn-ghost, .sb-btn-outline {
  font-size: 15px !important;
  padding: 17px 28px !important;
  border-radius: 36px !important;
}
.sb-metric-num, .sb-hsc-num {
  font-size: clamp(40px, 5.5vw, 64px) !important;
}
.sb-section-h2, .sb-sp h2, .sb-sp-hero h1 {
  font-size: clamp(28px, 4vw, 48px) !important;
}
.elementor-heading-title { word-spacing: normal; }

/* ─── WA FLOAT ───────────────────────────────────────────────────── */
.sb-wa-float {
  width: 64px !important;
  height: 64px !important;
  box-shadow: 0 6px 28px rgba(37,211,102,.45) !important;
}

/* ─── STICKY BOOKING BAR ─────────────────────────────────────────── */
.sb-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  background: rgba(97,56,183,.95); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(97,56,183,.15);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transform: translateY(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.sb-sticky-bar.visible { transform: translateY(0); }
.sb-sticky-bar-text {
  font-family: "Inter", sans-serif; font-size: 14px;
  color: rgba(255,255,255,.85); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sb-sticky-bar-text strong { color: #FFFFFF; }
.sb-sticky-ctas { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.sb-sticky-wa,
.sb-sticky-call {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px;
  padding: 10px 22px; border-radius: 24px; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.sb-sticky-wa svg, .sb-sticky-call svg { flex-shrink: 0; }
.sb-sticky-wa {
  background: #25D366; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.sb-sticky-wa:hover {
  background: #22c15e; transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.sb-sticky-call {
  background: #FFFFFF; color: #6138B7;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.sb-sticky-call:hover {
  background: #F3EEFF; transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
@media(max-width:600px){
  .sb-sticky-bar { padding: 12px 16px; gap: 10px; }
  .sb-sticky-bar-text { display: none; }
  .sb-sticky-bar { justify-content: center; }
  .sb-sticky-wa, .sb-sticky-call { padding: 10px 16px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-sticky-bar, .sb-sticky-wa, .sb-sticky-call { transition: none !important; }
}