/* Hero */
.hero {
    background: url('../images/hero-livingroom.png') center/cover no-repeat;
    height: 40vh;
}
.hero-title {
  /* Escala entre móviles y desktop sin romper líneas */
  font-size: clamp(1.05rem, 1rem + 1.2vw, 1.6rem) !important;
  line-height: 1.25;
}
/* Iconos sociales del hero también fluidos */
.hero .bi {
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.5rem);
}
/* Un pelín de aire lateral en pantallas pequeñas para evitar cortes */
.hero .container {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* UX */
html { scroll-behavior: smooth; }
section { scroll-margin-top: 80px; }
#btnBackToTop { display: none; }

/* Footer heart pulse */
.heart {
    color: red;
    animation: pulse 1.5s infinite;
}
.coffee {
    color: #906040;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Optional: skeleton aspect */
.ratio-16x9.bg-body-tertiary {
    background-image: linear-gradient(90deg, var(--bs-tertiary-bg) 0%, #e9ecef 50%, var(--bs-tertiary-bg) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Texto general del relato */
.story .card-text {
    margin-bottom: 0.9rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.6;
}

/* Bloque de diálogos */
.story .dialogue {
    margin: 1rem 0 1.2rem;
    padding-left: 0.9rem;
    border-left: 3px solid rgba(0, 0, 0, 0.12);
}

/* Cada línea de diálogo */
.story .dialogue p {
    margin: 0.35rem 0;
    line-height: 1.6;
}

/* Añade automáticamente la raya de diálogo si alguna línea la pierde */
.story .dialogue p::before {
    content: "— ";
    opacity: 0.9;
}

/* Sutilezas visuales: alterna levemente los tonos de las líneas */
.story .dialogue p:nth-child(odd) { opacity: 0.95; }
.story .dialogue p:nth-child(even) { opacity: 0.85; }

/* Modo oscuro: suaviza el borde y mejora el contraste */
@media (prefers-color-scheme: dark) {
    .story .dialogue {
        border-left-color: rgba(255, 255, 255, 0.18);
    }
    .story .dialogue p::before {
        opacity: 0.85;
    }
}


/* ============================================
   Sombras sutiles (coherentes con el tema)
   ============================================ */
/* Variables por tema (ajustadas para no distraer) */
:root[data-bs-theme="light"] {
  --soft-shadow: 0 6px 18px rgba(33, 37, 41, 0.08);   /* gris oscuro con poca opacidad */
  --soft-shadow-strong: 0 10px 28px rgba(33, 37, 41, 0.25);
  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-border: rgba(0, 0, 0, 0.06);
  --bs-navbar-color: rgba(33, 37, 41, 0.75);
  --bs-navbar-hover-color: rgba(33, 37, 41, 1);
  --bs-navbar-brand-color: #212529;
  --bs-navbar-brand-hover-color: #212529;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(33,37,41,0.2);
}
:root[data-bs-theme="dark"] {
  --soft-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);      /* más opacidad en dark para mantener sutil */
  --soft-shadow-strong: 0 10px 28px rgba(0, 0, 0, 0.45);
  --nav-bg: rgba(33, 37, 41, 0.92);
  --nav-border: rgba(255, 255, 255, 0.08);
  --bs-navbar-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(255,255,255,0.2);
}

/* Aplicación a Cards (sutil por defecto) */
.card {
  box-shadow: var(--soft-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover {
  box-shadow: var(--soft-shadow-strong);
  transform: translateY(-5px); /* ligero lift imperceptible */
}

/* Navbar: sustituimos la sombra por defecto por una un pelín más suave/estable */
.navbar.shadow-sm,
.navbar.shadow,
.navbar {
  box-shadow: var(--soft-shadow);
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
}

.navbar .navbar-toggler-icon {
  background-image: var(--bs-navbar-toggler-icon-bg);
}
.navbar .navbar-toggler {
  border-color: var(--bs-navbar-toggler-border-color);
}
.navbar .navbar-brand { color: var(--bs-navbar-brand-color); }
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus { color: var(--bs-navbar-brand-hover-color); }
.navbar .navbar-nav .nav-link { color: var(--bs-navbar-color); }
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus { color: var(--bs-navbar-hover-color); }

@media (max-width: 576px) {
    .hero { height: 50vh; } /* reduce altura para evitar overflow vertical */
}