/* ============================================================
   SEMELC — Design System
   Paleta: Vermelho · Preto · Prata
   ============================================================ */

:root {
  --brand-dark:   #1A1A1A;   /* preto principal */
  --brand-mid:    #8B0000;   /* vermelho escuro */
  --brand-accent: #CC0000;   /* vermelho primário */
  --brand-light:  #FDECEA;   /* vermelho claro (fundo) */
  --silver:       #9E9E9E;   /* prata */
  --silver-light: #E8E8E8;   /* prata claro */
  --orange:       #CC0000;   /* mantido como vermelho */
  --red:          #C0392B;
  --gray-light:   #F4F4F4;
  --gray-mid:     #D5D5D5;
  --text-dark:    #1A1A1A;
  --text-mid:     #5D5D5D;
  --white:        #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
}

/* ── Nav ── */
.nav {
  background: var(--brand-dark);
  padding: 0 1.5rem;
  /* safe-area: evita a logo/menu sob a barra de status / notch no celular */
  padding-top: env(safe-area-inset-top);
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(68px + env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
  border-bottom: 2px solid var(--brand-accent);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.nav-logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
}
/* Fallback se a logo não carregar */
.nav-logo-icon {
  width: 42px;
  height: 42px;
  background: var(--brand-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.nav-logo-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: .5px;
  line-height: 1.1;
}
.nav-logo-text span { color: var(--brand-accent); }
.nav-logo-sub {
  display: block;
  font-size: .65rem;
  font-weight: 400;
  color: var(--silver);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-link {
  color: #D0D0D0;
  text-decoration: none;
  font-size: .9rem;
  transition: color .2s;
}
.nav-link:hover { color: var(--brand-accent); }
.nav-cta {
  background: var(--brand-accent);
  color: var(--white) !important;
  font-weight: 700;
  padding: .45rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: .9rem;
  transition: background .2s;
}
.nav-cta:hover { background: var(--brand-mid); }
.nav-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: .4rem;
}
.nav-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.8rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all .2s;
  line-height: 1;
}
.btn-primary {
  background: var(--brand-accent);
  color: var(--white);
}
.btn-primary:hover { background: var(--brand-mid); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(204,0,0,.4); }
.btn-secondary {
  background: transparent;
  color: var(--brand-accent);
  border: 2px solid var(--brand-accent);
}
.btn-secondary:hover { background: var(--brand-accent); color: var(--white); }
.btn-dark {
  background: var(--brand-dark);
  color: var(--white);
}
.btn-dark:hover { background: #333333; }
.btn-white {
  background: var(--white);
  color: var(--brand-dark);
}
.btn-white:hover { background: var(--gray-light); }
.btn-lg { padding: 1rem 2.5rem; font-size: 1.1rem; }
.btn-sm { padding: .5rem 1.2rem; font-size: .875rem; }
.btn-full { width: 100%; }
.btn-whatsapp {
  background: #25D366;
  color: var(--white);
}
.btn-whatsapp:hover { background: #1ebe5a; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,211,102,.4); }

/* ── Hero ── */
.hero {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D0000 60%, #000000 100%);
  color: var(--white);
  padding: 5rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23CC0000' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}
.hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(204,0,0,.15);
  border: 1px solid rgba(204,0,0,.4);
  color: #FF6666;
  padding: .35rem 1rem;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.2rem;
}
.hero h1 span { color: var(--brand-accent); }
.hero p {
  font-size: 1.15rem;
  color: #D0D0D0;
  margin-bottom: 2.5rem;
  max-width: 600px;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}
.hero-stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--brand-accent);
}
.hero-stat-label { font-size: .85rem; color: #D0D0D0; }

/* ── Sections ── */
.section { padding: 4rem 1.5rem; }
.section-alt { background: var(--gray-light); }
.container { max-width: 1100px; margin: 0 auto; }
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: .6rem;
}
.section-subtitle { color: var(--text-mid); margin-bottom: 3rem; font-size: 1.05rem; }

/* ── Cards ── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.card {
  background: var(--white);
  border-radius: 12px;
  padding: 1.8rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: all .25s;
  border: 1px solid var(--gray-mid);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(204,0,0,.15); border-color: var(--brand-accent); }
.card-icon {
  width: 52px;
  height: 52px;
  background: var(--gray-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.card-icon-accent { background: rgba(204,0,0,.10); }
.card h3 { font-size: 1.1rem; font-weight: 700; color: var(--brand-dark); margin-bottom: .5rem; }
.card p { color: var(--text-mid); font-size: .9rem; }
.card-accent { border-top: 3px solid var(--brand-accent); }
.card-selected { border-color: var(--brand-accent); background: var(--brand-light); }

/* ── Plan Cards ── */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.plan-card {
  background: var(--white);
  border-radius: 16px;
  border: 2px solid var(--gray-mid);
  overflow: hidden;
  transition: all .25s;
  position: relative;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(204,0,0,.2); }
.plan-card.featured { border-color: var(--brand-accent); }
.plan-card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--brand-accent);
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 20px;
}
.plan-card-header {
  background: var(--brand-dark);
  padding: 1.5rem;
  color: var(--white);
  position: relative;
}
.plan-card-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-accent);
}
.plan-card-header h3 { font-size: 1.1rem; font-weight: 700; }
.plan-card-header .plan-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-accent);
  margin-top: .5rem;
}
.plan-card-header .plan-price-label { font-size: .8rem; color: #D0D0D0; }
.plan-card-header .plan-adhesion { font-size: .85rem; color: #D0D0D0; margin-top: .3rem; }
.plan-card-body { padding: 1.5rem; }
.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .4rem 0;
  font-size: .9rem;
  color: var(--text-dark);
  border-bottom: 1px solid var(--gray-light);
}
.plan-feature:last-child { border-bottom: none; }
.plan-feature-icon { color: var(--brand-accent); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }

/* ── Forms ── */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: .4rem;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--gray-mid);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(204,0,0,.12);
}
.form-input.error { border-color: var(--red); }
.form-error { color: var(--red); font-size: .82rem; margin-top: .3rem; }
.form-hint { color: var(--text-mid); font-size: .82rem; margin-top: .3rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-card {
  background: var(--white);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  max-width: 520px;
  margin: 0 auto;
}

/* ── CPF Gate ── */
.cpf-gate {
  min-height: 100vh;
  background: linear-gradient(135deg, #1A1A1A, #2D0000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}
.cpf-card {
  background: var(--white);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  text-align: center;
  border-top: 4px solid var(--brand-accent);
}
.cpf-card .shield { font-size: 3.5rem; margin-bottom: 1rem; }
.cpf-card h2 { font-size: 1.6rem; font-weight: 800; color: var(--brand-dark); margin-bottom: .5rem; }
.cpf-card p { color: var(--text-mid); margin-bottom: 2rem; font-size: .95rem; }
.cpf-input-wrapper { position: relative; margin-bottom: 1rem; }
.cpf-input-wrapper .cpf-input {
  width: 100%;
  padding: 1rem 1.2rem;
  font-size: 1.3rem;
  letter-spacing: .15em;
  text-align: center;
  border: 2px solid var(--gray-mid);
  border-radius: 10px;
  outline: none;
  transition: border-color .2s;
  font-weight: 700;
}
.cpf-input:focus { border-color: var(--brand-accent); }
.cpf-input.valid { border-color: var(--brand-accent); background: var(--brand-light); }
.cpf-input.invalid { border-color: var(--red); background: #fff5f5; }
.lgpd-note {
  background: var(--gray-light);
  border-radius: 8px;
  padding: .8rem 1rem;
  font-size: .8rem;
  color: var(--text-mid);
  margin-top: 1.5rem;
  text-align: left;
}

/* ── Profile Cards ── */
.profile-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
.profile-card {
  background: var(--white);
  border: 2px solid var(--gray-mid);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.profile-card:hover { border-color: var(--brand-accent); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(204,0,0,.15); }
.profile-card .profile-icon { font-size: 3rem; margin-bottom: 1rem; }
.profile-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--brand-dark); margin-bottom: .5rem; }
.profile-card p { color: var(--text-mid); font-size: .9rem; margin-bottom: 1.2rem; }
.profile-tags { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.profile-tag {
  background: var(--gray-light);
  color: var(--text-mid);
  padding: .25rem .7rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}

/* ── Checkmark list ── */
.check-list { list-style: none; margin: 1rem 0; }
.check-list li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .4rem 0;
  font-size: .95rem;
}
.check-list li::before { content: '✅'; flex-shrink: 0; }

/* ── Alert / info box ── */
.alert {
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-size: .9rem;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.alert-info { background: #F5F5F5; border-left: 4px solid var(--silver); color: var(--text-dark); }
.alert-warning { background: var(--brand-light); border-left: 4px solid var(--brand-accent); color: var(--brand-mid); }
.alert-success { background: #EAFAF1; border-left: 4px solid #27AE60; color: #1E8449; }

/* ── WhatsApp floating button ── */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 20px rgba(37,211,102,.5);
  text-decoration: none;
  z-index: 999;
  transition: transform .2s;
  animation: pulse-wa 2s infinite;
}
.whatsapp-float:hover { transform: scale(1.1); }
@keyframes pulse-wa {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); }
  50% { box-shadow: 0 4px 30px rgba(37,211,102,.8); }
}

/* ── Breadcrumb ── */
.breadcrumb {
  background: var(--gray-light);
  padding: .75rem 1.5rem;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-mid);
  border-bottom: 1px solid var(--gray-mid);
}
.breadcrumb a { color: var(--brand-accent); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-mid); }

/* ── Steps ── */
.steps { display: flex; gap: 0; margin: 2rem 0; }
.step {
  flex: 1;
  text-align: center;
  padding: .75rem .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-mid);
  background: var(--gray-light);
  border-right: 2px solid var(--white);
  position: relative;
}
.step:last-child { border-right: none; }
.step.active { background: var(--brand-dark); color: var(--white); }
.step.done { background: var(--brand-accent); color: var(--white); }
.step-num {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: .15rem;
}

/* ── Footer ── */
.footer {
  background: var(--brand-dark);
  color: #D0D0D0;
  padding: 3rem 1.5rem 1.5rem;
  border-top: 3px solid var(--brand-accent);
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; }
.footer h4 { color: var(--white); font-size: .95rem; font-weight: 700; margin-bottom: 1rem; }
.footer a { color: #D0D0D0; text-decoration: none; font-size: .9rem; display: block; padding: .2rem 0; transition: color .2s; }
.footer a:hover { color: var(--brand-accent); }
.footer-bottom { text-align: center; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: var(--silver); max-width: 1100px; margin: 2rem auto 0; }
.footer-logo { font-size: 1.3rem; font-weight: 800; color: var(--white); margin-bottom: .3rem; }
.footer-logo span { color: var(--brand-accent); }
.footer-sub { font-size: .75rem; color: var(--silver); text-transform: uppercase; letter-spacing: .5px; }

/* ── Confirmation ── */
.confirmation-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: var(--gray-light);
}
.confirmation-card {
  background: var(--white);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  max-width: 540px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  border-top: 4px solid var(--brand-accent);
}
.confirmation-card .check-circle {
  width: 80px;
  height: 80px;
  background: var(--brand-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin: 0 auto 1.5rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; position: fixed; top: calc(68px + env(safe-area-inset-top)); left: 0; right: 0; background: var(--brand-dark); padding: 1.5rem; gap: 1rem; z-index: 99; border-top: 2px solid var(--brand-accent); }
  .nav-menu-btn { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 3rem 1.5rem; }
  .hero-stats { gap: 1.5rem; }
  .steps { display: none; }
  .cpf-card { padding: 2rem 1.5rem; }
}

/* ── Page header ── */
.page-header {
  background: linear-gradient(135deg, #1A1A1A, #2D0000);
  color: var(--white);
  padding: 3rem 1.5rem;
  border-bottom: 3px solid var(--brand-accent);
}
.page-header h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; }
.page-header p { color: #D0D0D0; margin-top: .5rem; }

/* ── Service tabs ── */
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.tab {
  padding: .6rem 1.4rem;
  border-radius: 24px;
  border: 2px solid var(--gray-mid);
  background: var(--white);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: all .2s;
}
.tab:hover, .tab.active { border-color: var(--brand-accent); background: var(--brand-accent); color: var(--white); }

/* ── Price note ── */
.price-note {
  background: var(--brand-light);
  border: 1px solid rgba(204,0,0,.2);
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--brand-mid);
  margin-top: 1.5rem;
}

/* ── Client area ── */
.client-sidebar {
  background: var(--brand-dark);
  color: var(--white);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #333;
}
.client-sidebar .menu-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  transition: background .2s;
  color: #D0D0D0;
  margin-bottom: .2rem;
}
.client-sidebar .menu-item:hover, .client-sidebar .menu-item.active { background: rgba(204,0,0,.25); color: var(--white); }
.client-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 768px) { .client-layout { grid-template-columns: 1fr; } }

/* ── Table ── */
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th { background: var(--brand-dark); color: var(--white); padding: .75rem 1rem; text-align: left; font-weight: 600; font-size: .85rem; border-bottom: 2px solid var(--brand-accent); }
.data-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--gray-mid); }
.data-table tr:hover td { background: var(--gray-light); }
.badge { display: inline-block; padding: .2rem .7rem; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.badge-green { background: #D5F5E3; color: #1E8449; }
.badge-yellow { background: #FEF9E7; color: #7D6608; }
.badge-red { background: #FADBD8; color: #C0392B; }
.badge-blue { background: #E8E8E8; color: #333333; }

/* ── Divisor com vermelho ── */
.accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-mid), transparent);
  margin-bottom: 2rem;
}

/* ── Transitions ── */
.fade-in { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ════════════════════════════════════════════════════════════════════════
   VIDRO LÍQUIDO — Fase 2 do redesign (v4.63.0)
   Mesma linguagem do CRM (crm-server/public/css/vidro.css): vermelho da marca
   #B11F2C com degradê, prata metálico, vidro fosco e micro-interações.
   Camada ADITIVA no fim do arquivo — para reverter, apague deste bloco p/ baixo.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --brand-mid:#8E1622;                 /* alinha o vermelho ao da marca */
  --brand-accent:#B11F2C;
  --brand-light:#FBE8EA;
  --silver:#9AA4B2; --silver-light:#E6EAF0;
  --vl-grad:linear-gradient(135deg,#D7273A 0%,#B11F2C 55%,#8E1622 100%);
  --vl-glow:0 8px 26px -8px rgba(177,31,44,.45);
  --vl-fio:linear-gradient(90deg,transparent,rgba(154,164,178,.85),transparent);
  --vl-sombra:0 2px 4px rgba(16,24,40,.05),0 14px 32px -10px rgba(16,24,40,.16);
  --vl-easing:cubic-bezier(.32,.8,.24,1);
}

/* navegação: vidro escuro fosco com fio metálico */
.nav{
  background:linear-gradient(160deg,rgba(255,255,255,.06),transparent 50%),rgba(16,18,22,.78);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 12px rgba(0,0,0,.35);
}
.nav::after{content:'';position:absolute;left:8%;right:8%;bottom:-1px;height:1px;background:var(--vl-fio);opacity:.7}
.nav{position:sticky}

/* hero: glow da marca + profundidade */
.hero{background:
  radial-gradient(900px 420px at 80% -10%, rgba(215,39,58,.30), transparent 60%),
  radial-gradient(700px 380px at -10% 110%, rgba(154,164,178,.14), transparent 55%),
  linear-gradient(135deg,#15161A 0%,#23070B 60%,#0A0A0C 100%)}

/* botões: degradê da marca + resposta ao toque.
   !important só no visual do botão primário: várias páginas do portal redefinem
   .btn-primary em <style> próprio (que carrega depois desta folha). */
.btn{transition:transform .14s var(--vl-easing),box-shadow .18s var(--vl-easing),filter .15s}
.btn-primary{background:var(--vl-grad)!important;box-shadow:var(--vl-glow)!important;transition:transform .14s var(--vl-easing),filter .15s,box-shadow .18s var(--vl-easing)}
.btn-primary:hover{background:var(--vl-grad)!important;filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--vl-glow)!important}
.btn-primary:active{transform:scale(.98)}
.btn-secondary{border-width:1.5px}
.btn-secondary:hover{background:var(--brand-accent)}

/* cards: raio maior, sombra em camadas, elevação no hover, fio prata no topo */
.card, .step-card, .confirmation-card{
  border-radius:14px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 1px rgba(16,24,40,.03);
  transition:transform .18s var(--vl-easing),box-shadow .18s var(--vl-easing);
}
.card::before, .step-card::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:var(--vl-fio);opacity:.55;
}
.card:hover, .step-card:hover{transform:translateY(-2px);box-shadow:var(--vl-sombra)}

/* tabela e badges em pílula (área do cliente) */
.data-table th{background:#1A1C21;border-bottom:2px solid var(--brand-accent)}
.badge{border-radius:999px}
.accent-bar{background:linear-gradient(90deg,var(--brand-accent),var(--brand-mid),transparent)}

/* respeito a quem prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  .btn,.card,.step-card{transition:none}
  .btn-primary:hover,.card:hover,.step-card:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════════════════
   VIDRO LÍQUIDO — FASE 3 (v4.64.0)
   Aplicação completa do pacote "SEMELC Portal Cliente — Vidro Líquido":
   navbar flutuante em cápsula de vidro, fundo com luz da marca, Space
   Grotesk nos títulos e preços, cards/abas/formulários de vidro e
   otimização mobile (alvos de toque, sem zoom no iOS).
   Camada ADITIVA: para reverter, apague deste comentário até o fim.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── fontes (variáveis, subset latin — pt-BR completo) ─── */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url("fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ─── tokens da fase 3 ─── */
:root{
  --vl-bg:#F3F4F7;
  --vl-vidro:rgba(255,255,255,.44);--vl-vidro-2:rgba(255,255,255,.34);
  --vl-vidro-borda:rgba(255,255,255,.85);
  --vl-vidro-brilho:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.25);
  --vl-desfoque:saturate(160%) blur(14px);
  --vl-ring:rgba(177,31,44,.32);
  --vl-r:16px;--vl-r-g:24px;--vl-pill:999px;
  --vl-shadow-lg:0 16px 40px -10px rgba(16,24,40,.22);
}

/* ─── base: Inter de verdade + fundo com a luz da marca ─── */
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'cv05' 1,'ss01' 1;
  background:
    radial-gradient(46% 56% at 4% 0%, rgba(177,31,44,.10), transparent 70%),
    radial-gradient(52% 64% at 98% 30%, rgba(154,164,178,.18), transparent 72%),
    radial-gradient(40% 50% at 50% 100%, rgba(177,31,44,.06), transparent 70%),
    var(--vl-bg);
}
.tnum{font-variant-numeric:tabular-nums}

/* ─── navbar: cápsula de vidro escuro flutuante ─── */
.nav{
  margin:0 auto;
  max-width:1100px;
  width:calc(100% - 24px);
  top:max(10px, env(safe-area-inset-top));
  height:68px;
  padding:0 1rem 0 1.2rem;
  border-radius:var(--vl-r-g);
  border:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(165deg, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(120% 80% at 88% -12%, rgba(177,31,44,.20), transparent 58%),
    rgba(13,15,20,.80);
  -webkit-backdrop-filter:var(--vl-desfoque);backdrop-filter:var(--vl-desfoque);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 24px -12px rgba(8,10,14,.50);
}
.nav::after{display:none}
.nav-link{padding:.5rem .9rem;border-radius:var(--vl-pill);transition:background .15s,color .15s}
.nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-cta{border-radius:var(--vl-pill);background:var(--vl-grad);box-shadow:var(--vl-glow),inset 0 1px 0 rgba(255,255,255,.22)}
.nav-cta:hover{background:var(--vl-grad);filter:brightness(1.08)}
/* menu mobile acompanha a cápsula */
@media (max-width:768px){
  .nav-links.open{
    top:calc(86px + env(safe-area-inset-top));left:12px;right:12px;
    border-radius:var(--vl-r-g);border:1px solid rgba(255,255,255,.12);border-top:none;
    background:
      linear-gradient(165deg, rgba(255,255,255,.09), transparent 38%),
      rgba(13,15,20,.92);
    -webkit-backdrop-filter:var(--vl-desfoque);backdrop-filter:var(--vl-desfoque);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--vl-shadow-lg);
  }
  .nav-links.open .nav-link{min-height:48px;display:flex;align-items:center}
}

/* ─── tipografia display: títulos e números em Space Grotesk ─── */
.hero h1,.section-title,.page-header h1,.cpf-card h2,.confirmation-card h2,
.plan-price,.hero-stat-num,.svc-de,.sum-val,.summary-value,.step-num{
  font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.5px;
}
.plan-price,.hero-stat-num,.sum-val,.summary-value{font-variant-numeric:tabular-nums}

/* ─── botões: pílulas líquidas + alvo de toque ─── */
.btn{border-radius:var(--vl-pill);min-height:44px}
.btn-primary{box-shadow:var(--vl-glow),inset 0 1px 0 rgba(255,255,255,.22)!important}
.btn-secondary{
  border:1px solid rgba(177,31,44,.55);color:var(--brand-accent);
  background:linear-gradient(160deg, var(--vl-vidro-2), transparent 55%),
             color-mix(in srgb, #FFFFFF 88%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-secondary:hover{background:color-mix(in srgb, var(--brand-light) 90%, #fff);color:var(--brand-accent)}
.btn-dark,.btn-white{border-radius:var(--vl-pill)}
.btn-whatsapp{border-radius:var(--vl-pill)}
.btn:active{transform:scale(.97)}
.nav-cta:active{transform:scale(.97)}

/* ─── cards: vidro, raio grande e fio prata ─── */
.card,.profile-card,.svc-card,.opc-card,.step-card,.form-card,.cpf-card,.confirmation-card{
  border-radius:var(--vl-r-g);position:relative;overflow:hidden;
  border:1px solid var(--vl-vidro-borda);
  background:linear-gradient(160deg, var(--vl-vidro-2), transparent 46%),
             color-mix(in srgb, #FFFFFF 80%, transparent);
  -webkit-backdrop-filter:var(--vl-desfoque);backdrop-filter:var(--vl-desfoque);
  box-shadow:var(--vl-vidro-brilho), 0 1px 2px rgba(16,24,40,.05);
}
.card::before,.step-card::before,.profile-card::before,.svc-card::before,
.opc-card::before,.form-card::before,.cpf-card::before,.confirmation-card::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:var(--vl-fio);opacity:.7;pointer-events:none;
}
.card:hover,.profile-card:hover,.svc-card:hover,.opc-card:hover,.step-card:hover{
  transform:translateY(-4px);box-shadow:var(--vl-vidro-brilho),var(--vl-sombra);border-color:var(--silver);
}
.card-selected,.opc-card.selected{
  border-color:color-mix(in srgb, var(--brand-accent) 45%, transparent);
  background:color-mix(in srgb, var(--brand-light) 90%, #fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px -6px var(--vl-ring);
}
.cpf-card,.confirmation-card{border-top:1px solid var(--vl-vidro-borda)}
.confirmation-card .check-circle{background:var(--vl-grad);box-shadow:var(--vl-glow)}
/* planos: cabeçalho escuro premium com a luz da marca */
.plan-card{border-radius:var(--vl-r-g);border-width:1px}
.plan-card-header{
  background:
    linear-gradient(165deg, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(120% 80% at 88% -12%, rgba(215,39,58,.35), transparent 58%),
    #16181D;
}
.plan-card-header::after{background:var(--vl-fio);height:1px}
.plan-card-badge{background:var(--vl-grad);box-shadow:var(--vl-glow)}
.plan-card.featured{border-color:color-mix(in srgb, var(--brand-accent) 55%, transparent);box-shadow:0 0 26px -10px var(--vl-ring)}

/* ─── formulários: foco com anel da marca, raio do design ─── */
.form-input,.form-select,.form-textarea{border-radius:12px}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--brand-accent);box-shadow:0 0 0 3px var(--vl-ring);
}
.cpf-input-wrapper .cpf-input{border-radius:14px}
.cpf-input:focus{box-shadow:0 0 0 3px var(--vl-ring)}

/* ─── abas de serviço: chips de vidro ─── */
.tab{
  border:1px solid var(--vl-vidro-borda);border-radius:var(--vl-pill);
  background:linear-gradient(160deg, var(--vl-vidro-2), transparent 55%),
             color-mix(in srgb, #FFFFFF 88%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
  min-height:44px;
  transition:transform .12s var(--vl-easing),border-color .15s,background .15s,color .15s;
}
.tab:hover{border-color:var(--silver);background:#F1F3F5;color:var(--text-dark)}
.tab.active{
  border-color:transparent;background:var(--vl-grad);color:#fff;
  box-shadow:var(--vl-glow),inset 0 1px 0 rgba(255,255,255,.22);
}
.tab:active{transform:scale(.95)}

/* ─── etapas do checkout: pílulas ─── */
.steps{gap:.4rem}
.step{border-radius:var(--vl-pill);border-right:none;background:#ECEEF2}
.step.active{background:var(--vl-grad)}
.step.done{background:color-mix(in srgb, var(--brand-accent) 85%, #000)}

/* ─── breadcrumb e tabela da área do cliente ─── */
.breadcrumb{background:transparent;border-bottom:1px solid rgba(154,164,178,.25)}
.data-table tbody tr:nth-child(even):not(:hover) td{background:#F7F8FA}
.client-sidebar{border-radius:var(--vl-r-g);
  background:
    linear-gradient(165deg, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(120% 80% at 88% -12%, rgba(177,31,44,.20), transparent 58%),
    #14161B;
}
.client-sidebar .menu-item{border-radius:var(--vl-pill);min-height:44px}
.client-sidebar .menu-item:hover,.client-sidebar .menu-item.active{
  background:linear-gradient(160deg, rgba(255,255,255,.16), transparent 55%), rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px -8px rgba(232,80,95,.40);
}

/* ─── rodapé: fio prata no lugar da régua vermelha ─── */
.footer{border-top:1px solid rgba(154,164,178,.30);position:relative}
.footer::before{content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;background:var(--vl-fio)}

/* ─── mobile: alvos de toque + sem zoom no iOS ─── */
@media (max-width:768px){
  .form-input,.form-select,.form-textarea{font-size:16px}
  .btn{min-height:48px}
  .nav-cta{min-height:40px;display:inline-flex;align-items:center}
  .whatsapp-float{bottom:calc(1.2rem + env(safe-area-inset-bottom))}
  .hero h1{letter-spacing:-1px}
}

/* ─── movimento reduzido: mata tudo, incl. pulso do WhatsApp ─── */
@media (prefers-reduced-motion:reduce){
  .whatsapp-float{animation:none}
  .tab,.nav-link,.btn,.profile-card,.svc-card,.opc-card,.plan-card{transition:none}
  .tab:active,.btn:active,.nav-cta:active{transform:none}
  .profile-card:hover,.svc-card:hover,.opc-card:hover,.plan-card:hover,.card:hover,.step-card:hover{transform:none}
}

/* fallback sem backdrop-filter */
@supports not (backdrop-filter: blur(1px)){
  .nav{background:#14161B}
  .card,.profile-card,.svc-card,.opc-card,.step-card,.form-card,.cpf-card,.confirmation-card{background:#FFFFFF}
  .tab,.btn-secondary{background:#FFFFFF}
}