/* =========================================================
   NOSSOS BENEFÍCIOS  (dobra da home) - design-elementor
   Cards estilo AAFBB: branco, sombra suave, ícone + botão teal.
   ========================================================= */

.anasbb-beneficios{
    --anasbb-navy:#1C325B;          /* títulos */
    --anasbb-teal:#1A8DB2;          /* ícone + botão */
    --anasbb-gray:#7A7A7A;          /* texto */
    --anasbb-border:#e7ecf1;
    position:relative;
    z-index:1;
    width:100%;
    background:#ffffff;
    padding:70px 0 78px;
    font-family:'Poppins', Roboto, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
}

.anasbb-beneficios__inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}

/* ---------- Cabeçalho da dobra ---------- */
.anasbb-beneficios__head{
    text-align:center;
    margin-bottom:48px;
}
.anasbb-beneficios__eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--anasbb-teal);
    margin-bottom:8px;
}
.anasbb-beneficios__title{
    margin:0;
    font-family:'Poppins', Roboto, Arial, sans-serif;
    font-size:clamp(28px, 4vw, 40px);
    font-weight:700;
    line-height:1.15;
    text-transform:uppercase;
    color:var(--anasbb-navy);
}
.anasbb-beneficios__title::after{
    content:'';
    display:block;
    width:64px;
    height:4px;
    margin:14px auto 0;
    border-radius:2px;
    background:var(--anasbb-teal);
}

/* ---------- Grid de cards ---------- */
.anasbb-beneficios__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
    gap:34px;
}

/* ---------- Card ---------- */
.anasbb-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:#ffffff;
    border:1px solid var(--anasbb-border);
    border-radius:10px;
    box-shadow:0 0 60px rgba(0,0,0,0.10);
    overflow:hidden;
    cursor:pointer;
    outline:none;
    transition:transform .25s ease, box-shadow .25s ease;
}
.anasbb-card:hover,
.anasbb-card:focus-visible{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(28,50,91,.16);
    border-color:#cdd9e2;
}
.anasbb-card:focus-visible{
    outline:3px solid rgba(26,141,178,.55);
    outline-offset:2px;
}

/* Mídia / imagem do topo */
.anasbb-card__media{
    width:100%;
    height:0;
    padding-top:58%;               /* proporção ~ 720x418 */
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
}
/* Fallback quando não há imagem de destaque */
.anasbb-card--noimage .anasbb-card__media{
    background:linear-gradient(135deg, #1C325B 0%, #1A8DB2 100%);
    background-image: url('http://localhost/anasbb/wp-content/uploads/2026/09/beneficios-bg.jpg');
    background-size: cover;
}

/* Corpo do card */
.anasbb-card__body{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    padding:26px 26px 28px;
}
.anasbb-card__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin-bottom:18px;
    background:var(--anasbb-teal);
    color:#ffffff;
    border-radius:8px;
    flex:0 0 auto;
}
.anasbb-card__icon i.material-icons{
    font-size:34px;
    line-height:1;
    color:#ffffff;
}
.anasbb-card__title{
    margin:0 0 12px;
    font-family:'Poppins', Roboto, Arial, sans-serif;
    font-size:21px;
    font-weight:600;
    line-height:1.3;
    color:var(--anasbb-navy);
}
.anasbb-card__text{
    margin:0 0 22px;
    font-size:14px;
    line-height:1.65;
    color:var(--anasbb-gray);
}
.anasbb-card__btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    align-self:flex-start;
    margin-top:auto;
    padding:12px 24px;
    background:var(--anasbb-teal);
    color:#ffffff;
    font-size:14px;
    font-weight:500;
    line-height:1;
    border-radius:0;
    transition:background .2s ease, transform .2s ease;
}
.anasbb-card__btn i.material-icons{
    font-size:18px;
    line-height:1;
    transition:transform .2s ease;
}
.anasbb-card:hover .anasbb-card__btn{
    background:#157a99;
}
.anasbb-card:hover .anasbb-card__btn i.material-icons{
    transform:translateX(4px);
}

/* =========================================================
   MODAL (conteúdo do benefício)
   ========================================================= */
.anasbb-modal{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:6vh 18px;
    visibility:hidden;
    opacity:0;
    transition:opacity .22s ease, visibility .22s ease;
    font-family:'Poppins', Roboto, Arial, sans-serif;
}
.anasbb-modal.anasbb-modal--open{
    visibility:visible;
    opacity:1;
}
.anasbb-modal__overlay{
    position:absolute;
    inset:0;
    background:rgba(6,20,38,.72);
    backdrop-filter:blur(2px);
}
.anasbb-modal__box{
    position:relative;
    z-index:1;
    width:100%;
    max-width:880px;
    max-height:88vh;
    overflow:auto;
    background:#ffffff;
    border-radius:12px;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    transform:translateY(14px) scale(.985);
    transition:transform .22s ease;
    -webkit-overflow-scrolling:touch;
}
.anasbb-modal--open .anasbb-modal__box{
    transform:none;
}
.anasbb-modal__close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:5;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    color:#1C325B;
    font-size:26px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.16);
    transition:background .2s ease, transform .2s ease;
}
.anasbb-modal__close:hover{
    background:#1A8DB2;
    color:#fff;
    transform:rotate(90deg);
}
.anasbb-modal__media{
    width:100%;
    height:0;
    padding-top:40%;
    background-size:cover;
    background-position:center;
}
.anasbb-modal__content{
    padding:34px 40px 44px;
}
.anasbb-modal__title{
    margin:0 0 16px;
    font-family:'Poppins', Roboto, Arial, sans-serif;
    font-size:clamp(22px, 3vw, 30px);
    font-weight:700;
    line-height:1.25;
    color:#1C325B;
}
.anasbb-modal__text{
    font-size:15px;
    line-height:1.75;
    color:#3f4c5c;
}
.anasbb-modal__text p{
    margin:0 0 16px;
}
.anasbb-modal__text p:last-child{
    margin-bottom:0;
}
.anasbb-modal__text a{
    color:var(--anasbb-teal);
    text-decoration:underline;
}
.anasbb-modal__text ul,
.anasbb-modal__text ol{
    margin:0 0 16px 20px;
    padding:0;
}
.anasbb-modal__text h1,
.anasbb-modal__text h2,
.anasbb-modal__text h3,
.anasbb-modal__text h4{
    color:#1C325B;
    line-height:1.3;
    margin:0 0 12px;
}
.anasbb-modal__video{
    position:relative;
    width:100%;
    margin-bottom:24px;
    aspect-ratio:16 / 9;
    background:#0b1b30;
    border-radius:8px;
    overflow:hidden;
}
.anasbb-modal__video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    display:block;
}
.anasbb-modal__video .anasbb-modal__video-play{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(rgba(10,26,47,.35), rgba(10,26,47,.35)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px);
    cursor:pointer;
    color:#ffffff;
    font-size:15px;
    font-weight:500;
    gap:10px;
    border:0;
    width:100%;
}
.anasbb-modal__video .anasbb-modal__video-play i{
    font-size:52px;
    color:#fff;
    text-shadow:0 4px 16px rgba(0,0,0,.3);
}
.anasbb-modal__video .anasbb-modal__video-play:hover i{
    color:#ffd000;
}

/* Bloqueia scroll do body enquanto o modal está aberto */
body.anasbb-modal-open{
    overflow:hidden;
}

/* ---------- Responsivo ---------- */
@media (max-width:768px){
    .anasbb-beneficios{ padding:48px 0 54px; }
    .anasbb-beneficios__head{ margin-bottom:34px; }
    .anasbb-beneficios__grid{ grid-template-columns:1fr; gap:26px; }
    .anasbb-modal{ padding:4vh 12px; align-items:flex-start; }
    .anasbb-modal__content{ padding:26px 22px 32px; }
    .anasbb-modal__media{ padding-top:52%; }
}
@media (max-width:480px){
    .anasbb-card__media{ padding-top:64%; }
}