/* =====================================================================
   antes.css  -  Páginas "antes y después" (antes.html ... antes9c.html)
   Cargar DESPUÉS de twentytwenty.css, responsive.css y contacto.css.
   ===================================================================== */

.ba {max-width:900px; margin:0 auto}
.ba-count {margin:0 0 12px; text-align:center; color:#666; font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}

/* ---------- Deslizador fluido (el ancho máximo de cada página va en --w) ---------- */
.ba-wrap {max-width:var(--w, 640px); margin:0 auto}
.ba-stage {min-height:200px; overflow:hidden; border-radius:10px; background:#eee9e0; box-shadow:0 4px 18px rgba(0,0,0,.2)}
.ba-stage .twentytwenty-wrapper, .ba-stage .twentytwenty-container {width:100%; max-width:100%}
.ba-stage .twentytwenty-container img {width:100%; max-width:100%; height:auto}
.ba-stage .twentytwenty-container {-webkit-tap-highlight-color:transparent}

/* ---------- Anterior / Siguiente ---------- */
.ba-controls {display:flex; justify-content:space-between; gap:12px; max-width:var(--w, 640px); margin:20px auto 0}
.ba-btn {display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:1 1 0; height:50px; padding:0 18px; border-radius:8px; background:#262626; color:#fff;
         font:700 16px/1 Arial, Helvetica, sans-serif; letter-spacing:.02em; text-decoration:none; text-align:center}
.ba-btn:hover {background:#000; color:#fff}
.ba-btn.next {background:#ff9601; color:#262626; box-shadow:0 2px 0 #c97400}
.ba-btn.next:hover {background:#ffa91f; color:#262626}
.ba-btn.is-disabled {background:#e6e1d8; color:#8b867c; box-shadow:none; cursor:default}
.ba-btn .arr {font-size:20px; line-height:1}

/* ---------- Números de página ---------- */
.ba-dots {display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:18px auto 0}
.ba-dots a {display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 6px; border:2px solid #cfc8bb; border-radius:999px;
            background:#fff; color:#262626; font:700 14px/1 Arial, Helvetica, sans-serif; text-decoration:none}
.ba-dots a:hover {border-color:#ff9601}
.ba-dots a[aria-current="page"] {background:#ff9601; border-color:#ff9601; color:#262626}

/* ---------- Llamada a la acción ---------- */
.ba-cta {max-width:640px; margin:34px auto 0; text-align:center}
.ba-cta .card-title {text-align:center}
.ba-cta-btns {display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.ba-cta-btns a {display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 26px; border-radius:8px; font:700 17px/1 Arial, Helvetica, sans-serif; text-decoration:none}
.ba-cta-btns .primary {background:#ff9601; color:#262626; box-shadow:0 2px 0 #c97400}
.ba-cta-btns .primary:hover {background:#ffa91f; color:#262626}
.ba-cta-btns .alt {background:#fff; color:#262626; border:2px solid #262626}
.ba-cta-btns .alt:hover {background:#262626; color:#fff}

@media (max-width:768px) {
    /* más ancho útil para la foto en móvil */
    .antes-page .box .container_12 {padding-left:10px; padding-right:10px}
    .antes-page .contact {padding:0}
    .ba-controls {margin-top:16px}
    .ba-btn {height:52px; padding:0 10px; font-size:15px}
    .ba-cta-btns a {flex:1 1 100%}
    /* asa del deslizador más grande para el dedo */
    .twentytwenty-handle {height:44px; width:44px; margin-left:-25px; margin-top:-25px}
}
@media (max-width:420px) {
    .ba-dots {gap:4px}
    .ba-dots a {min-width:30px; height:30px; padding:0 4px; font-size:13px}
}