/* Estilos compartidos — Jers Ancajima Fotografía */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Animación de entrada */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* Aparecer al hacer scroll (IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Tarjeta de historia / hover de imagen */
.history-card { overflow: hidden; cursor: pointer; }
.history-card .img-container { overflow: hidden; }
.history-card .img-container img { transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.history-card:hover .img-container img { transform: scale(1.05); }
.history-card .overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.1);
  opacity: 0; transition: opacity 0.5s ease;
}
.history-card:hover .overlay { opacity: 1; }

/* Menú móvil */
.mobile-menu { transition: opacity 0.4s ease, visibility 0.4s ease; }
.mobile-menu[hidden] { display: flex; opacity: 0; visibility: hidden; pointer-events: none; }
body.menu-open { overflow: hidden; }

/* ---- Rediseño editorial (referencia the-augusts) ---- */

/* Enlaces con subrayado que crece en acento */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0;
  background: #c74716; transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.link-underline:hover::after { width: 100%; }

/* Imagen editorial: zoom suave al hover del contenedor */
.editorial-img { overflow: hidden; }
.editorial-img img { transition: transform 1.2s cubic-bezier(0.16,1,0.3,1); width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-img:hover img { transform: scale(1.04); }

/* Nombre de lugar gigante en acento (estilo referencia) */
.place-name { color: #c74716; letter-spacing: 0.02em; line-height: 0.95; }

/* Filete fino */
.rule-thin { height: 1px; background: currentColor; opacity: 0.4; }

/* Palabra clave en mayúscula (ritmo editorial) */
.kw { text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; }

/* ---- Diagramación editorial: filas de 1, 2 o 3 fotos ---- */
.album-flow { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .album-flow { gap: 56px; } }
.fila { display: grid; gap: 12px; }
@media (min-width: 768px) { .fila { gap: 20px; } }
.fila-1 { grid-template-columns: 1fr; }
.fila-2 { grid-template-columns: repeat(2, 1fr); }
.fila-3 { grid-template-columns: repeat(3, 1fr); }
/* En móvil el tríptico baja a 2 columnas para que no queden sellos */
@media (max-width: 767px) { .fila-3 { grid-template-columns: repeat(2, 1fr); } }

/* Botón flotante de WhatsApp */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 9999px; background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22); transition: transform 0.3s ease;
}
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 32px; height: 32px; fill: #fff; }
@media (min-width: 768px) { .wa-fab { right: 28px; bottom: 28px; width: 60px; height: 60px; } }

/* ================= Motion pass (maestro) ================= */

/* Reveal al scroll — easing editorial + stagger por --i (30–80ms) */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Variantes direccionales (opt-in vía clase) */
.reveal-left  { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-left.is-visible, .reveal-right.is-visible { transform: none; }

/* Revelado editorial de imagen: el zoom se asienta al entrar en cuadro */
.editorial-img img { transform: scale(1); transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1); }
.editorial-img.reveal:not(.is-visible) img { transform: scale(1.09); }
.editorial-img:hover img { transform: scale(1.045); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }

/* Accesibilidad: sin movimiento, todo visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
  .editorial-img img,
  .editorial-img.reveal:not(.is-visible) img { transform: none !important; }
  .animate-fade-up { animation: none !important; opacity: 1 !important; }
}

/* ---- Pulido tipográfico global (espaciado y medida) ---- */

/* Aire entre palabras en titulares serif (evita apretujado en mayúsculas) */
h1, h2, h3, .place-name { word-spacing: 0.06em; }

/* Cuerpo de texto: medida de lectura cómoda (~66 caracteres) y viudas controladas */
main p { max-width: 68ch; text-wrap: pretty; }
/* Párrafos centrados conservan su centrado dentro de la medida */
.text-center p, p.mx-auto, .text-center .mx-auto { margin-left: auto; margin-right: auto; }

/* Ritmo vertical entre párrafos consecutivos */
main p + p { margin-top: 1.4em; }

/* Eyebrows: leve realce de palabra para las versalitas */
.font-label-caps { word-spacing: 0.1em; }

/* ---- Correcciones de composición ---- */

/* El wordmark y los ítems del menú nunca se parten en dos líneas */
nav a { white-space: nowrap; }

/* Escala fluida: el titular crece con la pantalla, sin saltos bruscos */
h1.font-display-lg { font-size: clamp(2.6rem, 7vw, 5.5rem); }
h2.font-display-lg { font-size: clamp(2.2rem, 5.2vw, 4.2rem); }
.place-name       { font-size: clamp(2.2rem, 5.6vw, 4.6rem); }
h2.font-headline-lg { font-size: clamp(1.8rem, 3.2vw, 3rem); }

/* Cuerpo: un punto más grande en pantallas amplias, cómodo en móvil */
.text-body-lg { font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
.text-body-md { font-size: clamp(1rem, 1.15vw, 1.12rem); }

/* Versalitas: menos tracking en móvil para que no se rompan */
@media (max-width: 767px) {
  .text-label-caps { letter-spacing: 0.16em; font-size: 12px; }
}