/* scroll bonito */
.hero-scroll{
    max-height: 520px;
    overflow:auto;
}

/* lista ativações */
.hero-activation-item{
    border:1px solid #e9e9ef;
    border-radius:10px;
    padding:10px;
    margin-bottom:10px;
    cursor:pointer;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.hero-activation-item:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); }

.hero-activation-left{ display:flex; gap:10px; align-items:center; }
.hero-flag{ width:26px; height:18px; object-fit:cover; border-radius:4px; }
.hero-activation-title{ font-weight:700; line-height:1.1; }
.hero-activation-sub{ font-size:12px; color:#777; }

.hero-activation-right{ text-align:right; }
.hero-phone{ font-weight:700; }
.hero-timer-badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid #d7d7ff;
    background:#f4f4ff;
    font-size:12px;
}

/* mobile tabs */
.hero-mobile-tabs{
    display:flex;
    gap:8px;
    margin:10px 0 14px 0;
}
.hero-tab-btn{
    flex:1;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid #e1e1ef;
    background:#fff;
    font-weight:600;
}
.hero-tab-btn.active{
    border-color:#6c63ff;
    box-shadow:0 6px 16px rgba(108,99,255,.18);
}

/* no mobile: panes são “telas” */
@media (max-width: 767px){
    .hero-scroll{ max-height: 380px; }
}

     /* CSS mínimo pra ficar apresentável mesmo sem tema carregado */
 .hero-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.hero-card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; background: #fff; }
.hero-title { font-weight: 700; margin: 0 0 8px 0; }
.hero-scroll { max-height: 65vh; overflow: auto; border-top: 1px solid #eee; padding-top: 8px; }
.hero-item { display: block; padding: 8px; border-radius: 6px; text-decoration: none; color: #111; border: 1px solid transparent; }
.hero-item:hover { background: #f6f6f6; border-color: #eee; }
.hero-item.active { background: #eef5ff; border-color: #cfe4ff; }
.hero-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid #ddd; }
.badge-ok { color: #0a7d2f; border-color: #bfe8cc; background: #eefaf2; }
.badge-no { color: #b40000; border-color: #f3c1c1; background: #fff1f1; }
.hero-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.small-muted { font-size: 12px; color:#666; }
     /* =========================================================
        HERO UI - RESPONSIVO (SEM MUDAR ESTRUTURA)
        ========================================================= */

     /* Base */
 * { box-sizing: border-box; }

.hero-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Card */
.hero-card{
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    min-width: 0; /* evita overflow em grid */
}

.hero-title{ font-weight: 700; margin: 0 0 8px 0; }

/* Scroll: desktop ok */
.hero-scroll{
    max-height: 65vh;
    overflow: auto;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

/* Item */
.hero-item{
    display: block;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #111;
    border: 1px solid transparent;
    min-width: 0;
    word-break: break-word;
}
.hero-item:hover{ background: #f6f6f6; border-color: #eee; }
.hero-item.active{ background: #eef5ff; border-color: #cfe4ff; }

/* Row flex */
.hero-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.small-muted{ font-size: 12px; color:#666; }

/* Badge */
.hero-badge{
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #ddd;
    white-space: nowrap;
}
.badge-ok{ color:#0a7d2f; border-color:#bfe8cc; background:#eefaf2; }
.badge-no{ color:#b40000; border-color:#f3c1c1; background:#fff1f1; }

/* Form (na coluna de serviços) sem mexer no HTML */
.hero-card form{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.hero-card form input[type="text"]{
    flex: 1 1 220px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.hero-card form button{
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
}

/* =========================================================
   BREAKPOINTS (SEM QUEBRAR LAYOUT)
   ========================================================= */

/* Tablet: 2 colunas */
@media (max-width: 992px){
    .hero-grid{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .hero-scroll{ max-height: 55vh; }
}

/* Mobile: 1 coluna + scroll vira fluxo normal (melhor UX) */
@media (max-width: 576px){
    .hero-grid{
        grid-template-columns: minmax(0, 1fr);
    }
    .hero-scroll{
        max-height: none;   /* lista cresce */
        overflow: visible;  /* scroll da página */
    }
    .hero-row{
        flex-wrap: wrap; /* badges não estouram */
        align-items: flex-start;
    }
    .hero-badge{
        margin-top: 6px;
    }
}

/* ================================
TEMPLATE MODE (vida no UI)
================================ */

/* Fundo + tipografia */
body{
    background: #f6f8fb;
    color:#111827;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Título */
h2{
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* Cards com sombra */
.hero-card{
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    transition: transform .12s ease, box-shadow .12s ease;
}
.hero-card:hover{
    box-shadow: 0 18px 38px rgba(15,23,42,.10);
}

/* Separadores mais clean */
.hero-scroll{
    border-top: 1px solid #eef2f7;
}

/* Itens “list row” estilo template */
.hero-item{
    border: 1px solid transparent;
    background: #fff;
    margin-bottom: 8px;
    box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.hero-item:hover{
    background: #f9fafb;
    border-color: #e5e7eb;
    transform: translateY(-1px);
}
.hero-item.active{
    background: #eef5ff;
    border-color: #cfe4ff;
}

/* Melhor grid no serviço: nome + badge + ícone */
.hero-item .hero-row{
    align-items: center;
}

/* Badge moderno */
.hero-badge{
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color:#374151;
    font-weight: 600;
}
.badge-ok{
    background: #eafaf0;
    border-color: #bfe8cc;
    color: #0a7d2f;
}
.badge-no{
    background: #fff1f1;
    border-color: #f3c1c1;
    color: #b40000;
}

/* Input + botão estilo SaaS */
.hero-card form input[type="text"]{
    border: 1px solid #e5e7eb;
    background: #fff;
    outline: none;
}
.hero-card form input[type="text"]:focus{
    border-color: #c7d2fe;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}

.hero-card form button{
    border: 1px solid #111827;
    background: #111827;
    color:#fff;
    font-weight: 700;
}
.hero-card form button:hover{
    filter: brightness(1.05);
}

/* Botão Comprar primário */
#detailBox button{
    border: 0 !important;
    background: #2563eb !important;
    color:#fff !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 22px rgba(37,99,235,.18) !important;
}
#detailBox button:hover{
    filter: brightness(1.03);
}

/* Scrollbar mais bonito */
.hero-scroll::-webkit-scrollbar{ width: 10px; }
.hero-scroll::-webkit-scrollbar-thumb{
    background: #d1d5db;
    border-radius: 999px;
    border: 2px solid #f9fafb;
}
.hero-scroll::-webkit-scrollbar-track{ background: #f9fafb; }

/* Países: bandeira alinhada (se tiver img dentro) */
.hero-item-country i
    /* tabs mobile */
.hero-mobile-tabs{ display:none; gap:8px; margin:12px 0; }
.hero-tab-btn{ flex:1; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; font-weight:800; }
.hero-tab-btn.active{ border-color:#6c63ff; box-shadow:0 10px 22px rgba(108,99,255,.18); }

/* panes */
.hero-pane{ display:block; }
@media (max-width: 767px){
    .hero-mobile-tabs{ display:flex; }
    .hero-pane{ display:none; }
    .hero-pane.is-active{ display:block; }
}