/* =====================================================================
   DICLAR — SYSTEM PRO v20260620-10
   Capa de mejoras que se carga DESPUES de diclar-system.css.
   Objetivo: unificar titulo+contenido en un mismo contenedor ("content-band"),
   diferenciar visualmente las bandas, dar profundidad 3D/dreamy
   (sombras suaves, glow, blobs difuminados) y arreglar el footer.
   No se elimina ningun estilo anterior: esta capa solo corrige y enriquece.
   ===================================================================== */

/* ---------- 0. BASE: grid-3cols universal (antes solo definido en quienes-somos.css) ---------- */
.grid-3cols {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 1020px) {
  .grid-3cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .grid-3cols { grid-template-columns: 1fr !important; }
}

/* ---------- 1. KICKER (etiqueta pequeña sobre los titulos) ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(191,18,28,.09);
  color: var(--diclar-red-dark);
  border: 1px solid rgba(191,18,28,.18);
}
.kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--diclar-red);
  box-shadow: 0 0 0 3px rgba(191,18,28,.18);
}

/* ---------- 2. CONTENT-BAND: titulo y contenido en UN solo panel ---------- */
.content-band.section {
  position: relative !important;
  margin: 54px auto 0 !important;
  width: var(--wrap) !important;
  max-width: 1180px !important;
  background: linear-gradient(165deg, #ffffff 0%, #f8f9fc 55%, #eef1f6 100%) !important;
  border: 1px solid rgba(23,26,31,.08) !important;
  border-radius: 28px !important;
  padding: clamp(28px,4vw,48px) clamp(20px,4.2vw,56px) clamp(32px,4.4vw,52px) !important;
  box-shadow: 0 30px 70px -22px rgba(20,24,32,.18), inset 0 1px 0 rgba(255,255,255,.7) !important;
  overflow: hidden !important;
}
.content-band.section::before,
.content-band.section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  z-index: 0;
}
.content-band.section::before {
  width: 460px; height: 460px;
  top: -230px; right: -150px;
  background: radial-gradient(circle, rgba(191,18,28,.10), transparent 70%);
}
.content-band.section::after {
  width: 380px; height: 380px;
  bottom: -200px; left: -130px;
  background: radial-gradient(circle, rgba(41,49,59,.07), transparent 70%);
}
.content-band.section > * { position: relative; z-index: 1; }

.section-block-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-width: 700px !important;
  margin: 0 0 30px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid rgba(23,26,31,.09) !important;
  text-align: left !important;
}
.content-band .section-block-head .title,
.content-band .section-block-head .lead {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 640px !important;
}
.section-block-head .title { margin-top: 0 !important; }

.content-band > .grid-2cols,
.content-band > .grid-3cols,
.content-band > .metodologia {
  width: 100% !important;
  margin: 0 !important;
}

/* ---------- 3. VALUES-BAND: panel oscuro tipo "vidrio" ---------- */
.content-band.values-band {
  background: linear-gradient(165deg, #161a21 0%, #1e232c 55%, #262c37 100%) !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 36px 80px -26px rgba(6,8,12,.6), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.content-band.values-band::before {
  background: radial-gradient(circle, rgba(191,18,28,.26), transparent 70%);
}
.content-band.values-band::after {
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
}
.values-band .section-block-head { border-bottom-color: rgba(255,255,255,.14) !important; }
.values-band .title { color: #fff !important; }
.values-band .lead { color: rgba(255,255,255,.72) !important; }
.values-band .kicker {
  background: rgba(191,18,28,.22) !important;
  color: #ff9098 !important;
  border-color: rgba(255,255,255,.22) !important;
}
.values-band.content-band .grid-3cols > .card {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(6,8,12,.35) !important;
}
.values-band.content-band .grid-3cols > .card h3 { color: #fff !important; }
.values-band.content-band .grid-3cols > .card p,
.values-band.content-band .grid-3cols > .card li { color: rgba(255,255,255,.78) !important; }
.values-band .mini-list li::before { background: #fff !important; }
.values-band .valores-list b { color: #fff !important; }
.values-band.content-band .grid-3cols > .card:nth-child(2) {
  background: rgba(191,18,28,.14) !important;
  border-color: rgba(255,140,148,.3) !important;
}
.values-band.content-band .grid-3cols > .card:nth-child(1)::before {
  content: "";
  display: block;
  width: 38px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg,#fff,rgba(255,255,255,.3));
  margin-bottom: 14px;
}

/* ---------- 4. FOCUS-BAND: panel claro/calido con acento rojo ---------- */
.content-band.focus-band {
  background: linear-gradient(165deg, #fff8f3 0%, #fdf1ea 55%, #fbece2 100%) !important;
  border-color: rgba(191,18,28,.14) !important;
}
.content-band.focus-band::before { background: radial-gradient(circle, rgba(191,18,28,.12), transparent 70%); }
.content-band.focus-band::after { background: radial-gradient(circle, rgba(239,90,35,.08), transparent 70%); }
.focus-band .kicker { background: rgba(191,18,28,.1) !important; color: var(--diclar-red-dark) !important; }
.focus-band.content-band .grid-3cols > .step-card-pro {
  position: relative !important;
  padding-top: 28px !important;
  background: #fff !important;
}
.focus-band.content-band .grid-3cols > .step-card-pro::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, var(--diclar-red), #ef5a23);
}
.focus-band.content-band .grid-3cols > .step-card-pro .kicker {
  margin-bottom: 14px !important;
}
body.contacto-page .card:first-child::after {
  content: none !important;
  display: none !important;
}

/* ---------- 5. METHODOLOGY-BAND: panel frio tipo "plano tecnico" ---------- */
.content-band.methodology-band {
  background: linear-gradient(165deg, #eef1f6 0%, #e6eaf0 55%, #dee3eb 100%) !important;
  border-color: rgba(49,85,127,.14) !important;
}
.content-band.methodology-band::before { background: radial-gradient(circle, rgba(49,85,127,.14), transparent 70%); }
.content-band.methodology-band::after { background: radial-gradient(circle, rgba(191,18,28,.06), transparent 70%); }
.methodology-band .kicker { background: rgba(49,85,127,.12) !important; color: #31557f !important; border-color: rgba(49,85,127,.22) !important; }

/* Variantes de banda tambien funcionan con grid-2cols (ej. FAQ, contacto) */
.values-band.content-band .grid-2cols > .card,
.focus-band.content-band .grid-2cols > .card,
.methodology-band.content-band .grid-2cols > .card {
  background: #fff !important;
}
.values-band.content-band .grid-2cols > .card {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}
.values-band.content-band .grid-2cols > .card h3,
.values-band.content-band .grid-2cols > .card h4 { color: #fff !important; }
.values-band.content-band .grid-2cols > .card p,
.values-band.content-band .grid-2cols > .card li { color: rgba(255,255,255,.78) !important; }

/* ---------- 5b. FAQ tipo acordeon, reutilizable en cualquier banda ---------- */
.faq-list {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}
.faq-item {
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(23,26,31,.09) !important;
  border-radius: 16px !important;
  padding: 4px 6px !important;
  box-shadow: 0 8px 22px rgba(20,24,32,.06) !important;
  overflow: hidden;
}
.values-band .faq-item {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 800;
  font-size: 15px;
  color: var(--diclar-coal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.values-band .faq-item summary { color: #fff; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(191,18,28,.1);
  color: var(--diclar-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0;
  padding: 0 16px 16px 16px;
  color: var(--diclar-muted);
  font-size: 14px;
  line-height: 1.62;
}
.values-band .faq-item p { color: rgba(255,255,255,.74); }

/* ---------- 5c. Banda con foto de fondo (marco legal / contexto) ---------- */
.photo-band.content-band {
  background:
    linear-gradient(120deg, rgba(18,21,27,.93), rgba(24,28,36,.82) 55%, rgba(24,28,36,.6)),
    var(--photo-band-img, url("/assets/img/camiontolva.jpg")) center / cover !important;
  border-color: rgba(255,255,255,.1) !important;
}
.photo-band.content-band .section-block-head,
.photo-band.content-band .title,
.photo-band.content-band .lead { color: #fff !important; border-bottom-color: rgba(255,255,255,.16) !important; }
.photo-band.content-band .lead { color: rgba(255,255,255,.78) !important; }
.photo-band .kicker { background: rgba(255,255,255,.14) !important; color: #fff !important; border-color: rgba(255,255,255,.3) !important; }

/* ---------- 6. Historia: pequeno realce sin perder su estilo actual ---------- */
body.about-page section#historia.grid-2cols { position: relative; }
body.about-page section#historia .card:first-child { position: relative; }

/* ---------- 7. FOOTER: 4 columnas armonicas, con iconos y profundidad ---------- */
.diclar-footer {
  position: relative !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(191,18,28,.20), transparent 32%),
    radial-gradient(circle at 88% 100%, rgba(60,75,110,.18), transparent 36%),
    linear-gradient(165deg, #12151b 0%, #1b202a 55%, #232a35 100%) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  overflow: hidden !important;
  padding: 58px 20px 26px !important;
}
.diclar-footer::before {
  content: "";
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--diclar-red), #ef5a23, var(--diclar-red));
}
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr 1fr !important;
  gap: 30px !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  align-items: start !important;
}
.diclar-footer section {
  position: relative;
  min-height: 0 !important;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.diclar-footer section:first-child { padding-left: 0; border-left: 0; }
.diclar-footer h3 {
  font-family: Montserrat, "Inter", sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 21px !important;
  color: #fff !important;
  margin: 0 0 10px !important;
}
.diclar-footer h4 {
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55) !important;
  margin: 0 0 14px !important;
}
.diclar-footer p {
  color: rgba(255,255,255,.7) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  max-width: 30ch;
}
.diclar-footer a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.82) !important;
  font-size: 14px !important;
  margin: 0 0 11px !important;
  text-decoration: none !important;
  transition: color .2s ease, transform .2s ease;
}
.diclar-footer a:hover { color: #fff !important; transform: translateX(2px); }
.diclar-footer a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--diclar-red);
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(191,18,28,.16);
}
.footer-legal .privacy-open {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.82) !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 11px !important;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.footer-legal .privacy-open::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--diclar-red);
  box-shadow: 0 0 0 3px rgba(191,18,28,.16);
}
.footer-legal .privacy-open:hover { color: #fff !important; }
.footer-bottom {
  position: relative;
  max-width: 1180px !important;
  margin: 40px auto 0 !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 12.5px !important;
  text-align: center !important;
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 24px !important; }
  .diclar-footer section { border-left: 0; padding-left: 0; }
  .diclar-footer section:nth-child(odd) { padding-right: 14px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .diclar-footer section { text-align: left; }
}

/* ---------- 8. Toques 3D/dreamy generales (hover y profundidad) ---------- */
.content-band .grid-3cols > .card,
.content-band .grid-2cols > .card {
  transition: transform .35s ease, box-shadow .35s ease !important;
}
.content-band .grid-3cols > .card:hover,
.content-band .grid-2cols > .card:hover {
  transform: translateY(-5px) !important;
}
.metodologia .step { transition: transform .35s ease, box-shadow .35s ease; }
.metodologia .step:hover { transform: translateY(-5px) translateZ(0); }

@media (max-width: 680px) {
  .content-band.section { padding: 26px 18px 30px !important; border-radius: 20px !important; margin-top: 36px !important; }
  .section-block-head { margin-bottom: 22px !important; padding-bottom: 18px !important; }
}

/* ---------- 10. Respiro de texto en tarjetas (mini-list, kicker, parrafos) ---------- */
.content-band .grid-3cols > .card,
.content-band .grid-2cols > .card {
  padding: 28px 26px !important;
  gap: 0 !important;
}
.content-band .card .kicker { margin-bottom: 16px !important; }
.content-band .card h3 { margin: 0 0 12px !important; line-height: 1.25 !important; }
.content-band .card > p { margin: 0 0 16px !important; line-height: 1.62 !important; }
.content-band .mini-list {
  margin-top: 6px !important;
  gap: 13px !important;
}
.content-band .mini-list li {
  line-height: 1.55 !important;
  padding-left: 24px !important;
}
.content-band .mini-list li::before { top: .55em !important; }

/* ---------- 11. Titulos de sección con mas caracter (menos "planos") en todo el sitio ---------- */
.section > .title,
.content-band .title,
.arriendos-head .title,
.asbesto-intro-head .title {
  font-weight: 800 !important;
  font-size: clamp(30px, 3.6vw, 42px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.012em !important;
  position: relative;
}
.section > .lead,
.content-band .lead,
.arriendos-head .lead,
.asbesto-intro-head .lead {
  font-size: 16.5px !important;
  line-height: 1.6 !important;
  color: var(--diclar-muted) !important;
}
.section:not(.content-band) > .title::before {
  content: "";
  display: block;
  width: 46px;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--diclar-red), #ef5a23);
  margin-bottom: 16px;
}

/* ---------- 12. Contacto: banda de ubicacion + formulario, canales y chips ---------- */
.contact-main-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.05fr !important;
  gap: 32px !important;
  align-items: start !important;
  width: 100% !important;
}
.contact-location-col { color: #fff; }
.location-info { margin-bottom: 16px; }
.location-info b { display: block; color: #fff !important; font-size: 15px; margin-bottom: 6px; }
.location-info p { color: rgba(255,255,255,.74) !important; margin: 0 !important; }
.contact-location-col .map-wrap { border-radius: 16px !important; overflow: hidden !important; margin-top: 0 !important; }
.contact-location-col .map-consent {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}
.contact-location-col .map-consent p { color: rgba(255,255,255,.7) !important; }
.contact-location-col .map-link {
  display: inline-block;
  margin-top: 12px;
  color: #ff9098 !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.contact-location-col .map-link:hover { text-decoration: underline; }
.quick-quote-chips {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.chips-label { color: rgba(255,255,255,.58); font-size: 13px; width: 100%; margin-bottom: 2px; }
.chip {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff !important;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .2s ease, transform .2s ease;
}
.chip:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }

.contact-form-col { width: 100%; }
.contact-form-col .contact-form {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 30px !important;
  box-shadow: 0 30px 60px rgba(8,10,14,.35) !important;
  border: none !important;
}
@media (max-width: 880px) {
  .contact-main-grid { grid-template-columns: 1fr !important; }
}

/* Tarjetas de canal de contacto (WhatsApp / Telefono / Correo) */
.channel-card { text-align: left; }
.channel-card .btn { margin-top: auto; width: fit-content; }
.channel-card h3 { font-size: 21px !important; }

/* ---------- 13. HERO: reactivar eyebrow y dar mas caracter visual ---------- */
.hero .eyebrow,
.hero-box .eyebrow,
.about-hero .eyebrow,
.contact-hero .eyebrow,
.asbesto-hero .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: fit-content !important;
  padding: 8px 16px !important;
  margin: 0 0 20px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  backdrop-filter: blur(6px);
}
.hero .eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--diclar-red);
  box-shadow: 0 0 0 4px rgba(191,18,28,.35);
  flex: 0 0 auto;
}
.hero, .about-hero, .contact-hero, .asbesto-hero {
  position: relative !important;
  height: 660px !important;
  min-height: 660px !important;
  max-height: 660px !important;
}
.hero::after, .about-hero::after, .contact-hero::after, .asbesto-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 85% 15%, rgba(191,18,28,.22), transparent 45%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.hero-box { position: relative; z-index: 2; }
.hero-actions .btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
}
.hero-actions .btn-wa {
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
}
@media (max-width: 640px) {
  .hero, .about-hero, .contact-hero, .asbesto-hero {
    height: auto !important;
    min-height: 560px !important;
    max-height: none !important;
    padding-bottom: 36px !important;
  }
}

/* ---------- 14. Step-strip: 3 pasos horizontales compactos (reemplaza cards largas) ---------- */
.step-strip {
  display: flex !important;
  gap: 16px !important;
  width: 100% !important;
  align-items: stretch !important;
}
.step-strip-item {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(23,26,31,.08) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 10px 24px rgba(20,24,32,.06) !important;
}
.step-strip-item b {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--diclar-red), #ef5a23) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
.step-strip-item h3 { margin: 0 0 4px !important; font-size: 15.5px !important; color: var(--diclar-ink) !important; }
.step-strip-item p { margin: 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--diclar-muted) !important; }
@media (max-width: 880px) {
  .step-strip { flex-direction: column !important; }
}

/* Iconos circulares para tarjetas de canal de contacto */
.channel-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  margin-bottom: 16px !important;
}
.channel-icon svg { width: 22px !important; height: 22px !important; }
.channel-icon-wa { background: rgba(37,143,82,.12) !important; color: #1f9d55 !important; }
.channel-icon-wa svg { fill: currentColor; }
.channel-icon-phone { background: rgba(191,18,28,.1) !important; color: var(--diclar-red-dark) !important; }
.channel-icon-mail { background: rgba(49,85,127,.1) !important; color: #31557f !important; }

/* ---------- 15. RETIRO DE ASBESTO: proceso reinventado como flujo horizontal ---------- */
.asbesto-flow {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
  position: relative !important;
  margin-top: 4px !important;
}
.asbesto-flow::before {
  content: "";
  position: absolute;
  top: 39px; left: 6%; right: 6%;
  height: 2px;
  background: rgba(255,255,255,.14);
  z-index: 0;
}
.flow-step {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  padding: 18px 14px !important;
  text-align: center !important;
  transition: transform .3s ease, background .3s ease;
}
.flow-step:hover { transform: translateY(-4px); background: rgba(255,255,255,.1) !important; }
.flow-step b {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto 14px !important;
  border-radius: 50% !important;
  background: var(--diclar-red) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border: 3px solid #1c212b !important;
  box-shadow: 0 0 0 2px rgba(191,18,28,.25) !important;
}
.flow-step h3 { color: #fff !important; font-size: 15px !important; margin: 0 0 6px !important; line-height: 1.3 !important; }
.flow-step p { color: rgba(255,255,255,.72) !important; font-size: 13px !important; line-height: 1.5 !important; margin: 0 !important; }
.asbesto-flow-result {
  margin-top: 20px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  color: #fff !important;
  font-size: 14px !important;
}
.asbesto-flow-result strong { margin-right: 6px; color: #ff9098; }
@media (max-width: 900px) {
  .asbesto-flow { grid-template-columns: repeat(2, 1fr) !important; }
  .asbesto-flow::before { display: none; }
}
@media (max-width: 560px) {
  .asbesto-flow { grid-template-columns: 1fr !important; }
}