/* Black-and-gold hero for the course pages (on top of hero-bg.css).
   Gold second line of the title, gold kicker, gold main button with a WhatsApp line under it,
   outlined second button; on phones the photo stays centred with soft fades on its edges. */
:root { --hg1: #F1D79F; --hg2: #D2A960; --hg3: #A87B3A; --hg-ink: #1A140E; --hg-grad: linear-gradient(135deg, var(--hg1), var(--hg2) 58%, var(--hg3)); }

/* title: second line in gold italic */
#top:has(.dc-hero-img) h1 .block, #top:has(.db-hero-img) h1 span:last-child, .hero:has(.hero-media) h1 .h1-line:last-child {
  display: block; font-style: italic; background: var(--hg-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .08em;
}

/* kicker */
#top:has(.dc-hero-img) > div > p.text-xs, .hero:has(.hero-media) .hero-copy > .eyebrow {
  color: var(--hg2) !important; font-weight: 600; letter-spacing: .2em;
}

/* main button */
#top:has(.dc-hero-img) > div > div > a[href*="wa.me"], #hero-actions > a[href*="wa.me"], .hero:has(.hero-media) .hero-actions .btn--primary {
  display: inline-grid !important; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; text-align: left !important;
  padding: 13px 22px 13px 18px !important; border: 0 !important; border-radius: 14px; min-height: 0;
  background: var(--hg-grad) !important; color: var(--hg-ink) !important;
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25;
  box-shadow: 0 14px 30px -14px rgba(210,169,96,.75); transition: filter .25s, transform .25s;
}
#top:has(.dc-hero-img) > div > div > a[href*="wa.me"]:hover, #hero-actions > a[href*="wa.me"]:hover, .hero:has(.hero-media) .hero-actions .btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
#top:has(.dc-hero-img) > div > div > a[href*="wa.me"]::before, #hero-actions > a[href*="wa.me"]::before {
  content: ""; grid-row: 1 / 3; width: 28px; height: 28px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l1.2-3.6A7.5 7.5 0 1 1 8.4 18.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l1.2-3.6A7.5 7.5 0 1 1 8.4 18.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero:has(.hero-media) .hero-actions .btn--primary svg { grid-row: 1 / 3; width: 28px !important; height: 28px !important; }
#top:has(.dc-hero-img) > div > div > a[href*="wa.me"]::after, #hero-actions > a[href*="wa.me"]::after, .hero:has(.hero-media) .hero-actions .btn--primary::after {
  content: "Chat with us on WhatsApp"; grid-column: 2; font-size: 12px; font-weight: 400; letter-spacing: .01em; text-transform: none; opacity: .75; margin-top: 2px;
}
html[lang^="pt"] #top:has(.dc-hero-img) > div > div > a[href*="wa.me"]::after, html[lang^="pt"] #hero-actions > a[href*="wa.me"]::after, html[lang^="pt"] .hero:has(.hero-media) .hero-actions .btn--primary::after { content: "Fale com a gente no WhatsApp"; }
html[lang^="es"] #top:has(.dc-hero-img) > div > div > a[href*="wa.me"]::after, html[lang^="es"] #hero-actions > a[href*="wa.me"]::after, html[lang^="es"] .hero:has(.hero-media) .hero-actions .btn--primary::after { content: "Escríbenos por WhatsApp"; }

/* second button */
#top:has(.dc-hero-img) .dc-textlink, #hero-actions .db-textlink, .hero:has(.hero-media) .hero-actions .link {
  display: inline-flex !important; align-items: center; gap: 12px; padding: 14px 20px !important; min-height: 0;
  border: 1px solid rgba(210,169,96,.55); border-radius: 14px; text-decoration: none !important; background: none;
  font-size: 13px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink) !important;
  transition: border-color .25s, color .25s;
}
#top:has(.dc-hero-img) .dc-textlink::after, #hero-actions .db-textlink::after, .hero:has(.hero-media) .hero-actions .link::after { content: "→"; color: var(--hg2); letter-spacing: 0; }
#top:has(.dc-hero-img) .dc-textlink:hover, #hero-actions .db-textlink:hover, .hero:has(.hero-media) .hero-actions .link:hover { border-color: var(--hg2); color: var(--hg1) !important; }

/* phones: buttons full width, photo centred */
@media (max-width: 639px) {
  #top:has(.dc-hero-img) > div > div > a[href*="wa.me"], #hero-actions > a[href*="wa.me"], .hero:has(.hero-media) .hero-actions .btn--primary,
  #top:has(.dc-hero-img) .dc-textlink, #hero-actions .db-textlink, .hero:has(.hero-media) .hero-actions .link { width: 100%; }
  #top:has(.dc-hero-img) > div > div:has(> a[href*="wa.me"]), #hero-actions, .hero:has(.hero-media) .hero-actions { row-gap: 12px !important; }

  /* photo centred at full width; soft fades on every edge, deeper at the bottom where the title starts */
  #top > div:has(> .dc-hero-img)::after, #top > div:has(> .db-hero-img)::after, .hero .hero-media::after {
    background:
      linear-gradient(90deg, var(--hb-bg) 0%, color-mix(in srgb, var(--hb-bg) 45%, transparent) 7%, transparent 18%, transparent 82%, color-mix(in srgb, var(--hb-bg) 45%, transparent) 93%, var(--hb-bg) 100%),
      linear-gradient(180deg, var(--hb-bg) 0%, color-mix(in srgb, var(--hb-bg) 40%, transparent) 5%, transparent 12%, transparent 62%, color-mix(in srgb, var(--hb-bg) 55%, transparent) 80%, var(--hb-bg) 97%) !important;
  }
  #top > div:not(:has(> img)), .hero .hero-copy { margin-top: -40px !important; }
}

/* sticky bottom bar on phones: dark glass with a slim gold-outlined pill */
body > div div.fixed.inset-x-0.bottom-0:has(> a[href*="wa.me"]), .db-sticky, .sticky-cta {
  background: linear-gradient(to top, rgba(12,9,7,.97) 55%, rgba(12,9,7,.82)) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(210,169,96,.22) !important;
}
body > div div.fixed.inset-x-0.bottom-0 > a[href*="wa.me"], .db-sticky > a, .sticky-cta .btn {
  display: flex !important; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 22px !important; border-radius: 999px !important;
  border: 1px solid rgba(210,169,96,.75) !important;
  background: linear-gradient(180deg, rgba(241,215,159,.10), rgba(241,215,159,.02)) !important;
  color: var(--hg1) !important; box-shadow: inset 0 1px 0 rgba(241,215,159,.18), 0 10px 26px -14px rgba(210,169,96,.6);
  font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .18em; text-transform: uppercase;
}
body > div div.fixed.inset-x-0.bottom-0 > a[href*="wa.me"]::before, .db-sticky > a::before, .sticky-cta .btn::before {
  content: ""; flex: none; width: 20px; height: 20px; background: var(--hg-grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l1.2-3.6A7.5 7.5 0 1 1 8.4 18.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l1.2-3.6A7.5 7.5 0 1 1 8.4 18.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body > div div.fixed.inset-x-0.bottom-0 > a[href*="wa.me"]::after, .db-sticky > a::after, .sticky-cta .btn::after { content: "→"; color: var(--hg2); letter-spacing: 0; font-size: 14px; }
body > div div.fixed.inset-x-0.bottom-0 > a[href*="wa.me"]:hover, .db-sticky > a:hover, .sticky-cta .btn:hover { border-color: var(--hg1) !important; background: rgba(241,215,159,.12) !important; }