/* Secao "Conversas" (portada da secao "Advantage" da referencia Razor AI:
   "Redefining Conversations and Enhancing User experience").
   O layout original e absoluto em 1376px; aqui foi refeito em grid para
   responder a largura do .container, mantendo o cartao branco com o
   recorte no canto superior esquerdo, o titulo grande, o acordeao e o
   painel de preview com o mockup de conversa. Fontes Inter/General Sans
   ja sao importadas em razor-templates.css. */

.adv{
  padding:64px 0;
  background:#f5f3fb;
  font-family:Inter,sans-serif;
  color:var(--ink,#151327);
}

.adv__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,340px) 1fr;
  grid-template-rows:auto auto;
  column-gap:40px;
}

/* ---- Linha 1: bloco de apoio (fora do cartao) + titulo (dentro) ---- */
.adv__intro{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:36px 0 40px;
  max-width:320px;
}

.adv__intro p{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:#1d1d21;
}

.adv__cta{
  width:100%;
  max-width:320px;
  height:48px;
  border-radius:100px;
  background:#1d1533;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  font-weight:600;
  font-size:16px;
  color:#fff;
  text-decoration:none;
  transition:background .2s;
}

.adv__cta:hover{
  background:var(--purple-dark,#27115f);
  color:#fff;
}

.adv__cta-ico{
  width:13px;
  height:13px;
  background:#fff;
  -webkit-mask:url(../../assets/icons/arrow-tr.svg) center/contain no-repeat;
  mask:url(../../assets/icons/arrow-tr.svg) center/contain no-repeat;
}

.adv__head{
  grid-column:2;
  grid-row:1;
  position:relative;
  background:#fff;
  border-radius:32px 32px 0 0;
  padding:32px 36px 20px 32px;
}

.adv__highlight{
  position:absolute;
  left:24px;
  top:40px;
  width:min(420px,60%);
  height:72px;
  background:#e8dffa;
  transform:scaleX(-1);
  -webkit-mask:url(../../assets/icons/highlight-hero.svg) center/100% 100% no-repeat;
  mask:url(../../assets/icons/highlight-hero.svg) center/100% 100% no-repeat;
  pointer-events:none;
}

/* Mesmo padrao do .value-title da secao Recursos (recursos.css). */
.adv__title{
  position:relative;
  margin:0;
  font-family:"Plus Jakarta Sans","Space Grotesk",Nunito,sans-serif;
  font-size:clamp(30px,3.4vw,46px);
  font-weight:500;
  line-height:1.22;
  letter-spacing:-.02em;
  text-wrap:pretty;
  color:var(--purple-dark,#27115f);
}

.adv__title strong{
  font-weight:700;
  color:var(--purple,#5932c1);
}

/* "Pilula" com olho e seta, decorativa, como no original */
.adv__pill{
  position:relative;
  margin:16px 0 0 auto;
  width:150px;
  height:56px;
  border-radius:100px;
  box-shadow:inset 0 0 0 1px #000;
  padding:4px 10px;
  box-sizing:border-box;
}

.adv__pill-mid{
  width:130px;
  height:48px;
  border-radius:100px;
  box-shadow:inset 0 0 0 1px #000;
  padding:0 10px;
  box-sizing:border-box;
}

.adv__pill-in{
  width:110px;
  height:48px;
  border-radius:100px;
  box-shadow:inset 0 0 0 1px #000;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.adv__eye{
  width:30px;
  height:30px;
  background:#101010;
  -webkit-mask:url(../../assets/icons/eye.svg) center/contain no-repeat;
  mask:url(../../assets/icons/eye.svg) center/contain no-repeat;
}

.adv__arrow{
  font-size:24px;
  line-height:1;
  color:#101010;
}

/* ---- Linha 2: corpo branco com acordeao + painel ---- */
.adv__body{
  grid-column:1 / -1;
  grid-row:2;
  position:relative;
  background:#fff;
  border-radius:32px 0 32px 32px;
  padding:32px;
  display:grid;
  grid-template-columns:minmax(280px,420px) 1fr;
  gap:16px;
  align-items:start;
}

/* Curva concava que une o recorte ao corpo (canto interno do "notch") */
.adv__body::before{
  content:"";
  position:absolute;
  left:calc(340px + 40px - 32px);
  top:-32px;
  width:32px;
  height:32px;
  background:radial-gradient(circle at 0 0,transparent 31.5px,#fff 32px);
  pointer-events:none;
}

.adv__list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.adv__item{
  border-radius:16px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  transition:background .2s;
  border:0;
  background:none;
  text-align:left;
  font:inherit;
  color:inherit;
  width:100%;
}

.adv__item:hover{
  background:#f7f5fb;
}

.adv__item.is-active{
  background:#eeebf7;
}

.adv__item-title{
  font-weight:600;
  font-size:20px;
  line-height:1.3;
  color:#1d1d21;
}

.adv__item-text{
  font-family:'General Sans',Inter,sans-serif;
  font-size:15px;
  line-height:1.45;
  color:#1d1d21;
}

.adv__panel{
  position:relative;
  min-height:0;
  align-self:stretch;
  border-radius:32px;
  background:#e8dffa;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.adv__panel-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  display:block;
}

/* ---- Responsivo ---- */
@media (max-width:1100px){
  .adv__grid{
    grid-template-columns:minmax(250px,300px) 1fr;
    column-gap:28px;
  }
  .adv__body::before{
    left:calc(300px + 28px - 32px);
  }
  .adv__body{
    grid-template-columns:minmax(250px,380px) 1fr;
  }
  .adv__panel{
    padding:0;
  }
}

@media (max-width:900px){
  .adv{
    padding:56px 0;
  }
  .adv__grid{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .adv__head{
    order:1;
    border-radius:28px 28px 0 0;
    padding:28px 24px 16px;
  }
  .adv__highlight{
    left:16px;
    top:36px;
    height:56px;
  }
  .adv__pill{
    display:none;
  }
  .adv__intro{
    order:2;
    max-width:none;
    background:#fff;
    padding:0 24px 24px;
  }
  .adv__body{
    order:3;
    border-radius:0 0 28px 28px;
    padding:0 24px 24px;
    grid-template-columns:1fr;
  }
  .adv__body::before{
    display:none;
  }
  .adv__panel{
    min-height:0;
    aspect-ratio:16 / 9;
    padding:0;
    border-radius:24px;
  }
}

@media (max-width:700px){
  .adv__title{
    font-size:clamp(29px,8.5vw,36px);
    line-height:1.14;
  }
}

@media (max-width:520px){
  .adv__item{
    padding:18px;
  }
  .adv__item-title{
    font-size:20px;
  }
  .adv__item-text{
    font-size:16px;
  }
}