/* =========================================================
   HERO — Thiago Santos (escopo isolado em #hero-min)
   Paleta: #FFFFFF #95C93D #212C65 #3D76BB
   ========================================================= */

#hero-min {
  --white: #FFFFFF;
  --green: #95C93D;
  --navy:  #212C65;
  --blue:  #3D76BB;

  --radius-lg: 18px;
  --shadow: 0 12px 26px rgba(0,0,0,.08);
  --btn-shadow: 0 6px 16px rgba(0,0,0,.10);
  --bar-speed: 2.2s;
}

/* ===== Layout principal (grid) ===== */
#hero-min-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 20px;
}

#hero-min-left,
#hero-min-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ===== Cabeçalho: barra animada + nome com gradiente ===== */
#hero-min .hero-header { padding-top:10px; margin-bottom: 8px; }

#hero-min .hero-bar{
  height: 10px;
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
  position: relative;
  margin: 0 0 10px 0;
  border: 0;
}
#hero-min .hero-bar-fill{
  position: absolute; inset: 0 auto 0 0;
  width: 28%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
  animation: hero-min-bar-slide var(--bar-speed) ease-in-out infinite;
}
@keyframes hero-min-bar-slide{
  0%   { transform: translateX(-40%); }
  50%  { transform: translateX(120%); }
  100% { transform: translateX(-40%); }
}

/* Nome grande com gradiente */
#hero-min .gradient-name {
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin: 4px 0 6px 0;
  background: linear-gradient(90deg, var(--navy), var(--blue) 45%, var(--green));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-fill-color: transparent;
}
#hero-min .hero-role {
  margin: 0; color: var(--blue); font-weight: 700; opacity: .95;
}

/* ===== Copys ===== */
#hero-min .hero-intro { margin: 16px 0 8px; color: var(--navy); }
#hero-min .hero-intro p { margin: 0 0 10px; line-height: 1.55; }

/* ===== Tags ===== */
#hero-min .hero-tags { display:flex; flex-wrap:wrap; gap:10px; margin: 6px 0 12px; }
#hero-min .hero-tag {
  padding: 6px 12px; border-radius: 999px;
  background: rgba(33, 44, 101, 0.03);
  border: 1px solid rgba(33, 44, 101, 0.06);
  color: rgba(33, 44, 101, 0.55);
  font-weight: 600; font-size: .95rem;
}

/* ===== Meta ===== */
#hero-min .hero-meta {
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 8px 0 18px;
}
#hero-min .hero-meta-col {
  background: var(--white);
  border: 1px solid rgba(33,44,101,.12);
  border-radius: 14px;
  padding: 12px 14px;
}
#hero-min .hero-meta-title {
  font-size: .78rem; letter-spacing: .08em; color: var(--blue);
  font-weight: 800; margin: 0 0 4px 0;
}
#hero-min .hero-meta-text { color: var(--navy); font-weight: 600; }

/* ===== CTAs — SEMPRE CENTRALIZADAS ===== */
#hero-min .hero-ctas { text-align: center; }
#hero-min .hero-ctas .hero-ctas-row{
  display:flex;
  gap:10px;
  justify-content:center;   /* centraliza no eixo principal */
  align-items:center;
  flex-wrap: wrap;          /* permite quebrar mantendo o centro */
}

/* Base dos botões (escopo do HERO) */
#hero-min .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  box-shadow: var(--btn-shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Tamanho médio no HERO */
#hero-min .btn--md {
  padding: 8px 14px;
  font-size: 0.95rem;
  line-height: 1.1;
  white-space: nowrap;
}

/* === VARIANTES + CORES === */
/* 1) Primeiro botão — VERDE */
#hero-min #hero-btn-agendar{
  background: var(--green);
  color: #0f204f; /* legível no verde */
  border-color: color-mix(in srgb, var(--green) 80%, #000 20%);
}

/* 2) Azul */
#hero-min .btn--blue{
  background: var(--blue);
  color: #fff;
  border-color: color-mix(in srgb, var(--blue) 80%, #000 20%);
}

/* 3) Ghost */
#hero-min .btn--ghost{
  background: transparent;
  color: var(--navy);
  border-color: rgba(33,44,101,.26);
}

/* === Hover leve para TODOS === */
#hero-min .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  filter: brightness(1.03);
}
#hero-min #hero-btn-agendar:hover{
  filter: brightness(1.06);
  box-shadow: 0 12px 26px rgba(149,201,61,.32);
}
#hero-min .btn--blue:hover{
  filter: brightness(1.06);
  box-shadow: 0 12px 26px rgba(61,118,187,.28);
}
#hero-min .btn--ghost:hover{
  background: rgba(33,44,101,.06);
  border-color: rgba(33,44,101,.36);
}

/* Acessibilidade foco */
#hero-min .btn:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--blue) 60%, #fff 40%);
  outline-offset: 2px;
}

/* ===== Coluna da imagem ===== */
#hero-min .hero-media{
  position: relative;
  height: 100%;
  min-height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(33,44,101,.10);
  background: #fff;
}
#hero-min .hero-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Remoções/legados */
#hero-min .hero-topics { display:none !important; }
#hero-min-underline { display:none !important; }

/* Decoração opcional */
#hero-min .hero-decorations { position: relative; }
#hero-min .hero-min-shape { position:absolute; border-radius: 999px; opacity:.08; }
#hero-min .deco-a { width:160px; height:160px; background: var(--green); right:-40px; top:-20px; filter: blur(2px); }

/* ≥1180px — ajustes da imagem */
@media (min-width: 1180px){
  #hero-min-container{
    grid-template-columns: 1.06fr 0.94fr;
    align-items: start;
  }
  #hero-min-right{ align-self: start; }

  #hero-min .hero-media{
    height: auto;
    max-height: 640px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }
  #hero-min .hero-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ❌ Removido o hack que empurrava o 3º botão ➜ mantém tudo centralizado */
@media (max-width: 1150px) and (min-width: 981px){
  #hero-min .hero-ctas .hero-ctas-row{
    flex-wrap: wrap;
    justify-content: center;
  }
  #hero-min .hero-ctas .hero-ctas-row > a{
    flex: 0 0 auto; /* todos iguais */
  }
}

/* ≤980px — hero em 1 coluna */
@media (max-width: 980px){
  #hero-min-container{ grid-template-columns: 1fr; }
  #hero-min .hero-media{ min-height: 360px; }
}

/* ≤820px — CTAs podem quebrar */
@media (max-width: 820px){
  #hero-min .hero-ctas .hero-ctas-row{ flex-wrap: wrap; gap: 10px; }
}

/* ≤680px — wrap geral nas CTAs */
@media (max-width: 680px){
  #hero-min .hero-ctas .hero-ctas-row{ flex-wrap: wrap; }
}

/* ≤640px — imagem menor + meta em 1 coluna */
@media (max-width: 640px){
  #hero-min .hero-media{ min-height: 280px; }
  #hero-min .hero-meta{ grid-template-columns: 1fr; }
}

/* ≤560px — CTAs em largura total */
@media (max-width: 560px){
  #hero-min .btn--md{ width: 100%; justify-content: center; }
    #hero-min .hero-ctas .hero-ctas-row{
    display: flex;
    flex-direction: column;   /* empilha */
    align-items: stretch;     /* cada botão ocupa a largura total da row */
    justify-content: center;
    gap: 12px;                /* espaçamento vertical entre botões */
  }

  /* cada <a> ocupa 100% e sem margens laterais */
  #hero-min .hero-ctas .hero-ctas-row > a{
    width: 100%;
    align-self: stretch;
    margin: 0;                /* evita qualquer “puxão” lateral */
  }
}

/* ≤440px — empilha botões */
@media (max-width: 440px){
  #hero-min .hero-ctas .hero-ctas-row{ flex-direction: column; gap: 14px; }
  #hero-min .btn--md{ width: 100%; justify-content: center; }
}

/* Reduz movimento */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #hero-min .hero-bar-fill{ animation: none !important; }
}