/* Juegos de Cartón — personalización (cargar después de Bootstrap) */

:root {
  --jdc-brand: #078d01;
  --jdc-brand-hover: #056b01;
  --jdc-brand-active: #045200;
  --jdc-brand-focus: rgba(7, 141, 1, 0.35);
}

.navbar-jdc {
  background-color: var(--jdc-brand);
}

.navbar-jdc .navbar-brand img {
  max-height: 48px;
  width: auto;
}

/* Tipografía: párrafos 19px; lead al 200% (38px) */
p {
  font-size: 19px;
}

p.lead {
  font-size: 38px;
}

/* Títulos: gana a .display-*, .h1–.h6 de Bootstrap en el mismo elemento */
h1 {
  font-size: 80px !important;
}

h2 {
  font-size: 48px !important;
  text-align: center;
}

/* Foto principal bajo h1: clic abre lightbox (galería inicio) */
.jdc-hero-photo {
  cursor: zoom-in;
  line-height: 0;
}

.jdc-hero-photo:hover img {
  opacity: 0.92;
}

.jdc-hero-photo img {
  transition: opacity 0.2s ease;
}

/* Bandas a ancho completo (mismo patrón que secciones en main) */
.jdc-band--light {
  background-color: #f8f9fa;
  width: 100%;
}

.jdc-band--situaciones {
  background-color: #e6d2ff;
  width: 100%;
}

/* —— Mosaico de las 4 cards (2×2) —— */
.jdc-mosaic-card {
  overflow: hidden;
}

/* Títulos de las 4 cards: entre párrafo (19px) y lead (38px) */
.jdc-mosaic-card h3.card-title {
  font-size: 28px !important;
  text-align: center;
  font-weight: 700;
}

.jdc-mosaic-img-link {
  display: block;
  line-height: 0;
  padding: 0;
  margin: 0;
}

/* Miniaturas 1×1 (fotos cuadradas) */
.jdc-mosaic-img,
.jdc-galeria-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.jdc-galeria-thumb img {
  transition: opacity 0.2s ease;
}

.jdc-mosaic-card .card-body {
  padding: 1rem 1.25rem;
}

/* —— Galería principal: miniaturas pegadas (row con no-gutters) —— */
.jdc-galeria-thumb {
  display: block;
  padding: 0;
  margin: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 0;
}

.jdc-galeria-thumb:hover img {
  opacity: 0.88;
}

/* —— Lightbox —— */
.jdc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem 1rem;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
}

.jdc-lightbox.is-open {
  display: flex;
}

body.jdc-lightbox-open {
  overflow: hidden;
}

.jdc-lightbox__inner {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  cursor: default;
}

.jdc-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 4rem);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.jdc-lightbox__close {
  position: fixed;
  top: 0.75rem;
  right: 1rem;
  z-index: 2001;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  opacity: 0.9;
}

.jdc-lightbox__close:hover,
.jdc-lightbox__close:focus {
  opacity: 1;
  outline: none;
}

.jdc-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2002;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  line-height: 0;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.jdc-lightbox__nav:hover,
.jdc-lightbox__nav:focus {
  opacity: 1;
  outline: none;
  color: #fff;
}

.jdc-lightbox__nav svg {
  display: block;
  width: 2rem;
  height: 2rem;
}

.jdc-lightbox__nav--prev {
  left: 0.25rem;
}

.jdc-lightbox__nav--next {
  right: 0.25rem;
}

.jdc-lightbox__nav[hidden] {
  display: none !important;
}

/* —— Botones alineados con el color del nav —— */
.btn-primary {
  background-color: var(--jdc-brand);
  border-color: var(--jdc-brand);
}

.btn-primary:hover {
  background-color: var(--jdc-brand-hover);
  border-color: var(--jdc-brand-hover);
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--jdc-brand-focus);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--jdc-brand-active);
  border-color: var(--jdc-brand-active);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--jdc-brand);
  border-color: var(--jdc-brand);
  opacity: 0.65;
}

.btn-outline-secondary {
  color: var(--jdc-brand);
  border-color: var(--jdc-brand);
}

.btn-outline-secondary:hover {
  background-color: var(--jdc-brand);
  border-color: var(--jdc-brand);
  color: #fff;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem var(--jdc-brand-focus);
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
  background-color: var(--jdc-brand-active);
  border-color: var(--jdc-brand-active);
  color: #fff;
}

.bg-dark .btn-outline-light {
  color: #e8fce6;
  border-color: var(--jdc-brand);
}

.bg-dark .btn-outline-light:hover {
  background-color: var(--jdc-brand);
  border-color: var(--jdc-brand);
  color: #fff;
}

.bg-dark .btn-outline-light:focus,
.bg-dark .btn-outline-light.focus {
  box-shadow: 0 0 0 0.2rem var(--jdc-brand-focus);
}

/* Navegación del pie (mismos destinos que el navbar) */
.jdc-footer-nav .nav-link:hover {
  color: #fff !important;
}

/* Volver arriba (minimal, translúcido) */
.jdc-back-top {
  position: fixed;
  z-index: 1500;
  right: 1rem;
  bottom: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.35rem);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease,
    background-color 0.15s ease;
}

.jdc-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.jdc-back-top:hover {
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
}

.jdc-back-top:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--jdc-brand-focus);
}

@media (prefers-reduced-motion: reduce) {
  .jdc-back-top {
    transition: none;
    transform: none;
  }

  .jdc-back-top.is-visible {
    transform: none;
  }
}