/* =========================================================
   Variables y utilidades base
   ========================================================= */
:root{
  /* Colores */
  --msf-black:#000000;
  --msf-white:#FFFFFF;
  --msf-principal:#EAE9D8;   /* color de sección principal */
  --msf-secondary:#fff8f0;   /* color de apoyo */

  /* Layout */
  --radius:1rem;
  --nav-h:64px;              /* altura de header sticky (offset de anclas) */

  /* Tipografía */
  --font-base:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (min-width:992px){ :root{ --nav-h:72px; } }

/* Fuente global */
html, body { font-family: var(--font-base); }
button, .btn, .navbar, .nav-link, input, select, textarea { font-family: inherit; letter-spacing:.005em; }
h1, h2, h3, h4, h5, h6 { font-weight:600; }

/* Utilidades */
.bg-principal{ background:var(--msf-principal) !important; }
.bg-secondary-subtle{ background:var(--msf-secondary) !important; }
.object-fit-cover{ object-fit:cover; }
.card{ border-radius: var(--radius); }
.btn{ border-radius:.75rem; }

/* Accesibilidad */
:focus-visible{ outline:3px solid #ee0000; outline-offset:2px; }

/* =========================================================
   Header / Navbar (marca y links)
   ========================================================= */
.brand-wrap{
  max-width:75%;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  overflow:hidden;
}
.brand-msf svg{ display:block; height:26px; width:auto; }
.brand-amx{ height:26px; width:auto; max-width:180px; object-fit:contain; }

.navbar .nav-link{
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.25px;
  padding-left:.75rem;
  padding-right:.75rem;
}
@media (min-width:576px){
  .brand-msf svg{ height:28px; }
  .brand-amx{ height:28px; max-width:220px; }
}
@media (min-width:992px){
  .navbar .nav-link{ font-size:.85rem; }
  .brand-msf svg{ height:32px; }
  .brand-amx{ height:32px; max-width:260px; }
}
@media (min-width:992px){
  .nav-divider-lg{
    border-left:1px solid rgba(255,255,255,.35) !important;
    margin-left:.75rem !important;
    padding-left:.75rem !important;
  }
}
@media (max-width:991.98px){
  .navbar .nav-link{ padding-top:.625rem; padding-bottom:.625rem; }
}

/* =========================================================
   HERO (full-bleed con overlay)
   ========================================================= */
.hero{ position:relative; min-height:52vh; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.hero::after{ content:""; position:absolute; inset:0; background:#000; opacity:.5; z-index:1; pointer-events:none; }
.hero-content{ position:relative; z-index:2; padding:clamp(2rem,7vw,6rem) 1rem; }
@media (min-width:768px){ .hero-content{ padding-left:2rem; padding-right:2rem; } }

/* =========================================================
   Banda con contador (si se usa)
   ========================================================= */
.cd-num{ font-weight:600; line-height:1; }
@media (max-width:575.98px){ .cd-num{ font-size:2.25rem; } }
@media (min-width:576px) and (max-width:767.98px){ .cd-num{ font-size:2.75rem; } }
@media (min-width:768px) and (max-width:991.98px){ .cd-num{ font-size:3.25rem; } }
@media (min-width:992px){ .cd-num{ font-size:3.75rem; } }
@media (max-width:575.98px){ .cd-grid{ gap:1.25rem; } }

/* =========================================================
   Galería (cards)
   ========================================================= */

/* Si usaras <img class="card-img-top">, queda aquí por compatibilidad */
.card .card-img-top{
  display:block; width:100%;
  height:220px; object-fit:cover; object-position:center;
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
@media (min-width:576px){ .card .card-img-top{ height:240px; } }
@media (min-width:992px){ .card .card-img-top{ height:260px; } }

/* ===== Galería: miniaturas (versión única, SIN duplicados) ===== */
.thumb-fixed{
  aspect-ratio: 4 / 3;      /* altura homogénea por relación */
  overflow: hidden;
  border-top-left-radius:.5rem;
  border-top-right-radius:.5rem;
  background:#f4f4f4;
}
.thumb-fixed img{
  width:100%;
  height:100%;
  object-fit:cover;          /* recorte agradable en grid */
  object-position:center;
  display:block;
}

/* =========================================================
   Bloques 50/50 (imagen + texto) y mapa
   ========================================================= */
.half-block{ min-height:360px; }
@media (min-width:768px){ .half-block{ min-height:420px; } }
@media (min-width:992px){ .half-block{ min-height:520px; } }

.map-copy{ padding:2rem 1.25rem; }
@media (min-width:768px){ .map-copy{ padding:3rem 2rem; } }
@media (min-width:992px){ .map-copy{ padding:3rem 3rem; } }

/* =========================================================
   Footer
   ========================================================= */
.footer-dark{ background:#000; color:#fff; }
.footer-dark a{ color:#fff; text-decoration:none; opacity:.9; }
.footer-dark a:hover{ opacity:1; text-decoration:underline; }
.footer-links li+li{ margin-top:.5rem; }

.icon-24{ width:24px; height:24px; display:inline-flex; color:#fff; opacity:.9; }
.icon-24 svg{ width:24px; height:24px; display:block; }
.footer-sep{ border:0; border-top:1px solid rgba(255,255,255,.2); }

.brand-footer-logo svg{ height:40px; width:auto; display:block; }

/* Botones sociales redondos */
.btn-social{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#fff; color:#000;
  transition:transform .15s ease, opacity .15s ease;
}
.btn-social:hover{ transform:translateY(-2px); opacity:.95; }

/* =========================================================
   Navegación a anclas (FAQ, etc.)
   ========================================================= */
html{ scroll-behavior:smooth; }
#faq{ scroll-margin-top: var(--nav-h); }

/* =========================================================
   Modal / carrusel: respeta proporción original
   ========================================================= */

/* Eliminado el selector conflictivo:
   #obraCarousel .carousel-item .ratio>img { object-fit: cover; } */

.obra-slide{
  width:100%;
  height:100%;
  min-height:40vh;
  max-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;          /* letterboxing neutro */
}
.obra-slide-img{
  max-width:100%;
  max-height:80vh;
  width:auto;
  height:auto;
  object-fit:contain;       /* 🔑 mantiene proporción */
  display:block;
  background:#111;
}

/* Flechas del carrusel más visibles */
#obraCarousel .carousel-control-prev,
#obraCarousel .carousel-control-next{
  opacity:1;
  width:12%;
}
#obraCarousel .carousel-control-prev-icon,
#obraCarousel .carousel-control-next-icon{
  width:3rem; height:3rem; border-radius:999px;
  background-color:rgba(0,0,0,.78);
  background-size:60% 60%;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  filter:invert(1) brightness(1.6) drop-shadow(0 0 2px rgba(255,255,255,.6));
}
#obraCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#obraCarousel .carousel-control-next:hover .carousel-control-next-icon{
  background-color:rgba(0,0,0,.92);
}

/* (Opcional) flechas con color de marca
#obraCarousel .carousel-control-prev-icon,
#obraCarousel .carousel-control-next-icon{
  background-color: var(--brand-accent, #ff0040);
  filter:none;
}
*/

/* ===== Thumbs de ARTISTAS ===== */
.artist-thumb{
  aspect-ratio: 4 / 3;          /* marco parejo en la grilla */
  overflow: hidden;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  background: #f4f4f4;          /* letterboxing agradable si hay 'contain' */
}
.artist-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* default: recorta un poco */
  object-position: top center;   /* 🔑 prioriza la cara/cabeza */
  display: block;
}

/* Si detectamos retrato muy vertical, NO recortar: */
.artist-thumb.is-portrait img{
  object-fit: contain;           /* muestra todo sin cortar */
  object-position: center;
  background: #f4f4f4;           /* bordes neutros */
}