.world-impacto {
  --paper: #0f2c39;
  --ink: #e1fcf5;
  --accent: #67dbc5;
  --line: #4f7882;
  --display: Bricolage, sans-serif;
  background: var(--paper);
}
.world-impacto .collection-bar {
  background: #071e29;
  color: #c5e5e0;
}
.world-impacto .world-brand {
  font-weight: 700;
  font-size: 2.7rem;
}
.world-impacto .world-header {
  border-bottom: 1px solid #345764;
}
.bruma-hero {
  padding: 2.5rem 0 4rem;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 65%, #235767 0%, #0f2c39 65%);
}
.bruma-topline {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}
.bruma-topline > span {
  color: #b1d4d0;
}
.bruma-hero h1 {
  text-align: center;
  font-weight: 800;
  font-size: clamp(3rem, 5vw, 6rem);
  letter-spacing: -0.07em;
  line-height: 0.9;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}
.bruma-hero h1 > span {
  display: block;
  color: #8ee6d5;
  font-size: clamp(6rem, 20vw, 22rem);
  letter-spacing: -0.09em;
}
.car-stage {
  position: relative;
  margin: -5vw auto 0;
  width: 100%;
  z-index: 2;
  padding-bottom: 2.5rem;
}
.car-compare {
  position: relative;
  aspect-ratio: 2.72;
  isolation: isolate;
  --wash: 35%;
}
.car-before {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.car-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--wash)) 0 0);
}
.car-after img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.compare-line {
  position: absolute;
  left: var(--wash);
  top: 7%;
  bottom: 4%;
  width: 2px;
  background: #c7fff4;
  box-shadow: 0 0 15px #67dbc5;
  pointer-events: none;
}
.compare-line:after {
  content: "↔";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #d8fff4;
  color: #0f2c39;
  font-size: 1.4rem;
  border: 4px solid #214c58;
}
.car-halo {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 15%;
  border-radius: 50%;
  background: #67dbc522;
  filter: blur(22px);
  z-index: -1;
}
.car-caption {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  margin-top: 1rem;
  color: #b1d4d0;
}
.wash-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  max-width: 800px;
  margin: 1rem auto 0;
}
.wash-range {
  flex: 1;
}
.wash-range label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.7rem;
}
.wash-range input {
  display: block;
  width: 100%;
  accent-color: #67dbc5;
  min-height: 2rem;
  cursor: ew-resize;
}
.wash-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: #c1dcd8;
}
.wash-labels strong {
  font: 600 1.3rem Bricolage;
  color: #a9f7e7;
}
.pill-aqua {
  background: #9ae8d7;
  color: #0f2c39;
}
.bruma-statement {
  padding-block: var(--section);
}
.bruma-statement h2 {
  max-width: 20ch;
  font-weight: 600;
  font-size: clamp(2.7rem, 5.7vw, 6rem);
  line-height: 1.05;
}
.bruma-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  border-top: 1px solid #4f7882;
  padding-top: 2rem;
  font-size: 1.1rem;
}
.bruma-features span {
  display: block;
  color: #9ae8d7;
  font-size: 0.75rem;
  margin-bottom: 1rem;
}
.treatment-section {
  background: #d7eee7;
  color: #113b40;
  padding-block: var(--section);
}
.treatment-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 6rem;
}
.treatment-layout h2 {
  font-size: clamp(2.7rem, 4.4vw, 4.8rem);
  font-weight: 700;
}
.treatment-options {
  margin-top: 3rem;
}
.treatment-options button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border-top: 1px solid #799b97;
  width: 100%;
  padding: 1.5rem 0.8rem;
  text-align: left;
  transition: background 0.25s;
}
.treatment-options button:last-child {
  border-bottom: 1px solid #799b97;
}
.treatment-options button > span:first-child {
  font: 600 1.6rem Bricolage;
}
.treatment-options button > span:last-child {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.treatment-options button[aria-pressed="true"] {
  background: #b4d8ce;
}
.treatment-ticket {
  background: #153e4b;
  color: #e1fcf5;
  border-radius: 1.1rem;
  padding: 2rem;
  align-self: start;
  box-shadow: 15px 15px 0 #a8cec4;
  rotate: 2deg;
}
.ticket-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.ticket-top > span:last-child {
  font-size: 2rem;
}
.treatment-ticket > img {
  width: 100%;
  aspect-ratio: 2.5;
  object-fit: contain;
  margin: 2rem 0;
}
.treatment-ticket h3 {
  font-size: 2.5rem;
  font-weight: 700;
}
.treatment-ticket > p {
  font-size: 0.95rem;
  margin-top: 1rem;
}
.ticket-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0;
  border-top: 1px dashed #76a19f;
  padding-top: 1.5rem;
}
.ticket-price > span {
  font-size: 0.8rem;
}
.ticket-price > strong {
  font: 600 3rem Bricolage;
}
.treatment-ticket .pill {
  width: 100%;
}
.treatment-ticket > small {
  display: block;
  margin-top: 1.2rem;
  font-size: 0.7rem;
  color: #c0dcd9;
}
.world-impacto .show-footer {
  background: #071e29;
  color: #d7eee7;
}
@media (max-width: 800px) {
  .wash-controls {
    gap: 2rem;
  }
  .treatment-layout {
    gap: 3rem;
  }
  .bruma-features {
    gap: 1rem;
    font-size: 0.95rem;
  }
  .treatment-ticket {
    padding: 1.5rem;
  }
}
@media (max-width: 600px) {
  .bruma-topline > span {
    display: none;
  }
  .bruma-hero {
    padding-top: 1.5rem;
  }
  .bruma-hero h1 {
    font-size: 2.6rem;
    margin-top: 3rem;
  }
  .bruma-hero h1 > span {
    font-size: 23vw;
    margin-top: 0.5rem;
  }
  .car-stage {
    margin: 1rem -1rem 0;
    width: calc(100% + 2rem);
    padding-bottom: 1rem;
  }
  .car-compare {
    aspect-ratio: 2.2;
  }
  .car-caption {
    font-size: 0.7rem;
    margin-top: 0.8rem;
  }
  .wash-controls {
    display: block;
    margin-top: 1rem;
  }
  .wash-controls > .pill {
    width: 100%;
    margin-top: 1.5rem;
  }
  .bruma-features {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
  }
  .bruma-features p {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  .bruma-features span {
    margin: 0;
  }
  .treatment-layout {
    grid-template-columns: 1fr;
  }
  .treatment-ticket {
    rotate: 0;
    box-shadow: 6px 6px 0 #a8cec4;
  }
  .treatment-options button > span:first-child {
    font-size: 1.35rem;
  }
}

.car-compare {
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}