/* ============================================================
   BCS BAJO LA LUPA - LUXURY MAGAZINE EDITORIAL STYLES
   Personalización sobre Tailwind + fuentes custom
   ============================================================ */

/* ---- Base & global resets complementarios ---- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: #0f0f0f;
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

/* ---- Tipografía editorial refinada ---- */
.font-serif-display {
  font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
}

/* ---- Imágenes con tratamiento luxury moderno ---- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Efecto moderno para imágenes editoriales: sombra suave, borde sutil y filtro base */
img[src*="static/"] {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.6s ease, 
              filter 0.4s ease;
  will-change: transform;
}

/* Hover sutil en imágenes de secciones (no cards) para interactividad */
section:not(#secciones) img:hover {
  transform: scale(1.02);
  box-shadow: 0 30px 45px -15px rgba(204, 10, 10, 0.35);
}

/* Imágenes dentro de cards ya tienen escala con group-hover, reforzamos */
.group:hover img {
  filter: brightness(0.9) contrast(1.1);
}

/* ---- Sticky navigation backdrop y detalles ---- */
header {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Línea decorativa inferior en enlaces activos */
nav a {
  position: relative;
}

/* ---- Secciones generales espaciado ---- */
section {
  scroll-margin-top: 5rem;
}

/* ---- Línea divisora decorativa (ya usada en sección títulos) ---- */
.w-20.h-1 {
  background: linear-gradient(90deg, #cc0a0a 0%, #cc0a0a 70%, transparent 100%);
}

/* ---- Cards de secciones: toque luxury adicional ---- */
#secciones .group {
  background: linear-gradient(145deg, #0b0b0b 0%, #121212 100%);
}

#secciones .group .text-bc-red {
  letter-spacing: 0.22em;
  font-weight: 600;
}

#secciones h3 {
  line-height: 1.3;
}

/* Borde inferior sutil en cards para profundidad */
#secciones .group::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cc0a0a40, transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

#secciones .group:hover::after {
  opacity: 1;
}

/* ---- Botones y enlaces interactivos ---- */
a[href*="facebook"] i,
a[href*="mailto"] i {
  transition: transform 0.3s ease;
}

a[href*="facebook"]:hover i,
a[href*="mailto"]:hover i {
  transform: translateY(-2px);
}

/* ---- Footer refinamiento ---- */
footer {
  background: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #0b0b0b 70%);
}

footer i {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* ---- Personalización de la barra de desplazamiento (opcional, mantiene estilo oscuro) ---- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0b0b0b;
}

::-webkit-scrollbar-thumb {
  background: #cc0a0a;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e01010;
}

/* ---- Responsive ajustes finos ---- */
@media (max-width: 768px) {
  .font-serif-display {
    letter-spacing: -0.01em;
  }
  
  section {
    scroll-margin-top: 4.5rem;
  }
}

/* Ajuste para imágenes en columnas en móviles */
@media (max-width: 640px) {
  img[src*="static/"] {
    aspect-ratio: 3/4;
    object-fit: cover;
  }
}