/* Etapa 5.2 — variacoes visuais por template (FASE 8-13).
   Escopo por classe no <body>: .tpl-classico / .tpl-moderno / .tpl-minimal.
   Apenas apresentacao — nenhuma regra de negocio depende deste CSS. */

/* ============ TEMPLATE 2 — MODERNO (cards grandes, mobile-first) ============ */
/* ETAPA 4.6: header slim horizontal — marca à esquerda, nav à direita.
   Antes era um banner centralizado que se empilhava com o hero. */
.tpl-moderno .mod-header {
    background: linear-gradient(120deg, var(--secondary-color, #0a4a9e), var(--primary-color, #1769e8));
    color: #fff; padding: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 2px 12px rgba(8,25,52,.18);
}
.tpl-moderno .mod-header .container {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; min-height: 100px; padding-top: 0; padding-bottom: 0;
}
.tpl-moderno .mod-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tpl-moderno .mod-brand h1 {
    margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff;
    letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Logo do parceiro — visivel sem dominar o header; object-fit contain
   comporta formatos quadrados, horizontais e verticais sem cortes. */
.tpl-moderno .mod-logo {
    max-height: 80px; max-width: 260px; width: auto; height: auto;
    object-fit: contain; border-radius: 12px; background: #fff; padding: 5px;
    flex-shrink: 0; box-shadow: 0 2px 8px rgba(8,25,52,.18);
}
/* Fallback da marca: iniciais quando o parceiro nao tem logo ou ela falha. */
.tpl-moderno .mod-logo-fallback {
    width: 80px; height: 80px; border-radius: 14px; flex-shrink: 0;
    background: #fff; color: var(--primary-color, #1769e8);
    font-weight: 800; font-size: 1.5rem; letter-spacing: .02em;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(8,25,52,.18);
}
.tpl-moderno .mod-tagline {
    opacity: .82; margin: 0; font-size: .82rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-left: 1px solid rgba(255,255,255,.28); padding-left: 10px;
}
.tpl-moderno .mod-nav { display: flex; gap: 6px; flex-shrink: 0; }
.tpl-moderno .mod-pill {
    background: rgba(255,255,255,.14); color: #fff; padding: 7px 16px;
    border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .85rem;
    transition: background .12s, color .12s;
}
.tpl-moderno .mod-pill.active, .tpl-moderno .mod-pill:hover { background: #fff; color: var(--primary-color, #1769e8); }
.tpl-moderno .mod-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tpl-moderno .mod-main .service-card,
.tpl-moderno .service-card {
    border-radius: 18px; box-shadow: 0 4px 18px rgba(16,42,90,.10);
    border: none; transition: transform .12s ease, box-shadow .12s ease;
}
.tpl-moderno .service-card:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(16,42,90,.16); }
.tpl-moderno .mod-footer { background: #10233f; color: #cbd7ea; margin-top: 28px; padding: 30px 0 26px; }
.tpl-moderno .mod-footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.tpl-moderno .mod-footer-grid p { margin: 3px 0 0; }
.tpl-moderno .mod-copy { opacity: .7; font-size: .8rem; margin: 8px 0 0; }
.tpl-moderno .btn, .tpl-moderno button { border-radius: 12px; font-size: 1.05rem; padding: 14px 26px; }
@media (max-width: 640px) {
    .tpl-moderno .mod-header .container { min-height: 80px; gap: 10px; }
    .tpl-moderno .mod-brand h1 { font-size: 1rem; }
    .tpl-moderno .mod-brand { gap: 10px; }
    .tpl-moderno .mod-logo { max-height: 62px; max-width: 132px; border-radius: 10px; padding: 4px; }
    .tpl-moderno .mod-logo-fallback { width: 62px; height: 62px; font-size: 1.1rem; border-radius: 12px; }
    .tpl-moderno .mod-footer { padding: 24px 0 22px; }
    .tpl-moderno .mod-footer-grid { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    .tpl-moderno .mod-tagline { display: none; }   /* slim: some no mobile */
    .tpl-moderno .mod-pill { padding: 6px 12px; font-size: .8rem; }
    .tpl-moderno .service-card { font-size: 1.02rem; }
}

/* ============ TEMPLATE 3 — MINIMAL (compacto, acesso rapido) ============ */
.tpl-minimal .min-header { background: var(--primary-color, #1769e8); padding: 8px 0; }
.tpl-minimal .min-header-row { display: flex; align-items: center; justify-content: space-between; }
.tpl-minimal .min-brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; }
.tpl-minimal .min-logo { max-height: 64px; max-width: 190px; width: auto; height: auto; object-fit: contain; border-radius: 9px; background: #fff; padding: 4px; flex-shrink: 0; }
.tpl-minimal .min-logo-fallback {
    width: 58px; height: 58px; border-radius: 10px; flex-shrink: 0;
    background: #fff; color: var(--primary-color, #1769e8); font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
}
.tpl-minimal .min-nav a { color: #fff; opacity: .85; margin-left: 14px; text-decoration: none; font-size: .95rem; }
.tpl-minimal .min-nav a.active, .tpl-minimal .min-nav a:hover { opacity: 1; text-decoration: underline; }
.tpl-minimal .min-steps { display: flex; gap: 6px; justify-content: center; padding: 10px 0 0; }
.tpl-minimal .min-dot { width: 26px; height: 4px; border-radius: 2px; background: #d4dbe6; }
.tpl-minimal .min-dot.on { background: var(--primary-color, #1769e8); }
.tpl-minimal .min-main { padding: 18px 0; }
.tpl-minimal .service-card { border-radius: 8px; padding: 12px 14px; }
.tpl-minimal .min-footer { border-top: 1px solid #e2e8f0; padding: 12px 0; font-size: .85rem; color: #5b6770; }
.tpl-minimal .min-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.tpl-minimal .min-footer .ms-footer-pay { flex: 1; justify-content: center; margin: 6px 0 0; }
.tpl-minimal .btn, .tpl-minimal button { border-radius: 8px; padding: 10px 18px; }
.tpl-minimal h1, .tpl-minimal h2 { font-size: 1.25rem; }

/* ============ TEMPLATE 1 — CLASSICO ============ */
/* O classico e' o layout base do style.css; aqui so ajustes finos. */
.tpl-classico .site-header h1 { letter-spacing: .2px; }