/* Volver a Gardel — tema oscuro sobre Bootstrap 5.3 */

[data-bs-theme="dark"] {
  --bs-body-bg:         #0d0b0a;   /* casi-negro cálido; el negro puro halona bajo el dorado */
  --bs-body-color:      #e6e1d8;   /* 14,8:1 */
  --bs-emphasis-color:  #ffffff;
  --bs-border-color:    #2a2521;
  --bs-secondary-color: #a9a196;   /* 6,9:1 — seguro para texto chico atenuado */

  --bs-link-color:            #e8b66d;
  --bs-link-hover-color:      #f3cf98;
  --bs-link-color-rgb:        232, 182, 109;
  --bs-link-hover-color-rgb:  243, 207, 152;

  --vg-gold:     #e8b66d;   /* 11,2:1 sobre el fondo — seguro como texto */
  --vg-gold-dim: #b8894a;   /* 5,4:1 — bordes y títulos 18pt+, no párrafos */
  --vg-wine:     #6e1f2b;   /* relleno/hover — NUNCA texto (1,7:1) */
  --vg-surface:  #16120f;
}

body { background-color: var(--bs-body-bg); }

.vg-gold { color: var(--vg-gold); }
.vg-main { padding-top: 6rem; padding-bottom: 3rem; }

/* --- nav --- */
.vg-nav { background-color: rgb(13 11 10 / .94); border-bottom: 1px solid var(--vg-gold-dim); backdrop-filter: blur(6px); }
.vg-nav .navbar-brand { font-weight: 600; letter-spacing: .02em; }
.vg-nav .nav-link { color: var(--bs-body-color); }
.vg-nav .nav-link:hover,
.vg-nav .nav-link:focus-visible { color: var(--vg-gold); }
.vg-nav .nav-link.active { color: var(--vg-gold); font-weight: 600; }
.vg-nav .vg-lang { border: 1px solid var(--vg-gold-dim); border-radius: .375rem; padding-inline: .75rem; }
.vg-nav .vg-lang:hover { background-color: var(--vg-wine); color: #fff; }

.vg-skip { position: absolute; z-index: 1100; margin: .5rem; padding: .5rem 1rem;
           background: var(--vg-surface); border: 1px solid var(--vg-gold); border-radius: .375rem; }

/* --- cards / paneles --- */
.card { --bs-card-bg: var(--vg-surface); --bs-card-border-color: var(--bs-border-color); }
.card-header { border-bottom: 1px solid var(--vg-gold-dim); background-color: transparent; }
.card-header h2, .card-header h3 { color: var(--vg-gold); }

/* --- titulos --- */
h1, .h1 { color: var(--vg-gold); font-weight: 600; }
h1::after { content: ""; display: block; width: 4rem; height: 3px;
            background: var(--vg-gold-dim); margin-top: .75rem; }

/* --- galeria --- */
.vg-thumb { display: block; overflow: hidden; border-radius: .5rem; border: 1px solid var(--bs-border-color); }
.vg-thumb img { transition: transform .35s ease, filter .35s ease; width: 100%; height: 100%; object-fit: cover; }
.vg-thumb:hover img, .vg-thumb:focus-visible img { transform: scale(1.04); filter: brightness(1.08); }
figcaption { color: var(--bs-secondary-color); font-size: .925rem; }

/* --- carruseles ---
   BS 5.3 pinta .carousel-caption en negro bajo data-bs-theme=dark (asume carrusel
   sobre fondo claro) e invierte las flechas. Aca las fotos son oscuras: revertir. */
[data-bs-theme="dark"] .carousel .carousel-caption,
[data-bs-theme="dark"].carousel .carousel-caption { color: #fff; }
.carousel-caption {
  text-shadow: 0 2px 10px rgb(0 0 0 / .9), 0 0 30px rgb(0 0 0 / .7);
  background: linear-gradient(to top, rgb(0 0 0 / .55), transparent);
  left: 0; right: 0; bottom: 0; padding: 3rem 1rem 1.5rem;
}
[data-bs-theme="dark"] .carousel .carousel-control-prev-icon,
[data-bs-theme="dark"] .carousel .carousel-control-next-icon { filter: none; }
.carousel-control-prev, .carousel-control-next { width: 8%; }
.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: rgb(0 0 0 / .45); border-radius: 50%;
  padding: 1.25rem; background-size: 45%;
}
[data-bs-theme="dark"] .carousel .carousel-indicators [data-bs-target] { background-color: #fff; }
.carousel-item img { object-fit: cover; }

/* --- accesibilidad --- */
:focus-visible { outline: 3px solid var(--vg-gold); outline-offset: 2px; }

/* --- footer --- */
.vg-footer { border-top: 1px solid var(--bs-border-color); padding: 2rem 0; color: var(--bs-secondary-color); }

/* --- honeypot del formulario: fuera de pantalla, no display:none --- */
.vg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .carousel-item, .fade, .collapsing, .vg-thumb img { transition: none !important; }
}

/* --- portada (index.html): elegir idioma. Sin nav fija, el pie queda abajo --- */
.vg-portada { min-height: 100vh; display: flex; flex-direction: column; }
.vg-portada main { flex: 1; padding-block: 3rem 2rem; }
.vg-portada h1::after { margin-inline: auto; }
.vg-portada-img { max-height: 55vh; width: auto; }
.vg-portada-btn { color: var(--vg-gold); border: 1px solid var(--vg-gold-dim); min-width: 11rem; }
.vg-portada-btn:hover, .vg-portada-btn:focus-visible { background-color: var(--vg-wine); color: #fff; border-color: var(--vg-gold); }
.vg-flag { height: .8em; width: auto; vertical-align: -.06em; border-radius: 3px; margin-inline-end: .3rem; }