/* Works (before/after slider) section — brand palette (2026-05-08).
   Cards are now white surfaces on the mint body; before/after slider
   handle and dividers move from accent-red to brand-green. The mobile
   collapse-fade gradient flips from "fade-to-dark-bg" to
   "fade-to-mint-bg" so the truncation visually merges into the page. */

/* Single source of truth for case-card colours on the dark-leather
   page. The labels (orange) stay on the brand-orange CSS var; the
   prose text (case title, fact values, description) shares this
   --works-case-text custom prop so retoning the case content is a
   one-line change. Likewise --works-case-divider controls every
   between-row separator. Override on the page wrapper or the
   .works-section root to retheme. */
.works-section {
  --works-case-text: rgba(245, 245, 245, 0.94);
  --works-case-text-muted: rgba(245, 245, 245, 0.82);
  --works-case-divider: rgba(255, 255, 255, 0.08);
}

.works-section .title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  padding: 40px 0;
  text-align: left;
  margin: 0;
}
.works-section.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--site-gutter-x-desktop, 20px);
  box-sizing: border-box;
}
.works-section .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.works-section .comparison-card {
  margin: 0;
}
.works-section .comparison-card--with-details {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  /* clip-path duplicates the round corners as a hard mask. WebKit
     ignores overflow:hidden + border-radius on a parent when ANY
     descendant is GPU-promoted (translateZ / will-change / 3d
     transform); clip-path is honoured even across compositor layers.
     This is the belt-and-braces fix for the "rounded top, square
     bottom" issue users were seeing on Examples in Safari. */
  clip-path: inset(0 round 12px);
  background: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.works-section .comparison-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  clip-path: inset(0 round 12px);
  /* `transform: translateZ(0)` removed: it promoted this node onto
     its own GPU layer, which broke the parent's overflow:hidden +
     border-radius clip in WebKit (bottom corners rendered square).
     The slider animation runs on `.image-after-wrapper` (still GPU-
     promoted there); leaving this container as a plain CPU layer
     restores correct corner clipping without measurable jank on
     the slider drag. */
  margin: 0;
}
.works-section .image-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  user-select: none;
}
.works-section .image-before {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
  z-index: 1;
  position: relative;
  pointer-events: none;
}
.works-section .image-after-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  z-index: 2;
  /* GPU promotion (transform: translateZ(0) + will-change: width)
     was removed here AND on .image-after below: it created a new
     compositor layer that bypassed the parent's clip-path. The
     bottom-left corner of the comparison card was rendering square
     in Chrome because this layer escaped the 12px round clip on
     .comparison-container. The width-animated slider drag is smooth
     enough without GPU promotion on current hardware; the small
     perf cost beats unround corners. */
  pointer-events: none;
}
.works-section .image-after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
}
.works-section .slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;                      /* was 4px — narrower vertical separator */
  height: 100%;
  background: rgba(255, 255, 255, 0.92);
  z-index: 3;
  transform: translateX(-50%);
  touch-action: none;
  user-select: none;
  pointer-events: none;
}
.works-section .slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 40px;
  border: 2px solid var(--brand-orange);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-orange);
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(199, 85, 40, 0.30);
  cursor: ew-resize;
  gap: 15px;
  touch-action: none;
  user-select: none;
  z-index: 4;
  transition: transform .1s, background .2s, box-shadow .2s;
  pointer-events: auto;
}
.works-section .slider-handle:hover {
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(199, 85, 40, 0.45);
}
.works-section .slider-handle:active {
  transform: translate(-50%, -50%) scale(1.05);
  background: rgba(199, 85, 40, 0.12);
}
/* Divider below the comparison cards removed per design — the gap
   between section and the next is enough breathing room. */
.works-section .desktop-divider {
  display: none;
}
/* Case description block (rendered conditionally — only when the
   blade controller passes case content). On the home page works
   section it's empty, so we collapse it to zero footprint by removing
   padding/border. On case-study pages where it has content, the
   inner blocks (.comparison-case-title, .comparison-case-facts,
   .comparison-case-description) carry their own spacing. */
.works-section .comparison-case {
  margin-top: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.works-section .comparison-case-title {
  margin: 0 0 10px;
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--works-case-text);
  font-weight: 700;
}
.works-section .comparison-case-facts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.works-section .comparison-case-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--works-case-divider);
}
.works-section .comparison-case-label {
  min-width: 130px;
  color: var(--brand-orange);
  font-weight: 700;
  line-height: 1.35;
}
.works-section .comparison-case-value {
  color: var(--works-case-text-muted);
  line-height: 1.35;
  font-weight: 500;
}
.works-section .comparison-case-description {
  margin: 0;
  color: var(--works-case-text-muted);
  line-height: 1.55;
}
.works-section .comparison-case-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--brand-orange);
  border-radius: 999px;
  background: var(--brand-orange);
  color: #FFFFFF;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
              color .3s cubic-bezier(.4, 0, .2, 1),
              border-color .3s cubic-bezier(.4, 0, .2, 1),
              transform .15s ease;
}
.works-section .comparison-case-link:hover {
  background: #FFFFFF;
  color: var(--brand-orange);
  border-color: var(--brand-orange);
}
.works-section .comparison-case-link:active {
  transform: translateY(1px);
}
.works-section .comparison-case-link:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 3px;
}
.works-section .comparison-case-extra {
  margin-top: 8px;
}
.works-section .comparison-case-extra-inner {
  max-height: none;
  overflow: visible;
}
.works-section .comparison-case-facts--tail {
  margin-top: 0;
}
.works-section .comparison-case-facts--tail .comparison-case-row:last-child {
  border-bottom: 1px solid #E8EAEE;
}
.works-section .comparison-case-facts--tail + .comparison-case-description {
  margin-top: 10px;
}
.works-section .comparison-case-toggle {
  display: none;
}
@media (max-width: 941px) {
  .works-section .title {
    font-size: clamp(20px, 5.2vw, 24px);
    line-height: 1.2;
    padding: 16px 0 14px;
  }
  .works-section .grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .works-section .slider-handle {
    width: 48px;
    height: 34px;
    font-size: 17px;
    gap: 10px;
  }
  .works-section .comparison-case {
    display: block;
    margin-top: 0;
    padding: 12px 12px 14px;
  }
  .works-section .comparison-case-extra {
    margin-top: 0;
    position: relative;
  }
  .works-section .comparison-case-extra-inner {
    position: relative;
    max-height: none;
    overflow: visible;
    transition: max-height .35s ease;
  }
  .works-section .comparison-case-extra.is-collapsed .comparison-case-extra-inner {
    max-height: 130px;
    overflow: hidden;
  }
  /* Mobile collapse: no fade overlay. The fade gradient was a
     visual flourish that didn't survive contact with the actual
     content layout -- the wrapper's bottom edge sits next to the
     visible head facts ("Mueble / Sala seccional"), so the
     gradient ::before bled into those rows and read as a "muddy
     tint" over legible text (user feedback 2026-05-16: "лучше
     тонировку убери, она смотрится очень некрасиво"). The
     plain max-height:130px collapse + "Leer más" toggle is enough
     UX -- the toggle's prominence sells the affordance without
     the gradient. */
  .works-section .comparison-case-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 260px;
    margin: 12px auto 0;
    min-height: 50px;
    padding: 10px 16px;
    border: 2px solid var(--brand-orange);
    border-radius: 10px;
    background: transparent;
    color: var(--brand-orange);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .15s ease;
    position: relative;
    z-index: 2;
  }
  .works-section .comparison-case-toggle:active {
    transform: scale(.98);
  }
  .works-section .comparison-case-toggle:hover {
    background: rgba(199, 85, 40, 0.08);
  }
  .works-section .comparison-case-toggle[hidden] {
    display: none !important;
  }
  .works-section .comparison-case-link {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .works-section.container {
    padding-left: var(--site-gutter-x-mobile-left, 20px);
    padding-right: var(--site-gutter-x-mobile-right, 20px);
  }
  .works-section .title {
    font-size: clamp(19px, 6vw, 22px);
    padding: 14px 0 12px;
  }
  .works-section .desktop-divider {
    margin: 20px auto 0;
  }
}
@media (max-width: 480px) {
  .works-section .slider-handle {
    width: 42px;
    height: 30px;
    font-size: 15px;
    gap: 8px;
  }
  .works-section .comparison-case-row {
    display: block;
  }
  .works-section .comparison-case-label {
    min-width: 0;
    margin-bottom: 2px;
  }
}
@media (pointer: coarse) {
  .works-section .slider-handle {
    width: 48px !important;
    height: 48px !important;
    border-width: 2px;
    font-size: 18px !important;
    gap: 10px;
  }
  .works-section .slider {
    background: rgba(199, 85, 40, 0.50);
  }
}
@media (pointer: coarse) and (max-width: 600px) {
  .works-section .slider-handle {
    width: 44px !important;
    height: 44px !important;
    font-size: 17px !important;
  }
}
@supports (-webkit-touch-callout: none) {
  .works-section .slider-handle {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .works-section .image-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    transform: translateZ(0);
  }
  .works-section .slider {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }
  .works-section .comparison-container {
    perspective: 1000px;
    transform-style: preserve-3d;
  }
}
.no-select {
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}