/* ============================================================
   GRUPO COPRINCI — galeria.css
   Páginas /casos-de-exito y /nuestro-trabajo (tras landing.css):
   filtros, grid de casos + modal de detalle, galería + lightbox.
   ============================================================ */

/* ---------- Filtros (chips) ---------- */
/* Sin JS los filtros no filtran: se ocultan para no mostrar controles muertos (las tarjetas igual se ven todas). */
.filtros { display: none; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2.2rem; }
.js .filtros { display: flex; }

/* ---------- Grid de casos ---------- */
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cs-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cs-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cs-card.is-hidden { display: none; }
.cs-card__img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--marino); position: relative; }
.cs-card__cat { position: absolute; top: .7rem; left: .7rem; font: 600 .7rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(16,52,97,.78); padding: .3rem .6rem; border-radius: var(--r-pill); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cs-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.cs-card__body h3 { color: var(--marino); font-size: 1.15rem; margin-bottom: .2rem; }
.cs-card__sector { color: var(--text-soft); font-size: .85rem; margin-bottom: .6rem; }
.cs-card__short { color: var(--text-soft); font-size: .95rem; flex: 1; }
.cs-card__btn { display: none; margin-top: 1rem; align-self: flex-start; padding: .55rem 1.2rem; font-size: .92rem; }
.js .cs-card__btn { display: inline-flex; } /* sin JS el detalle ya se ve inline; el botón abriría el modal */

/* Detalle reto/solución/resultado/stats (visible inline sin JS; va al modal con JS) */
.js .cs-card__detail { display: none; }
.cs-detail__row { margin-bottom: 1rem; }
.cs-detail__row h4 { color: var(--azul); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.cs-detail__row p { color: var(--text); }
.cs-stats { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.cs-stat .n { font: 700 1.9rem var(--font-display); color: var(--naranja); line-height: 1; }
.cs-stat .l { font-size: .85rem; color: var(--text-soft); margin-top: .2rem; }

/* ---------- Modal (dialog nativo: foco/Esc/backdrop) ---------- */
/* dialog nativo: lo centra el navegador. Cap de alto + scroll interno en el cuerpo
   (sin esto, los casos largos se recortan arriba/abajo y no se puede hacer scroll). */
.modal { border: 0; border-radius: var(--r-lg); padding: 0; width: min(720px, 94vw); max-height: 90vh; max-height: 90dvh; margin: auto; box-shadow: var(--shadow-lg); overflow: hidden; }
/* display SOLO cuando está abierto: si se pone sin [open], se anula el ocultado nativo
   del <dialog> cerrado y queda una caja fantasma visible en la página (y al cerrar "no
   desaparece" aunque .open ya sea false). El layout de columna (banner + cuerpo scroll) va aquí. */
.modal[open] { display: flex; flex-direction: column; }
.modal::backdrop { background: rgba(16,52,97,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal__img { flex: 0 0 auto; height: clamp(170px, 30vh, 300px); background-size: cover; background-position: center; background-color: var(--marino); position: relative; }
.modal__body { padding: 1.6rem 1.8rem 2rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal__cat { color: var(--azul); font: 600 .75rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.modal__body h3 { color: var(--marino); font-size: var(--fs-h3); margin: .25rem 0 1.1rem; }
.modal__close { position: absolute; top: .7rem; right: .7rem; z-index: 6; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--marino); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.modal__close:hover { background: #fff; }
/* Área de clic CUADRADA: como el botón es un círculo (border-radius:50%), el navegador
   recorta su zona clicable al círculo y los clics en las esquinas se colaban al slider/banner
   de atrás (la X "no cerraba"). Este ::before cuadrado, sin recorte y dentro del botón
   (z-index:6 > slider:5), captura toda la caja —incluidas las esquinas— y dispara el cierre. */
.modal__close::before { content: ""; position: absolute; inset: -4px; border-radius: 0; }

/* ---------- Galería + lightbox ---------- */
/* flex centrado: al filtrar, los items visibles quedan centrados (no descuadrados a la izquierda) */
.gal-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.gal-item { flex: 0 0 calc(25% - .7rem); position: relative; border: 0; padding: 0; margin: 0; cursor: default; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1 / 1; background: var(--marino); }
.js .gal-item { cursor: zoom-in; }
.gal-item.is-hidden { display: none; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease); }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.06); }
.gal-item__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .7rem .6rem; font: 600 .8rem var(--font-display); color: #fff; text-align: left; background: linear-gradient(0deg, rgba(16,52,97,.88), transparent); opacity: 0; transition: opacity .25s var(--ease); }
.gal-item:hover .gal-item__cap, .gal-item:focus-visible .gal-item__cap { opacity: 1; }
.lightbox { border: 0; background: transparent; padding: 0; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lightbox::backdrop { background: rgba(10,26,51,.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox img { max-width: 94vw; max-height: 86vh; border-radius: var(--r-md); display: block; margin: 0 auto; box-shadow: var(--shadow-lg); }
.lightbox__cap { color: #fff; text-align: center; margin-top: .7rem; font-family: var(--font-display); }
.lightbox__close { position: fixed; top: 1rem; right: 1.2rem; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; cursor: pointer; }
.lightbox__close:hover { background: rgba(255,255,255,.3); }

/* aviso de contenido demo */
.demo-note { text-align: center; font-size: .85rem; color: #9a5a00; margin-top: 1.4rem; }
/* badge que deja claro que las cifras de los casos son de ejemplo, no datos reales */
.cs-demo-flag { display: inline-block; font: 600 .68rem var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: #9a5a00; background: #fff6e6; border: 1px dashed #e0a030; padding: .25rem .7rem; border-radius: var(--r-pill); margin: 1.2rem 0 -.1rem; }

@media (max-width: 860px) { .cs-grid { grid-template-columns: 1fr 1fr; } .gal-item { flex-basis: calc(33.333% - .6rem); } }
@media (max-width: 560px) { .cs-grid { grid-template-columns: 1fr; } .gal-item { flex-basis: calc(50% - .45rem); } }
@media (prefers-reduced-motion: reduce) { .gal-item img { transition: none; } }

/* Comparador antes/después dentro del banner del modal: ocupa el alto del banner, sin esquinas/sombra propias */
.modal__img--ba { background: var(--marino); }
.modal__img--ba .ba--flush { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }