/* =========================================================
   ESCOLHA CERTA – WIZARD (Step: Tipo de Produto)
   Tudo com prefixo .ec- para não brigar com Bootstrap etc.
   ========================================================= */

/* --- Container dos dois cards ------------------------------------------------ */
.ec-tiles{
    display: grid;
    grid-template-columns: 1fr; /* mobile: uma coluna */
    gap: 32px;
    padding: 0 16px;
    align-items: center;
}

@media (min-width: 992px){
    .ec-tiles{
        grid-template-columns: 1fr 1fr; /* desktop: duas colunas */
        gap: 10px;
    }
}

/* --- Card base --------------------------------------------------------------- */
.ec-tile{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    /* medidas do layout (649 × 325) ≈ padding 50/68 */
    min-height: 325px;
    padding: 68px 50px;
    background: linear-gradient(90deg, #4C75C0 6%, #7AA6F5 100%);
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;

    /* remover “cara” de <button> nativo */
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
}

.ec-tile:focus{
    outline: 2px solid rgba(255,255,255,.6);
    outline-offset: 2px;
}

/* hover/active */
.ec-tile:hover{
    filter: brightness(1.06);
    box-shadow: 0 10px 24px rgba(3,85,148,.25);
    transform: translateY(-1px);
    transition: all .18s ease;
}
.ec-tile:active{
    transform: translateY(0);
    filter: brightness(1.02);
}

/* --- Ícone quadrado com borda branca ---------------------------------------- */
.ec-ico{
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
}
.ec-ico img{
    max-width: 36px;
    max-height: 36px;
}

/* --- Texto do card ----------------------------------------------------------- */
.ec-txt{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ec-txt h3{
    margin: 0;
    font-size: 36px;      /* igual ao print */
    line-height: 42px;
    font-weight: 400;
    letter-spacing: .2px;
    color: #fff;
}

.ec-txt p{
    margin: 0 0 10px;
    color: rgba(255,255,255,.9);
    font-size: 16px;
    line-height: 22px;
}

/* --- Link “Selecionar” com sublinhado e seta -------------------------------- */
.ec-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #fff;
    color: #E6EEFF;
    font-size: 18px;
    line-height: 18px;
    font-weight: 500;
    text-decoration: none;
    width: 85%;
}
.ec-tile:hover .ec-link{
    color: #fff;
    border-bottom-color: #fff;
}

/* --- Só por garantia: nada dentro do card navega sozinho -------------------- */
.ec-tile a{ pointer-events: none; }

/* --- Título “Selecione o Tipo de Produto” (se usar as classes abaixo) ------- */
.ec-subtle{
    color: #52575C;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%; /* 18.9px */
    letter-spacing: 0.28px;
}
.ec-title{
    text-align: center;
    color: #4CA7E0;
    font-weight: 800;
    font-size: 36px;
    margin: 0 0 24px;
}

/* --- Ajustes rápidos opcionais para a área acima (hero) --------------------- */
.ec-hero{
    background: #F4F6FA;
    border-radius: 4px;
    padding: 36px 24px;
    margin: 8px 16px 32px;
}
.ec-hero h1{
    margin: 0 0 8px;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 600;
    color: #1F2937;
}
.ec-hero p{
    margin: 0;
    color: #6B7280;
}

/* --- Responsividade tipografia (opcional) ----------------------------------- */
@media (max-width: 575.98px){
    .ec-tile{ padding: 40px 28px; min-height: 260px; }
    .ec-txt h3{ font-size: 28px; line-height: 34px; }
    .ec-link{ font-size: 16px; }
}

.ec-tile{ transition: filter .18s ease, transform .18s ease, box-shadow .18s ease; }

/* ---------- Paleta / tokens usados no Figma ---------- */
:root{
    --ec-blue: #4CA7E0;         /* azul SMS dos títulos e botões */
    --ec-blue-ink: var(--bs-primary);
    --ec-panel-bg: #F6F8FC;     /* cards */
    --ec-text: #1F2937;
    --ec-muted: #6B7280;
    --ec-border: #E5E7EB;
}

/* ---------- Step title ---------- */
.ec-step-title{
    text-align:center;
    color:var(--ec-blue);
    font-weight:800;
    font-size:28px;
    line-height:1.2;
    margin: 6px 0 22px;
}

/* ---------- Painel (card grande) ---------- */
.ec-panel{
    background: var(--ec-panel-bg);
    border-radius: 8px;
    padding: 28px 24px;
}

.ec-panel-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 10px;
    margin-bottom: 16px;
}

.ec-icon{ width:80px; height:80px; }


/* ---------- Campos centralizados e finos ---------- */
.ec-panel-body{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.ec-field{ width: 100%; display:flex; flex-direction:column; align-items:center; }
.ec-label{
    font-size:12px;
    color:var(--ec-muted);
    margin-bottom:6px;
}

.ec-select,
.ec-input,
.ec-panel-body select{
    width: 360px;                           /* mesma largura de todos os campos */
    max-width: 100%;
    height: 36px;
    border:1px solid var(--ec-border);
    border-radius:4px;
    padding: 6px 10px;
    background:#fff;
    font-size:14px;
    margin-top: 10px
}

/* Caso os <select> venham como .form-control do Bootstrap */
.form-control.ec-select,
.form-control.ec-input{
    width:360px;
    height:36px;
    padding:6px 10px;
}

/* Duas colunas (quantidade / watts) centralizadas */
.ec-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 360px;
    max-width: 100%;
    margin-top: 12px;
}
.ec-col{ display:flex; flex-direction:column; }

/* ---------- Botões ---------- */
.ec-btn{
    display:inline-flex; align-items:center; justify-content:center;
    height: 38px; padding: 0 18px; border-radius:0; border:0; cursor:pointer;
    font-weight:600; font-size:14px;
}
.ec-btn-primary{ background: var(--ec-blue); color:#fff; }
.ec-btn-primary:hover{ background: var(--ec-blue-ink); }
.ec-btn-secondary{ background:#6B6F7A; color:#fff; }

.mt-2{ margin-top: 12px; }


/* ---------- Dica e navegação ---------- */
.ec-tip{ text-align:center; color:var(--ec-muted); font-size:12px; margin-top:4px; }

.ec-wizard-nav{
    display:flex; gap:12px; justify-content:center; align-items:center;
    margin-top: 18px;
}

/* ---------- Pequenas responsividades ---------- */
@media (max-width: 576px){
    .ec-select, .ec-input, .ec-row{ width: 100%; }
    .ec-row{ grid-template-columns: 1fr; }
}

/* -------------------------------------------
   Painéis (cards)
------------------------------------------- */
.ec-panel {
    background: var(--ec-panel-bg);
    border-radius: 0;
    padding: 28px 24px;
}

.ec-panel-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-icon {
    width: 80px;
    height: 80px;
}


/* -------------------------------------------
   Corpo do painel / Campos de seleção
------------------------------------------- */
.ec-panel-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ec-label {
    font-size: 12px;
    color: var(--ec-muted);
    margin-bottom: 6px;
}

.ec-select-wrap {
    width: 360px;
    max-width: 100%;
    margin-bottom: 12px;
}

.ec-panel-body select,
.ec-input {
    width: 360px;
    max-width: 100%;
    height: 36px;
    border: 1px solid var(--ec-border);
    border-radius: 4px;
    padding: 6px 10px;
    background: #fff;
    font-size: 14px;
}

/* Corrige selects do Bootstrap caso venham com form-control */
.form-control {
    height: 36px;
    padding: 6px 10px;
}

/* Linha: quantidade | potência | botão */
.ec-inline {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    width: 360px;
    max-width: 100%;
    margin-top: 6px;
}

.ec-inline-col {
    display: flex;
    flex-direction: column;
}

.ec-inline-col--btn {
    align-self: center;
    margin-top: 24px;
}

/* -------------------------------------------
   Botões
------------------------------------------- */
.ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 0; /* Botões “flat” */
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}

.ec-btn-primary {
    background: var(--ec-blue);
    color: #fff;
}

.ec-btn-primary:hover {
    background: var(--ec-blue-ink);
}


/* -------------------------------------------
   Dica / Mensagem
------------------------------------------- */
.ec-tip {
    text-align: center;
    color: var(--ec-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* -------------------------------------------
   Responsividade
------------------------------------------- */
@media (max-width: 576px) {
    .ec-select-wrap,
    .ec-panel-body select,
    .ec-input,
    .ec-inline {
        width: 100%;
    }
    .ec-inline {
        grid-template-columns: 1fr; /* empilha as colunas */
    }
}

/* ===== Painéis (cards) ===== */
.ec-panel{
    background:var(--ec-panel-bg);
    border-radius:8px;
    padding:28px 24px;
}

.ec-panel-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:16px;
}
.ec-icon{ width:80px; height:80px; }
.ec-panel-title{
    color: #1F1F20;
    text-align: center;
    font-size: 38px;
    font-style: normal;
    font-weight: 300;
}

/* ===== Corpo / Campos ===== */
.ec-panel-body{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.ec-label{
    font-size:12px;
    color:var(--ec-muted);
    margin-bottom:6px;
}

.ec-select-wrap{ width:360px; max-width:100%; margin-bottom:12px; }
.ec-panel-body select,
.ec-input{
    width:360px;
    max-width:100%;
    height:36px;
    border:1px solid var(--ec-border);
    border-radius:4px;
    padding:6px 10px;
    background:#fff;
    font-size:14px;
    font-family: "Roboto", sans-serif;
}

/* Corrige quando o select vem com .form-control do Bootstrap */
.form-control{
    height:36px;
    padding:6px 10px;
}

/* Grid: Qtd | Watts | Botão */
.ec-inline{
    display:grid;
    grid-template-columns: 1fr 1fr auto;
    gap:12px;
    width:360px;
    max-width:100%;
    margin-top:6px;
}
.ec-inline-col{ display:flex; flex-direction:column; }

/* ===== Botões ===== */
.ec-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:38px;
    padding:0 18px;
    border:0;
    border-radius:0; /* flat */
    cursor:pointer;
    font-weight:600;
    font-size:14px;
}
.ec-btn-primary{
    background:var(--ec-blue);
    color:#fff;
    font-family: "Roboto", sans-serif;
}
.ec-btn-primary:hover{ background:var(--ec-blue-ink); }

/* ===== Responsivo ===== */
@media (max-width: 576px){
    .ec-select-wrap,
    .ec-panel-body select,
    .ec-input,
    .ec-inline{
        width: 290px;
    }
    .ec-inline{ grid-template-columns: 1fr; }
}

#id_equipamento_informatica, #id_equipamento_audio_video, #id_equipamento_outros{
    font-family: "Roboto", sans-serif;
    color: #73757B;
}

/* Container dos chips em grid, para quebrar bonitinho */
.ec-chips{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

/* Cartão */
.ec-chip{
    padding: 0; /* o conteúdo agora está em .ec-chip-card */
    border: none;           /* removemos o antigo contorno */
    background: transparent;
}

/* o card vira o “referencial” do absolute */
.ec-chip-card{
    position: relative;
    padding: 16px 44px 14px 16px; /* + espaço à direita p/ o X */
    border: 1px solid #E5E7EB;
    border-radius: 2px;
    background: #fff;
}

/* botão X sobreposto no canto superior direito */
.ec-chip-close{
    position: absolute;
    top: 8px;
    right: 8px;
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #111827;
    opacity: .8;
    cursor: pointer;
    z-index: 1; /* garante que fique acima de tudo */
}
.ec-chip-close:hover{ opacity: 1; }

/* você pode remover isso se quiser; não é mais necessário */
.fechar{ all: unset; }


.ec-chip-qtd{
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    color:  #4CA7E0;
}

.ec-chip-main{
    color: var(--Color-5, #4CA7E0);
    font-size: 18px!important;
    font-style: normal!important;
    font-weight: 700!important;
}
.ec-chip-title{
    color: #73757B;
    font-size: 16px!important;
    font-style: normal;
    font-weight: 500!important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ec-chip-sub{
    color: #73757B;
    font-size: 12px!important;
    font-style: normal!important;
    font-weight: 300!important;
}

.ec-chip-close{
    appearance: none; border: 0; background: transparent;
    font-size: 22px; line-height: 1; padding: 4px 6px; color: #111827;
    opacity: .8; cursor: pointer;
}
.ec-chip-close:hover{ opacity: 1; }
.ec-chip-card:hover{ box-shadow: 0 2px 10px rgba(17,24,39,.06); border-color: #E2E8F0; }


.btn-voltar, .btn-proximo, .js-add, .ec-btn-primary{
    width: 144px!important;
    padding: 22px 32px!important;
}

.text-title{
    color: #4CA7E0;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
}

.text-title-escolha{
    color: #73757B;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 300;
}

/* aplica estilo apenas ao wrapper que CONTÉM um select */
.ec-inline-col:has(> select.form-select) {
    position: relative;
    color: #52575c;
}

.ec-inline-col:has(> select.form-select) > select.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    padding-right: 44px;
}

.ec-inline-col:has(> select.form-select)::after {
    content: "";
    position: absolute;
    top: 60%;
    right: 12px;
    width: 22px;
    height: 23px;
    transform: translateY(-50%);
    pointer-events: none;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23"><path fill="black" d="M18.3618 9.3364L11.4868 16.2114C11.4229 16.2753 11.3471 16.326 11.2637 16.3606C11.1802 16.3952 11.0907 16.413 11.0004 16.413C10.91 16.413 10.8206 16.3952 10.7371 16.3606C10.6536 16.326 10.5778 16.2753 10.514 16.2114L3.63898 9.3364C3.50997 9.2074 3.4375 9.03243 3.4375 8.84999C3.4375 8.66755 3.50997 8.49259 3.63898 8.36359C3.76798 8.23458 3.94294 8.16211 4.12538 8.16211C4.30782 8.16211 4.48279 8.23458 4.61179 8.36359L11.0004 14.753L17.389 8.36359C17.4529 8.29971 17.5287 8.24904 17.6121 8.21447C17.6956 8.1799 17.785 8.16211 17.8754 8.16211C17.9657 8.16211 18.0552 8.1799 18.1386 8.21447C18.2221 8.24904 18.2979 8.29971 18.3618 8.36359C18.4257 8.42746 18.4763 8.50329 18.5109 8.58675C18.5455 8.67021 18.5633 8.75966 18.5633 8.84999C18.5633 8.94033 18.5455 9.02978 18.5109 9.11323C18.4763 9.19669 18.4257 9.27252 18.3618 9.3364Z"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23"><path fill="black" d="M18.3618 9.3364L11.4868 16.2114C11.4229 16.2753 11.3471 16.326 11.2637 16.3606C11.1802 16.3952 11.0907 16.413 11.0004 16.413C10.91 16.413 10.8206 16.3952 10.7371 16.3606C10.6536 16.326 10.5778 16.2753 10.514 16.2114L3.63898 9.3364C3.50997 9.2074 3.4375 9.03243 3.4375 8.84999C3.4375 8.66755 3.50997 8.49259 3.63898 8.36359C3.76798 8.23458 3.94294 8.16211 4.12538 8.16211C4.30782 8.16211 4.48279 8.23458 4.61179 8.36359L11.0004 14.753L17.389 8.36359C17.4529 8.29971 17.5287 8.24904 17.6121 8.21447C17.6956 8.1799 17.785 8.16211 17.8754 8.16211C17.9657 8.16211 18.0552 8.1799 18.1386 8.21447C18.2221 8.24904 18.2979 8.29971 18.3618 8.36359C18.4257 8.42746 18.4763 8.50329 18.5109 8.58675C18.5455 8.67021 18.5633 8.75966 18.5633 8.84999C18.5633 8.94033 18.5455 9.02978 18.5109 9.11323C18.4763 9.19669 18.4257 9.27252 18.3618 9.3364Z"/></svg>') no-repeat center / contain;
    opacity: .9;
}

/* grid horizontal dos radios */
.ec-radio-grid ul, .ec-radio-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 28px 56px;        /* linha x coluna */
    justify-content: center;
}

/* Django RadioSelect costuma gerar <ul><li> */
.ec-radio-grid li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ec-radios input[type="radio"] {
    accent-color: #2fa2ff; /* azul do seu tema (ajuste se quiser) */
}
.ec-radios label { color: #6b7280; }
.ec-radios input[type="radio"]:checked + label { color: #4b5563; }

/* ---------- Card ---------- */
.ec-card {
    background: #f7f9fc;
    border-radius: 12px;
    padding: 28px 24px 32px;
    margin: 8px auto 24px;
    max-width: 980px;
}
.ec-card--center { text-align: center; }
.ec-card-head { margin-bottom: 16px; }
.ec-card-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ec-card-title { margin: 4px 0 6px; font-weight: 600; color: #222; }
.ec-card-sub { margin: 0 auto 10px; color: #6b7280; max-width: 720px; }

/* largura do select no centro */
.ec-card-select { width: 320px; margin: 0 auto; }

/* ---------- Select com chevron ---------- */
.select-chev { position: relative; color: #52575c; }
.select-chev > .form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: "Roboto", sans-serif;
    background-image: none;
    padding-right: 44px;
    height: 40px;            /* altura parecida com o mock */
    border-radius: 6px;
}
.select-chev::after {
    content: "";
    position: absolute;
    top: 50%; right: 12px;
    width: 22px; height: 23px;
    transform: translateY(-50%);
    pointer-events: none;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">\
<path fill="black" d="M18.3618 9.3364L11.4868 16.2114C11.4229 16.2753 11.3471 16.326 11.2637 16.3606C11.1802 16.3952 11.0907 16.413 11.0004 16.413C10.91 16.413 10.8206 16.3952 10.7371 16.3606C10.6536 16.326 10.5778 16.2753 10.514 16.2114L3.63898 9.3364C3.50997 9.2074 3.4375 9.03243 3.4375 8.84999C3.4375 8.66755 3.50997 8.49259 3.63898 8.36359C3.76798 8.23458 3.94294 8.16211 4.12538 8.16211C4.30782 8.16211 4.48279 8.23458 4.61179 8.36359L11.0004 14.753L17.389 8.36359C17.4529 8.29971 17.5287 8.24904 17.6121 8.21447C17.6956 8.1799 17.785 8.16211 17.8754 8.16211C17.9657 8.16211 18.0552 8.1799 18.1386 8.21447C18.2221 8.24904 18.2979 8.29971 18.3618 8.36359C18.4257 8.42746 18.4763 8.50329 18.5109 8.58675C18.5455 8.67021 18.5633 8.75966 18.5633 8.84999C18.5633 8.94033 18.5455 9.02978 18.5109 9.11323C18.4763 9.19669 18.4257 9.27252 18.3618 9.3364Z"/>\
</svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">\
<path fill="black" d="M18.3618 9.3364L11.4868 16.2114C11.4229 16.2753 11.3471 16.326 11.2637 16.3606C11.1802 16.3952 11.0907 16.413 11.0004 16.413C10.91 16.413 10.8206 16.3952 10.7371 16.3606C10.6536 16.326 10.5778 16.2753 10.514 16.2114L3.63898 9.3364C3.50997 9.2074 3.4375 9.03243 3.4375 8.84999C3.4375 8.66755 3.50997 8.49259 3.63898 8.36359C3.76798 8.23458 3.94294 8.16211 4.12538 8.16211C4.30782 8.16211 4.48279 8.23458 4.61179 8.36359L11.0004 14.753L17.389 8.36359C17.4529 8.29971 17.5287 8.24904 17.6121 8.21447C17.6956 8.1799 17.785 8.16211 17.8754 8.16211C17.9657 8.16211 18.0552 8.1799 18.1386 8.21447C18.2221 8.24904 18.2979 8.29971 18.3618 8.36359C18.4257 8.42746 18.4763 8.50329 18.5109 8.58675C18.5455 8.67021 18.5633 8.75966 18.5633 8.84999C18.5633 8.94033 18.5455 9.02978 18.5109 9.11323C18.4763 9.19669 18.4257 9.27252 18.3618 9.3364Z"/>\
</svg>') no-repeat center / contain;
    opacity: .9;
}

/* ====== Hero (título/ícone) ====== */
.opc-hero{ text-align:center; padding: 20px 0 10px; }
.opc-icon{ color:#4CA7E0; display:block; margin: 0 auto 8px; }
.opc-title{
    font-size:48px; line-height:1.12; font-weight:300; color:#111827; margin: 0 0 6px;
}
.opc-sub{ color:#6B7280; margin:0; }

/* ====== Container dos campos ====== */
.opc-form{ max-width: 640px; margin: 14px auto 0; padding: 0 16px; }
.opc-stack{ display:flex; flex-direction:column; gap:18px; }

/* ====== Select grande com “caixinha” do chevron ====== */
.select-lg{ position:relative; }


/* aparência do <select> em si */
.select-lg > select{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    width:100%; height:56px; border:1px solid #E5E7EB; border-radius:6px;
    padding: 0 60px 0 18px; background:#fff; font-size:16px; color:#4B5563;
    box-shadow:none;
}
.select-lg > select:focus{
    border-color:#4CA7E0; outline:0; box-shadow: 0 0 0 3px rgba(60,84,209,.12);
}

/* rótulos escondidos porém acessíveis */
.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ====== Hero (título/ícone) ====== */
.opc-hero{ text-align:center; padding: 20px 0 10px; }
.opc-icon{ color:#4CA7E0; display:block; margin: 0 auto 8px; }
.opc-title{
    font-size:48px; line-height:1.12; font-weight:300; color:#111827; margin: 0 0 6px;
}
.opc-sub{ color:#6B7280; margin:0; }

/* ====== Container dos campos ====== */
.opc-form{ max-width: 640px; margin: 14px auto 0; padding: 0 16px; }
.opc-stack{ display:flex; flex-direction:column; gap:18px; }

/* ====== Select grande ====== */
.select-lg{ position: relative; }

.select-lg > select{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    width:100%;
    height:56px;
    border:1px solid #E5E7EB;
    border-radius:0px;
    padding:0 60px 0 18px;
    color: #73757B;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 300;
    background:#fff;
    background-image:
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23"><path fill="%2352575C" d="M18.36 9.34L11.49 16.21c-.06.06-.13.11-.21.15-.08.04-.17.06-.26.06s-.18-.02-.26-.06c-.08-.04-.15-.09-.21-.15L3.64 9.34A.85.85 0 0 1 4.13 8.16c.22 0 .4.09.48.2l6.39 6.39 6.39-6.39a.85.85 0 0 1 1.2 1.2z"/></svg>'),
            linear-gradient(#F8FAFC,#F8FAFC),
            linear-gradient(#FFFFFF,#FFFFFF);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: right 16px center, right 0 top, left 0 top;
    background-size: 22px 22px, 52px 100%, calc(100% - 52px) 100%;
}

.select-lg > select:focus{
    border-color:#4CA7E0; outline:0; box-shadow:0 0 0 3px rgba(60,84,209,.12);
}

.ec-result-hero{
    max-width: 1024px;
    margin: 12px auto 24px;
    padding: 36px 20px 28px;
    background: #F6F8FC;
    border-radius: 8px;
    text-align: center;
}
.ec-result-hero__icon{ margin-bottom: 10px; }
.ec-result-hero__title{
    font-size: 40px;
    line-height: 1.15;
    font-weight: 300;
    color: #111827;
    margin: 0 0 8px;
}
.ec-result-hero__sub{
    color: #6b7280;
    margin: 0 auto 16px;
    max-width: 760px;
}
.ec-result-hero__actions{ margin-top: 8px; }
.ec-btn-refazer{
    border: 1px solid #E5E7EB !important;
    border-radius: 6px;
    padding: 10px 16px !important;
    color: #111827 !important;
    background: #fff !important;
}
.ec-btn-refazer:hover{ background: #f9fafb !important; }

.ec-result-count{
    text-align: center;
    color: #4CA7E0;
    font-size: 32px;
    font-weight: 800;
    margin: 8px 0 22px;
}

.bg-produtos-results{
    width: 1075px;
    margin-left: auto;
    margin-right: auto;
}

.text-tab{
    font-size: 16px;
}

.btn-details {
    width: 77%!important;
}

@media (max-width: 1075px){
    .bg-produtos-results{
        width: 100%;
    }
    .text-tab{
        font-size: 14px;
    }
}


.ec-result-card{
    border:1px solid #e7ebf2;
}

.ec-spec .ec-spec-label{
    font-size:0.8rem;
    color:#7c8aa5;
    margin-bottom:2px;
}

.ec-spec .ec-spec-value{
    font-weight:600;
}

.bg-produtos-results{
    padding-top:8px;
}

.ref{
    color:  #4CA7E0;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    padding: 0;
}

/* layout base do card: mobile-first (empilhado) */
.ec-result-card{
    display:flex;
    flex-direction:column;
    padding:16px;
}

.ec-card-media{
    width:100%;
    max-width:420px;      /* limita imagem em telas muito estreitas */
    margin:0 auto 12px;   /* centraliza no mobile */
    flex:0 0 auto;
}

.ec-card-body{
    flex:1 1 auto;
}

/* grid de specs: 2 colunas no mobile, livre no desktop */
.ec-specs-row{
    display:flex;
    flex-wrap:wrap;
}
.ec-specs-row > .col-6,
.ec-specs-row > [class*="col-"]{
    flex:1 1 50%;
    max-width:50%;
}
.ec-spec .ec-spec-label{
    font-size:0.85rem;
    color:#7c8aa5;
    margin-bottom:2px;
}
.ec-spec .ec-spec-value{
    font-weight:600;
}

/* tipografia da faixa hero no mobile */
@media (max-width: 576px){
    .ec-result-hero{ padding:24px 16px; }
    .ec-result-hero__title{ font-size:26px; }
    .ec-result-count{ font-size:22px; }
}

/* a partir de md: imagem à esquerda fixa, conteúdo à direita */
@media (min-width: 768px){
    .ec-result-card{
        flex-direction:row;
        padding:20px;
        align-items:stretch;
    }
    .ec-card-media{
        width:220px;
        flex:0 0 220px;
        margin:0 16px 0 0;
    }
    .ec-specs-row{
        gap:0.5rem 1rem;
    }
    .ec-specs-row > .col-6,
    .ec-specs-row > [class*="col-"]{
        flex:0 0 auto;
        max-width:none;
    }
}

/* botões: empilhados no mobile, inline no desktop */
.d-grid.gap-2.d-md-flex .btn{
    white-space:nowrap;
}

.badge.ref{ white-space: normal; }
.badge.ref .ref-title{ white-space: nowrap; }