/* home-v3 · detalles (14-10-2026). Lo arma home-v3-detalles.js. */

/* 1 · el menú marca la sección en pantalla: el nombre en bordó y una línea dorada con un rombo que se desliza hasta ella */
.top__nav--espia { position: relative; }
.top__nav--espia a { position: relative; transition: color .35s ease; }
.top__nav--espia a.es-actual { color: var(--burgundy); }
.top__marca {
  position: absolute; left: 0; bottom: 3px; height: 2px; width: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0) 0%, var(--gold) 22%, var(--gold) 78%, rgba(201, 168, 76, 0) 100%);
  transition: transform .55s cubic-bezier(.22, .8, .24, 1), width .55s cubic-bezier(.22, .8, .24, 1), opacity .35s ease;
}
.top__marca::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: var(--gold); transform: rotate(45deg) scale(.4); box-shadow: 0 0 0 2px var(--white);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .12s;
}
.tiene-actual .top__marca { opacity: 1; }
.tiene-actual .top__marca::after { transform: rotate(45deg) scale(1); }
.top__marca--quieta, .top__marca--quieta::after { transition: none !important; }

/* 2 · el destello dorado de «Family Story» (FL v2) en la cursiva de algunos títulos */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brillo {
    background-image: linear-gradient(100deg, var(--gold-display) 0%, var(--gold-display) 41%, #D7B35A 46%, #F1D995 50%, #D7B35A 54%, var(--gold-display) 59%, var(--gold-display) 100%);
    background-size: 260% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding-right: .08em; margin-right: -.08em;   /* que la cursiva no se corte a la derecha */
  }
  .display--light .brillo {
    background-image: linear-gradient(100deg, #E6CB7E 0%, #E6CB7E 41%, #F3DFA4 46%, #FFF5D6 50%, #F3DFA4 54%, #E6CB7E 59%, #E6CB7E 100%);
  }
  .brillo.brilla { animation: lh-brillo 7s ease-in-out .9s infinite; }
}
@keyframes lh-brillo { 0% { background-position: 100% 0; } 42%, 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .top__nav--espia a, .top__marca, .top__marca::after { transition: none; }
  .brillo.brilla { animation: none; }
}