/* =============================================================================
   iDapta — landings por segmento (barbearia, salão, studio)
   Complemento do styles.css: só o que não existe lá. Mesmos tokens, mesmo
   mobile-first. Nada aqui redefine classe da página principal.
   ============================================================================= */

/* ============================== MOCK DE AGENDA ============================== */
.ag{
  background:var(--bg); border:1px solid var(--border); border-radius:14px;
  padding:10px; display:flex; flex-direction:column; gap:5px;
}
.ag-row{
  display:grid; grid-template-columns:38px repeat(var(--ag-cols),1fr); gap:5px; align-items:center;
}
.ag-head .ag-prof{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); text-align:center; padding-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ag-hour{font-size:9.5px; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums}
.ag-slot{
  font-size:10px; font-weight:600; color:var(--brand-700); background:var(--brand-050);
  border:1px solid var(--brand-100); border-radius:7px; padding:6px 5px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:28px;
  display:flex; align-items:center; justify-content:center;
}
/* O vão é o argumento da página: some com a cor cheia e ganha a borda tracejada. */
.ag-free{
  color:#b08a3c; background:repeating-linear-gradient(-45deg,#fff8e8,#fff8e8 5px,#fdf2d8 5px,#fdf2d8 10px);
  border:1px dashed #e6cf9a; font-weight:700;
}
.mock-row.ag-alert .mr-ic{background:#fff5e3}
.mock-row.ag-alert .mr-ic svg{color:#b08a3c; width:15px; height:15px}
.mock-row.ag-alert .mr-badge{color:var(--brand-700); background:var(--brand-050)}

/* ============================== OCUPAÇÃO ============================== */
.occ{
  background:linear-gradient(160deg,#123f5e,#1f7ba0); color:#fff;
  border-radius:var(--r-xl); padding:28px 22px; box-shadow:var(--shadow-brand);
}
.occ-grid{display:grid; grid-template-columns:1fr; gap:26px; align-items:center}
.occ h2{font-size:clamp(24px,6vw,36px); letter-spacing:-.03em; line-height:1.1; margin:14px 0 12px; color:#fff}
.occ p{font-size:15.5px; color:rgba(255,255,255,.86); line-height:1.6; max-width:52ch}
.eyebrow.light{color:#9fd3e8; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08)}
.occ-list{list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:20px}
.occ-list li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.94)}
.occ-list li svg{width:19px; height:19px; flex-shrink:0; margin-top:2px; color:#8fe0f0}
.occ-list b{font-weight:700; color:#fff}

.occ-panel{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-lg); padding:18px}
.occ-bar-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:14px}
.occ-bar-head b{font-size:14px; color:#fff}
.occ-bar-head span{font-size:11.5px; color:rgba(255,255,255,.65)}
.occ-bars{display:flex; flex-direction:column; gap:11px}
.occ-bar{display:grid; grid-template-columns:66px 1fr 38px; gap:10px; align-items:center}
.ob-name{font-size:12.5px; color:rgba(255,255,255,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ob-track{height:9px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden}
.ob-fill{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2bb6cf,#8fe0f0)}
.ob-val{font-size:12px; font-weight:700; color:#fff; text-align:right; font-variant-numeric:tabular-nums}
.occ-note{
  display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.22); font-size:12.5px; color:rgba(255,255,255,.82); line-height:1.5;
}
.occ-note svg{width:17px; height:17px; flex-shrink:0; color:#8fe0f0; margin-top:1px}
.occ-note b{color:#fff}

/* ============================== ROI ============================== */
.roi{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
  padding:24px 20px; box-shadow:var(--shadow-md); max-width:640px; margin-inline:auto;
}
.roi h3{font-size:17px; letter-spacing:-.02em; margin-bottom:16px}
.roi-rows{display:flex; flex-direction:column}
.roi-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:12px 0; border-bottom:1px dashed var(--border); font-size:14.5px; color:var(--ink-soft);
}
.roi-row span:last-child{font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.roi-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-top:16px; padding-top:16px; border-top:2px solid var(--brand-100);
}
.roi-total span:first-child{font-size:15px; font-weight:600}
.roi-total span:last-child{font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--brand-700); font-variant-numeric:tabular-nums}

/* ============================== PLANOS ============================== */
.planos{display:grid; grid-template-columns:1fr; gap:14px}
.plano{
  position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px 20px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-sm);
}
.plano-hi{border-color:var(--brand); box-shadow:var(--shadow-brand)}
.plano-badge{
  position:absolute; top:-11px; left:20px; background:var(--brand); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.plano-nome{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-700)}
.plano-preco{font-size:40px; font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.plano-preco small{font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0}
.plano-ate{font-size:13.5px; color:var(--muted); border-bottom:1px solid var(--border); padding-bottom:14px}
.plano-itens{list-style:none; display:flex; flex-direction:column; gap:9px; flex:1}
.plano-itens li{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--ink-soft); line-height:1.45}
.plano-itens li svg{width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--brand)}
.planos-nota{
  margin-top:18px; text-align:center; font-size:14px; color:var(--muted);
  max-width:60ch; margin-inline:auto; line-height:1.6;
}
.planos-nota b{color:var(--ink)}

/* ============================== IMPLANTAÇÃO ============================== */
.impl{display:flex; flex-direction:column; gap:0; max-width:760px; margin-inline:auto}
.impl-step{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:18px 0; border-bottom:1px solid var(--border);
}
.impl-step:last-child{border-bottom:0}
.impl-when{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-700); background:var(--brand-050); border:1px solid var(--brand-100);
  border-radius:999px; padding:4px 10px; justify-self:start;
}
.impl-step h4{font-size:16.5px; font-weight:700; letter-spacing:-.01em; margin-bottom:4px}
.impl-step p{font-size:14.5px; color:var(--muted); line-height:1.6}

/* ============================== BREAKPOINTS ============================== */
@media (min-width:600px){
  .planos{grid-template-columns:1fr 1fr}
  .roi{padding:28px 26px}
  .impl-step{grid-template-columns:104px 1fr; gap:20px; align-items:start}
  .impl-when{margin-top:3px}
}

@media (min-width:768px){
  .occ{padding:38px 34px}
  .ag-slot{font-size:10.5px}
}

@media (min-width:1024px){
  .planos{grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
  .occ{padding:46px 44px}
  .occ-grid{grid-template-columns:1.05fr .95fr; gap:48px}
  .roi{padding:32px 32px}
}