/* GDSU-5769 — Cursos em breve (Saúde e Bem-Estar): seção + cards + modal */

/* ===== Seção ===== */
.em-breve-section { padding: 8px 0 48px; }
.em-breve-header { text-align: center; margin: 0 auto 32px; max-width: 760px; }
.em-breve-title { font-size: 28px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; }
.em-breve-subtitle { font-size: 16px; color: #555; margin: 0; line-height: 1.5; }

/* ===== Cards (3 por linha, sem imagem nem preço) ===== */
#em-breve-posts .row { display: flex; flex-wrap: wrap; }
.em-breve-col { margin-bottom: 24px; display: flex; }
.em-breve-card {
    text-align: left; display: flex; flex-direction: column; justify-content: space-between;
    width: 100%; background: #fff; border: 1px solid #e7e7e7; border-radius: 12px;
    padding: 22px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: box-shadow .2s ease, transform .2s ease; min-height: 210px;
}
.em-breve-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.10); transform: translateY(-3px); }
.em-breve-card-body { flex: 1 1 auto; }
.em-breve-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.em-breve-badges .badge {
    display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px;
    font-weight: 600; line-height: 1.4;
}
.em-breve-badge-type { background: #00A6A5; color: #fff; }
.em-breve-card .ead-badge { background: none; border: 1px solid #00a6a5; color: #00a6a5; border-radius: 10px; font-size: 12px; font-weight: 700; padding: 7px 21px; letter-spacing: -0.17px; }
.em-breve-name {
    display: block; font-size: 18px; font-weight: 600; color: #1a1a1a;
    line-height: 1.35; margin: 0;
}
.em-breve-disponivel { display: block; margin-top: 16px; color: #363634; font-weight: 400; font-size: 16px; letter-spacing: -0.17px; line-height: 1.4; }
.em-breve-disponivel strong { font-weight: 700; }
.em-breve-cta {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 18px; background: #1FB40B; color: #fff; border: none; border-radius: 8px;
    padding: 13px 16px; font-weight: 700; font-size: 15px; cursor: pointer;
    transition: background .2s ease;
}
.em-breve-cta:hover { background: #1bd303; }
.em-breve-cta .material-icons { font-size: 18px; }
.em-breve-hidden { display: none !important; }
.em-breve-more-wrapper { margin-top: 8px; }
.em-breve-see-more { background: none; border: none; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; gap: 4px; color: #111; }
.em-breve-see-more .underline { text-decoration: underline; }

/* ===== Modal (Figma 7262-1862 form / 7262-1874 sucesso) ===== */
.em-breve-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.em-breve-modal-overlay.is-open { opacity: 1; visibility: visible; }
.em-breve-modal {
    background: #fff; border: 1px solid #c9c9c9; border-radius: 12px; padding: 24px; width: 100%; max-width: 420px;
    position: relative; max-height: 92vh; overflow-y: auto; font-family: "Titillium Web", sans-serif;
    box-shadow: 0 1px 10px rgba(0,0,0,.05), 0 4px 5px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
    transform: translateY(12px); transition: transform .2s ease;
}
.em-breve-modal-overlay.is-open .em-breve-modal { transform: translateY(0); }
.em-breve-modal-close {
    position: absolute; top: 20px; right: 20px; background: none; border: none; padding: 0;
    width: 24px; height: 24px; line-height: 1; color: #363634; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.em-breve-modal-close svg { width: 20px; height: 20px; display: block; }
.em-breve-modal-close:hover { color: #000; }
.em-breve-modal-title { font-family: "Titillium Web", sans-serif; font-size: 22px; font-weight: 700; color: #363634; letter-spacing: -0.51px; line-height: 24px; margin: 0 0 24px; padding-right: 32px; }
.em-breve-form { display: flex; flex-direction: column; gap: 20px; }
.em-breve-form-group { margin: 0; }
.em-breve-label { display: block; font-family: "Roboto", Arial, sans-serif; font-size: 14px; font-weight: 400; color: #000; margin-bottom: 4px; line-height: 1.6; }
.em-breve-input, .em-breve-select {
    width: 100%; height: 48px; padding: 0 16px; border: 1px solid #979c9c; border-radius: 8px; box-sizing: border-box;
    font-family: "Roboto", Arial, sans-serif; font-size: 14px; color: #363634; background: #fff; transition: border-color .15s ease;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.em-breve-input::placeholder { color: #979c9c; opacity: 1; }
.em-breve-input:focus, .em-breve-select:focus { outline: none; border-color: #00A59A; box-shadow: 0 0 0 3px rgba(0,165,154,.12); }
.em-breve-select { cursor: pointer; color: #979c9c; padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23363634' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; }
.em-breve-select.has-value { color: #363634; }
.em-breve-input--invalid, .em-breve-select.em-breve-input--invalid { border-color: #e02424; }
.em-breve-error { display: block; color: #e02424; font-size: 12px; margin-top: 4px; min-height: 0; }
.em-breve-feedback { font-size: 14px; margin: 0; line-height: 1.45; }
.em-breve-feedback--error { color: #e02424; }
.em-breve-submit {
    width: 100%; background: #00A59A; color: #fff; border: none; border-radius: 4px;
    padding: 12px 24px; font-family: "Titillium Web", sans-serif; font-weight: 700; font-size: 18px; line-height: 24px;
    text-transform: uppercase; cursor: pointer; transition: background .2s ease; margin-top: 4px;
}
.em-breve-submit:hover { background: #00918a; }
.em-breve-submit:disabled { opacity: .6; cursor: not-allowed; }
/* Estado de sucesso (Figma 7262-1874 / 7249-2339) */
.em-breve-success-view { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 16px 8px; text-align: center; }
.em-breve-success-icon { width: 64px; height: 64px; display: block; }
.em-breve-success-icon svg { width: 100%; height: 100%; display: block; }
.em-breve-success-text { font-family: "Titillium Web", sans-serif; font-size: 18px; color: #363634; line-height: 24px; letter-spacing: -0.51px; margin: 0; }
.em-breve-success-text strong { font-weight: 700; }

/* ===== Responsivo ===== */
@media (max-width: 991px) { .em-breve-card { min-height: 0; } }
@media (max-width: 767px) {
    .em-breve-title { font-size: 23px; }
    .em-breve-subtitle { font-size: 15px; }
    .em-breve-modal { padding: 20px; }
}

/* ---- Banner Saúde (em-breve) — GDSU-5769 ajuste ---- */
.em-breve-banner { background: linear-gradient(120deg, #003f3b 0%, #00615c 55%, #008075 100%); overflow: hidden; }
.em-breve-banner-inner { display: flex; align-items: flex-end; justify-content: space-between; min-height: 250px; gap: 24px; }
.em-breve-banner-content { padding: 38px 0; max-width: 620px; color: #fff; }
.em-breve-banner-title { color: #fff; font-size: 38px; font-weight: 700; margin-bottom: 12px; line-height: 1.15; }
.em-breve-banner-sub { color: rgba(255,255,255,.92); font-size: 17px; line-height: 1.5; margin-bottom: 22px; }
.em-breve-banner-cta { display: inline-block; background: #1FB40B; color: #fff; font-weight: 600; padding: 12px 28px; border-radius: 6px; text-decoration: none; transition: background .2s ease; }
.em-breve-banner-cta:hover { background: #1bd303; color: #fff; }
.em-breve-banner-persona { align-self: flex-end; max-height: 290px; width: auto; flex: 0 0 auto; }
@media (max-width: 767px) { .em-breve-banner-persona { display: none; } .em-breve-banner-title { font-size: 27px; } .em-breve-banner-content { padding: 28px 0; } .em-breve-banner-inner { min-height: 0; } }

/* ---- Busca em-breve ---- */
.em-breve-search { max-width: 520px; margin: 4px auto 30px; }
.em-breve-search .input-wrapper { position: relative; }
.em-breve-search .input-course { width: 100%; padding: 13px 44px 13px 16px; border: 1px solid #d5d5d5; border-radius: 8px; font-size: 15px; outline: none; box-sizing: border-box; }
.em-breve-search .input-course:focus { border-color: #00A6A5; }
.em-breve-search .search-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.em-breve-search-empty { text-align: center; color: #666; margin-top: 14px; }

/* ---- Banner "Novos Cursos de Saúde e Bem-Estar" (Figma 7243-3330 desktop / 7262-2242 mobile) ---- */
.em-breve-banner-v2 { position: relative; margin: 40px 0 48px; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 1280 / 280; font-family: "Titillium Web", sans-serif; }
/* Persona centralizada, dos ombros pra cima — réplica do Figma: grupo 481x511 centrado, top -25.47 num container 1280x280 */
.ebv2-persona-group { position: absolute; left: 50%; top: -9.1%; width: 37.58%; height: 182.5%; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.ebv2-persona-clip { position: absolute; inset: 0; overflow: hidden; }
.ebv2-persona { position: absolute; left: -62.98%; top: -0.07%; width: 243.57%; height: 100.14%; max-width: none; }
.ebv2-fade { display: none; }
.ebv2-frame { position: absolute; left: 16px; right: 16px; top: 16px; bottom: 16px; border: 0.5px solid #fff; border-radius: 12px; z-index: 2; pointer-events: none; }
.ebv2-left { position: absolute; left: 6.25%; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 20px; }
.ebv2-titles { display: flex; flex-direction: column; gap: 12px; color: #fff; font-style: italic; }
.ebv2-pre { font-size: 29px; font-weight: 400; line-height: 1; }
.ebv2-title { font-size: 34px; font-weight: 700; line-height: 1; white-space: nowrap; }
.ebv2-mob-break { display: none; }
.ebv2-seecursos { display: flex; align-items: center; justify-content: center; height: 51px; background: #000; border: 1.3px solid #fff; border-radius: 8px; color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; transition: background .2s; }
.ebv2-seecursos:hover { background: #1a1a1a; color: #fff; }
.ebv2-right { position: absolute; right: 6.25%; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.ebv2-aviso { color: #fff; font-style: italic; font-size: 24px; text-align: center; line-height: 1.25; margin: 0; white-space: nowrap; }
.ebv2-btn { display: flex; align-items: center; justify-content: center; background: #FBDB1B; color: #000; border: none; border-radius: 8px; padding: 0 22px; height: 51px; font-weight: 700; font-size: 18px; cursor: pointer; font-style: normal; font-family: inherit; white-space: nowrap; transition: background .2s; }
.ebv2-btn:hover { background: #f5d000; }
/* Tablet: reduz tipografia pra caber */
@media (max-width: 1100px) {
  .ebv2-pre { font-size: 24px; } .ebv2-title { font-size: 28px; } .ebv2-aviso { font-size: 20px; }
  .ebv2-seecursos, .ebv2-btn { font-size: 16px; height: 46px; }
}
/* Mobile (Figma 7262-2242): card quase quadrado, persona à direita, título topo-esq, botão amarelo embaixo */
@media (max-width: 767px) {
  .em-breve-banner-v2 { aspect-ratio: 328 / 334; margin: 24px 0 32px; }
  .ebv2-persona-group { left: 12.8%; top: -11.4%; width: 117%; height: 122.2%; transform: none; }
  .ebv2-fade { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.85) 88%, #000 100%); }
  .ebv2-frame { left: 16px; right: 16px; top: 16px; bottom: 16px; }
  .ebv2-left { left: 9.75%; right: 9.75%; top: 17.4%; transform: none; gap: 8px; max-width: 62%; }
  .ebv2-titles { gap: 4px; }
  .ebv2-pre { font-size: 16px; } .ebv2-title { font-size: 27px; line-height: 29px; white-space: normal; }
  .ebv2-mob-break { display: inline; }
  .ebv2-seecursos { display: none; }
  .ebv2-right { left: 9.75%; right: 9.75%; top: auto; bottom: 22px; transform: none; align-items: stretch; gap: 10px; }
  .ebv2-aviso { font-size: 16px; line-height: 1.2; white-space: normal; }
  .ebv2-btn { width: 100%; font-size: 15px; height: 48px; }
}

/* ---- Filtros em-breve (Figma 7243-3308) ---- */
.em-breve-filters { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; font-family: "Titillium Web", sans-serif; }
.ebf-tabs { display: flex; gap: 10px; align-items: stretch; }
.ebf-ver { position: relative; flex: 0 0 auto; width: 256px; height: 66px; background: #000; border: 2px solid #FFDD00; border-radius: 8px; overflow: hidden; display: flex; align-items: center; }
.ebf-ver-text { position: relative; z-index: 2; color: #f3e22c; font-weight: 700; font-size: 13px; line-height: 1.15; text-transform: uppercase; padding-left: 16px; letter-spacing: -0.4px; white-space: nowrap; }
/* persona à direita, rosto/ombros — réplica do Figma 7251-3223 (grupo 137x161 em left193 top-21 de ~256x66) */
.ebf-ver-persona { position: absolute; left: 58%; top: -31.8%; width: 53.5%; height: 244%; overflow: hidden; z-index: 1; pointer-events: none; }
.ebf-ver-persona img { position: absolute; left: -70%; top: -0.07%; width: 268.46%; height: 100.14%; max-width: none; }
.ebf-tab { flex: 1 1 auto; min-width: 0; height: 66px; background: #fff; border: 1px solid #c2c2c2; border-radius: 8px; display: flex; flex-direction: row; align-items: center; gap: 7px; padding: 0 12px; text-decoration: none; cursor: pointer; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.ebf-tab:hover { border-color: #9a9a9a; }
.ebf-tab.is-active { border-color: #00A6A5; box-shadow: inset 0 0 0 1px #00A6A5; }
.ebf-tab-todos { flex: 0 0 auto; justify-content: center; }
.ebf-tab-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ebf-tab-icon svg { width: 20px; height: 20px; }
.ebf-tab-name { font-size: 15px; color: #1d1d1b; white-space: nowrap; font-weight: 400; }
.ebf-tab-todos .ebf-tab-name { font-weight: 700; }
.ebf-search { position: relative; }
.ebf-search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); }
.ebf-search-input { width: 100%; box-sizing: border-box; border: 1px solid #c2c2c2; border-radius: 50px; padding: 15px 24px 15px 52px; font-size: 16px; color: #1d1d1b; outline: none; font-family: inherit; }
.ebf-search-input:focus { border-color: #00A6A5; }
.ebf-search-input::placeholder { color: #1d1d1b; opacity: 1; }
.ebf-bar { background: #f4f4f4; border-radius: 6px; padding: 9px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ebf-modalities { display: flex; gap: 12px; flex-wrap: wrap; }
.ebf-mod { border: 1px solid; border-radius: 40px; padding: 6px 22px; font-size: 17px; line-height: 1.3; background: none; font-family: inherit; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.ebf-mod-todos { color: #1d1d1b; border-color: #1d1d1b; font-weight: 700; }
.ebf-mod-todos.is-active { background: #1d1d1b; color: #fff; }
.ebf-mod-ead { color: #fcaf17; border-color: #fcaf17; }
.ebf-mod-ead.is-active { background: #fcaf17; color: #fff; }
.ebf-mod-pres { color: #00a6a5; border-color: #00a6a5; }
.ebf-mod-pres.is-active { background: #00a6a5; color: #fff; }
.ebf-mod-semi { color: #038003; border-color: #038003; }
.ebf-mod-semi.is-active { background: #038003; color: #fff; }
.ebf-sort { display: flex; align-items: center; gap: 5px; background: none; border: none; font-family: inherit; cursor: pointer; padding: 0; }
.ebf-sort-text { font-size: 16px; color: #1d1d1b; }
.ebf-sort-text strong { font-weight: 600; }
@media (max-width: 991px) {
  .ebf-tabs { flex-wrap: wrap; }
  .ebf-ver { width: 100%; }
  .ebf-tab { flex: 1 1 40%; }
  .ebf-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ebf-sort { align-self: flex-start; }
}
@media (max-width: 767px) {
  .ebf-bar { padding: 12px 14px; }
  .ebf-modalities { gap: 8px; width: 100%; }
  .ebf-mod { padding: 5px 16px; font-size: 15px; }
}
/* Título da listagem (Figma 7245-2273 desktop / 7301-1575 mobile) */
.em-breve-listing-title { font-family: "Titillium Web", sans-serif; font-size: 34px; font-weight: 700; color: #1d1d1b; letter-spacing: -0.17px; line-height: 1.2; margin: 8px 0 24px; }
.em-breve-empty { text-align: center; color: #666; font-size: 16px; margin: 28px 0; }
@media (max-width: 767px) { .em-breve-listing-title { font-size: 22px; margin: 22px 0 16px; } }