/* ================================================================
   C'est Magnifique by Devolder — Estilos compartidos
   Usado por index.html y galeria.html
   ================================================================ */

html { scroll-behavior: smooth; }

body { font-family: 'Manrope', sans-serif; color: #1C1714; }

.font-serif { font-family: 'Fraunces', serif; }
.tracking-wide-eyebrow { letter-spacing: 0.22em; }

/* Subrayado tipo "trazo de pincel" bajo títulos */
.brush-underline path {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: brushDraw 1.1s ease-out forwards;
  animation-delay: .15s;
}
@media (prefers-reduced-motion: reduce) {
  .brush-underline path { animation: none; stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}
@keyframes brushDraw { to { stroke-dashoffset: 0; } }

/* Efecto de elevación pulido con sombra sutil (tarjetas) */
.card-lift { transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(28,23,20,0.25); border-color: #C9A24B; }

/* Enlaces de navegación (header oscuro) */
.nav-link { position: relative; color: #F1E8DA; transition: color .3s ease; }
.nav-link:hover { color: #C9A24B; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: #C9A24B;
  transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }

.mobile-link { color: #F1E8DA; transition: color .3s ease; }
.mobile-link:hover { color: #C9A24B; }

.focus-gold:focus-visible { outline: 2px solid #C9A24B; outline-offset: 3px; }

::selection { background: #C9A24B; color: #1C1714; }

/* Tiles de fotos con efecto zoom + duotono al hover */
.photo-tile { position: relative; overflow: hidden; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.photo-tile:hover img { transform: scale(1.06); }
.photo-duotone { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,23,20,0) 40%, rgba(28,23,20,0.65) 100%); }