/* ============================================================
   Frumento Propiedades — Sistema de movimiento (páginas internas, 2026-10-05)

   Mismo lenguaje que la home (que tiene su copia en línea, junto con la
   entrada de marca y el hero). Lo activa movimiento.js:
   html.fr-anim  → las entradas pueden ocultar cosas antes de arrancar
   html.fr-listo → React ya pintó: arrancan encabezado y títulos
   html.fr-scroll / --fr-prog → encabezado compacto y línea de progreso

   Los selectores llevan "html" adelante: el CSS de cada página se monta
   después que este archivo y, a igual especificidad, ganaría.
   Solo se anima transform / opacity / clip-path.
   ============================================================ */
:root { --fr-ease:cubic-bezier(.16,1,.3,1); }

/* ── Encabezado ─────────────────────────────────────────────────────────── */
html.fr-anim:not(.fr-listo) header > div > a:first-child,
html.fr-anim:not(.fr-listo) header .fr-dnav,
html.fr-anim:not(.fr-listo) header .fr-burger { opacity:0; }
html.fr-listo header > div > a:first-child { animation:frLogoEntra 1.3s var(--fr-ease) .1s backwards; }
html.fr-listo header .fr-dnav, html.fr-listo header .fr-burger { animation:frBaja 1s var(--fr-ease) .3s backwards; }
html header[style*="fixed"] > div > a:first-child img { transition:transform .55s var(--fr-ease); transform-origin:left center; }
html.fr-scroll header[style*="fixed"] > div > a:first-child img { transform:scale(.82); }
html header[style*="fixed"]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, #A6823E, #C9A45C 60%, #DCBA7A); transform-origin:left; transform:scaleX(var(--fr-prog,0)); }

/* ── Título de la página: sale de una máscara; la etiqueta se cierra; después el resto ── */
html.fr-anim:not(.fr-listo) h1 { opacity:0; }
html.fr-listo h1 { animation:frTitulo 1.3s var(--fr-ease) .2s backwards !important; }
html.fr-listo :is(span, div):has(+ h1) { animation:frEtiqueta 1.5s var(--fr-ease) .05s backwards !important; }
html.fr-listo h1 + div:empty { animation:frRegla 1.1s var(--fr-ease) .6s backwards; transform-origin:center; }
html.fr-listo h1 ~ p { animation:frSube 1.1s var(--fr-ease) .45s backwards !important; }
html.fr-listo h1 ~ div:not(:empty) { animation:frSube 1.1s var(--fr-ease) .6s backwards; }

/* ── Títulos de sección (aparecen al scrollear, como en la home) ─────────── */
html .fr-reveal { transition:opacity 1.1s var(--fr-ease), transform 1.3s var(--fr-ease); transition-delay:var(--fr-d,0s); }
html .fr-reveal.fr-in { will-change:auto; }
html .fr-reveal > :is(span, div):first-child:has(+ h2) { transition:letter-spacing 1.4s var(--fr-ease), opacity 1.1s var(--fr-ease); }
html .fr-reveal:not(.fr-in) > :is(span, div):first-child:has(+ h2) { letter-spacing:.45em !important; opacity:0; }
html .fr-reveal > h2 { transition:clip-path 1.25s var(--fr-ease) .1s, transform 1.25s var(--fr-ease) .1s; }
html .fr-reveal:not(.fr-in) > h2 { clip-path:inset(0 0 100% 0); transform:translateY(.4em); }
html .fr-reveal > p { transition:opacity 1.1s var(--fr-ease) .35s, transform 1.1s var(--fr-ease) .35s; }
html .fr-reveal:not(.fr-in) > p { opacity:0; transform:translateY(14px); }

/* ── Fotos: las tarjetas entran enteras y la foto no se mueve adentro (ni ventanas que crecen
      ni zoom al aparecer). Al pasar el mouse queda el comportamiento de siempre de cada página. ── */
/* Tarjetas de la grilla del listado (el clip-path evita esquinas cuadradas durante el zoom del hover) */
html .fr-card > a:first-child { border-radius:16px 16px 0 0; clip-path:inset(0 round 16px 16px 0 0); }
html .fr-card > div:last-child > * { opacity:0; transform:translateY(12px); transition:opacity .8s var(--fr-ease), transform .8s var(--fr-ease); }
html .fr-card.fr-in > div:last-child > * { opacity:1; transform:none; }
html .fr-card.fr-in > div:last-child > :nth-child(1) { transition-delay:calc(var(--fr-d,0s) + .12s); }
html .fr-card.fr-in > div:last-child > :nth-child(2) { transition-delay:calc(var(--fr-d,0s) + .18s); }
html .fr-card.fr-in > div:last-child > :nth-child(3) { transition-delay:calc(var(--fr-d,0s) + .24s); }
html .fr-card { position:relative; }
html .fr-card::after { content:''; position:absolute; left:20px; right:20px; bottom:0; height:2px; background:#C9A45C; transform:scaleX(0); transition:transform .6s var(--fr-ease); pointer-events:none; }
html .fr-card:hover::after { transform:scaleX(1); }

/* ── Tarjetas del listado en vista lista: entran escalonadas al pintarse (--fr-d por tarjeta) ── */
html .fr-lc > div:last-child > * { animation:frSube .8s var(--fr-ease) backwards; animation-delay:calc(var(--fr-d,0s) + .12s); }

/* ── Ficha: la galería aparece; las similares, como las tarjetas ── */
html .fr-gallery .fr-gimg { animation:frAparece 1s ease backwards; }
html .fr-gallery .fr-gimg:nth-child(2) { animation-delay:.1s; }
html .fr-gallery .fr-gimg:nth-child(3) { animation-delay:.16s; }
html .fr-gallery .fr-gimg:nth-child(4) { animation-delay:.22s; }
html .fr-gallery .fr-gimg:nth-child(5) { animation-delay:.28s; }

@keyframes frLogoEntra { from { opacity:0; clip-path:inset(0 100% 0 0); transform:translateX(-8px); } to { opacity:1; clip-path:inset(0 0 0 0); transform:none; } }
@keyframes frBaja { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
@keyframes frTitulo { from { opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(.45em); } to { opacity:1; clip-path:inset(0 0 -15% 0); transform:none; } }
@keyframes frEtiqueta { from { opacity:0; letter-spacing:.5em; } }
@keyframes frRegla { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes frSube { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
@keyframes frAparece { from { opacity:0; } to { opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  html.fr-anim header > div > a:first-child, html.fr-anim header .fr-dnav, html.fr-anim header .fr-burger,
  html.fr-anim h1, html.fr-anim h1 ~ *, html.fr-anim :is(span, div):has(+ h1),
  html .fr-lc > div:last-child > *, html .fr-gallery .fr-gimg { animation:none !important; opacity:1 !important; }
  html .fr-reveal > *, html .fr-card > div:last-child > * { clip-path:none !important; transform:none !important; opacity:1 !important; transition:none !important; }
  html header[style*="fixed"] > div > a:first-child img { transition:none; }
}