/* ==========================================
   Cerro de Sangre - Estilos CSS
   Versión 1.0
   ========================================== */

/* Reset esencial */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow-x: hidden; /* evita scroll lateral */
  height: 100%;
}

/* Hero ocupa exactamente la altura visible */
.hero {
  position: relative;
  width: 100%;
  height: 100dvh;       /* altura dinámica más precisa */
  min-height: 100svh;   /* respaldo */
  overflow: hidden;
  isolation: isolate;   /* para overlays/blend modes */
}

/* Imagen de fondo responsiva en cover */
.bg-image,
.bg-image picture,
.bg-image img {
  display: block;
  width: 100%;
  height: 100%;
}
.bg-image img {
  object-fit: cover;
  object-position: 50% 68%; /* ajusta encuadre según contenido */
  -webkit-user-drag: none;
}

/* Overlay centrado */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 2rem;
}
.overlay > * {
  pointer-events: auto;
}

/* Imagen dentro del overlay */
.overlay-img {
  max-width: min(80%, 1080px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.45));
  will-change: transform;
  transition: transform 160ms cubic-bezier(.22,.61,.36,1);
}
.overlay-img:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .overlay-img {
    max-width: 90%;
  }
  .bg-image img {
    object-position: center 30%; /* encuadre diferente en pantallas altas */
  }
}

/* iOS Safari: usar fill-available */
@supports (-webkit-touch-callout: none) {
  html, body {
    height: -webkit-fill-available;
  }
  .hero {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }
}

/* (Opcional) Grano vintage */
.vintage-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 1px;
  z-index: 2;
}

/* Foco accesible */
:focus-visible {
  outline: 2px solid rgba(255, 187, 120, .9);
  outline-offset: 2px;
}

/* Respeta preferencias de movimiento */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}