/* casos.css — comparadores antes/después (uno por caso), reutilizando .ba-slider de la landing
   (sus reglas viven en site.css). Archivo aparte a propósito: se construyó en paralelo con la
   optimización móvil de site.css y así ninguno de los dos pisa al otro. */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin:14px 0 30px}
.case-card{margin:0;background:var(--ink);border:1px solid #000;border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-soft);min-width:0}
.case-card .ba-slider{border-radius:16px}
.case-card .ba-handle{border:0;padding:0;font:inherit}
.case-card .ba-handle:focus-visible{outline:3px solid #c9a96a;outline-offset:3px}
.case-quote{background:var(--white);border-radius:14px;margin-top:12px;padding:14px 16px}
.case-quote .stars{color:#b8975a;font-size:.72rem;letter-spacing:2px}
.case-quote p{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.08rem;line-height:1.3;color:var(--ink);margin:6px 0 8px!important;font-weight:400}
.case-quote .who{font-size:.76rem;font-weight:600;color:var(--ink)}
.case-quote .who span{color:var(--grey-soft);font-weight:400}
html[data-theme=dark] .case-card{background:#19191c}
@media(max-width:700px){.cases{grid-template-columns:minmax(0,1fr);gap:20px}.case-card{padding:10px}}

/* ---- Sección a lo ancho ['s_cases']: cuadrícula 3×2 en escritorio, 2 columnas en tableta y
   carrusel (1 caso por vista) en móvil. El carrusel es scroll horizontal NATIVO con scroll-snap:
   deslizar con el dedo no necesita JS. El tirador del comparador tiene touch-action:none (site.css)
   + preventDefault/setPointerCapture (layout.php), así que arrastrarlo compara SIN mover el
   carrusel; tocar la foto sí desliza de caso. casos.js solo sincroniza puntos y flechas. */
.cases-sec .kicker{margin-bottom:48px}
.cases-sec .cases{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0}
.cases-sec .case-card{display:flex;flex-direction:column}
.cases-sec .case-quote{flex:1}
.cc-ctrl{display:none}
@media(max-width:880px){.cases-sec .cases{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(max-width:700px){
  .cases-sec .kicker{margin-bottom:30px}
  .cases-sec .cases{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cases-sec .cases::-webkit-scrollbar{display:none}
  .cases-sec .case-card{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;box-shadow:none}
  .cc-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
  .cc-arrow{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
  .cc-arrow:focus-visible,.cc-dot:focus-visible{outline:3px solid #c9a96a;outline-offset:2px}
  .cc-dots{display:flex;align-items:center}
  /* Punto visible de 8px, pero zona de toque de 24px */
  .cc-dot{position:relative;width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;transition:width .25s}
  .cc-dot:before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:999px;transform:translate(-50%,-50%);background:var(--gold-soft);transition:width .25s,background .25s}
  .cc-dot.is-active{width:34px}
  .cc-dot.is-active:before{width:22px;background:var(--gold-deep)}
}
html[data-theme=dark] .cc-arrow{background:#19191c;border-color:var(--line)}
html[data-theme=dark] .cc-dot:before{background:#4a4a50}
html[data-theme=dark] .cc-dot.is-active:before{background:var(--gold)}