/*
 * Landings de serviço no design system da home (#iotiza-v0).
 * Carregado depois de home-vercel.css, somente nas landings migradas.
 */

/* Hero */
#iotiza-v0.v-landing .v-hero{padding-bottom:76px}
#iotiza-v0.v-landing h1{font-size:clamp(34px,4.1vw,52px);max-width:600px;margin:18px 0 22px;text-wrap:balance}
#iotiza-v0.v-landing .v-lead{max-width:560px}
#iotiza-v0.v-landing .v-capabilities{max-width:640px}
#iotiza-v0 .v-capability-icon--alert{--capability-icon:url('../img/alerttriangle_white.svg')}
#iotiza-v0 .v-breadcrumb{display:flex;gap:8px;align-items:center;margin-bottom:16px;font-size:11px;color:#9e97b0}
#iotiza-v0 .v-breadcrumb a{color:#c4bdd2;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ffffff33}
#iotiza-v0 .v-breadcrumb a:hover{color:#fff}

/* Selo do Google reCAPTCHA oculto: a atribuição exigida pelo Google fica no texto do formulário. */
.grecaptcha-badge{visibility:hidden!important}

/* Textos de apoio das seções */
#iotiza-v0 .v-intro{max-width:640px;margin-top:16px;color:var(--v-muted);font-size:13px;line-height:1.8}
#iotiza-v0.v-landing .v-section h2{max-width:760px;text-wrap:balance}

/* Como funciona: passos */
#iotiza-v0 .v-steps{list-style:none;margin:0;padding:0}
#iotiza-v0 .v-step{align-items:flex-start}
#iotiza-v0 .v-step-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:#26cbc714;border:1px solid #26cbc733;color:var(--v-teal)}
#iotiza-v0 .v-step-icon svg{width:20px;height:20px}
#iotiza-v0 .v-step h3{font-size:13px}
#iotiza-v0 .v-step p{font-size:12px}

/* Bento de quatro colunas */
#iotiza-v0 .v-bento.v-bento--four{grid-template-columns:repeat(4,minmax(0,1fr))}
#iotiza-v0 .v-bento--four .v-benefit>svg{color:var(--v-teal)}
@media(max-width:1000px){#iotiza-v0 .v-bento.v-bento--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){#iotiza-v0 .v-bento.v-bento--four{grid-template-columns:minmax(0,1fr)}}

/* Para síndicos: texto + checklist */
#iotiza-v0 .v-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
#iotiza-v0 .v-split .v-tags{margin-top:22px}
#iotiza-v0 .v-checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#iotiza-v0 .v-checklist li{display:flex;gap:13px;align-items:flex-start;background:var(--v-panel);border:1px solid var(--v-border);border-radius:15px;padding:16px 18px;font-size:13px;font-weight:600;color:#e9e4f2;line-height:1.55}
#iotiza-v0 .v-checklist svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px;color:var(--v-teal)}

/* Comparativo */
#iotiza-v0 .v-compare{margin-top:32px;border:1px solid var(--v-border);border-radius:20px;overflow:hidden;background:var(--v-panel)}
#iotiza-v0 .v-compare table{width:100%;border-collapse:collapse;font-size:12px}
#iotiza-v0 .v-compare th,#iotiza-v0 .v-compare td{padding:15px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--v-border)}
#iotiza-v0 .v-compare tbody tr:last-child>*{border-bottom:0}
#iotiza-v0 .v-compare thead th{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a49cb8;background:#13131d}
#iotiza-v0 .v-compare thead th:last-child{color:var(--v-teal)}
#iotiza-v0 .v-compare tbody th{font-weight:700;color:#eee8f8;width:28%}
#iotiza-v0 .v-compare td{color:var(--v-muted)}
#iotiza-v0 .v-compare td:last-child{color:#eee8f8;background:#9854ff0d}
#iotiza-v0 .v-compare td svg{width:14px;height:14px;color:var(--v-teal);vertical-align:-2px;margin-right:8px}
#iotiza-v0 .v-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}

/* Link para serviços relacionados */
#iotiza-v0 .v-related{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:16px 20px;border:1px dashed #b89bff40;border-radius:15px;font-size:13px;color:#d6cfe4;max-width:760px}
#iotiza-v0 .v-related svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--v-teal)}
#iotiza-v0 .v-related a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--v-teal);text-underline-offset:3px}
#iotiza-v0 .v-related a:hover{color:var(--v-teal)}

/* Segmentos sem imagem */
#iotiza-v0 .v-segment--text{min-height:180px;background:linear-gradient(140deg,#39245388,var(--v-panel) 70%)}

/* CTA final */
#iotiza-v0.v-landing .v-kicker .v-label{text-align:center}

@media(max-width:800px){
    #iotiza-v0 .v-split{grid-template-columns:1fr;gap:28px}
}
@media(max-width:600px){
    #iotiza-v0.v-landing h1{font-size:32px}
    #iotiza-v0.v-landing .v-hero{padding-bottom:48px}
    #iotiza-v0 .v-compare{border-radius:16px}
    #iotiza-v0 .v-compare thead{display:none}
    #iotiza-v0 .v-compare tr{display:block;padding:14px 16px;border-bottom:1px solid var(--v-border)}
    #iotiza-v0 .v-compare tbody tr:last-child{border-bottom:0}
    #iotiza-v0 .v-compare th,#iotiza-v0 .v-compare td{display:block;padding:0;border:0;width:auto;background:none}
    #iotiza-v0 .v-compare tbody th{margin-bottom:8px;font-size:13px;width:auto}
    #iotiza-v0 .v-bento--four .v-benefit>svg{margin:4px 0 14px}
    #iotiza-v0 .v-bento--four .v-benefit{padding:18px 20px}
    #iotiza-v0 .v-compare td{font-size:12px;margin-top:6px}
    #iotiza-v0 .v-compare td::before{content:attr(data-label) ": ";font-weight:700;color:#a49cb8}
    #iotiza-v0 .v-compare td:last-child{background:none}
    #iotiza-v0 .v-compare td:last-child::before{color:var(--v-teal)}
    #iotiza-v0 .v-compare td:last-child svg{display:none}
}