/* ==========================================================================
   MOTION.CSS — librería neutra de animaciones, transiciones y detalles.
   Sin marca: solo variables. Ajusta --accent/--surface/--ink/--line/--shadow.
   ========================================================================== */
:root{
  --ink:#151515; --surface:#fafafa; --line:#ddd; --accent:#c8963e; --shadow:rgba(0,0,0,.18);
  --ease-out:cubic-bezier(.23,1,.32,1);       /* entradas, hovers */
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* acordeones, iconos */
  --nav-h:72px;
}
html{ scroll-behavior:smooth; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tnum{ font-variant-numeric:tabular-nums; }
h1,h2,h3{ text-wrap:balance; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; border:3px solid var(--surface); }
::-webkit-scrollbar-track{ background:var(--surface); }
[hidden]:not([hidden=until-found i]){ display:none!important; }

/* ---- Scroll-reveal (fade + sube) con escalonado ---- */
.reveal{ opacity:0; transform:translateY(28px);
  transition:opacity 750ms var(--ease-out), transform 750ms var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:90ms; }
.reveal:nth-child(3){ transition-delay:180ms; }
.reveal:nth-child(4){ transition-delay:270ms; }

/* ---- Tarjeta con levitación + tilt 3D (JS pone --rx/--ry) ---- */
.card-tilt{ transform:translateY(0) rotateX(0) rotateY(0);
  transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); transform-style:preserve-3d; }
.card-tilt:hover{ transform:translateY(-6px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  box-shadow:0 20px 36px -16px var(--shadow); }
.card-tilt .link{ display:inline-flex; gap:6px; transition:gap 180ms var(--ease-out); }
.card-tilt:hover .link{ gap:10px; }              /* la flecha se separa */

/* ---- Acordeón / FAQ: alto animado con grid + "+" que gira a "−" ---- */
.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 320ms var(--ease-in-out); }
.acc-panel > *{ overflow:hidden; }
.acc-item.open .acc-panel{ grid-template-rows:1fr; }
.plus{ position:relative; width:14px; height:14px; flex:none; }
.plus::before,.plus::after{ content:""; position:absolute; background:currentColor;
  transition:transform 260ms var(--ease-in-out), opacity 260ms var(--ease-in-out); }
.plus::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
.plus::after{ top:0; left:50%; width:2px; height:100%; transform:translateX(-50%); }
.acc-item.open .plus::after{ opacity:0; transform:translateX(-50%) rotate(90deg); }

/* ---- Botón volver arriba / FAB ---- */
.back-to-top,.fab{ position:fixed; right:20px; bottom:20px; z-index:60;
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out), background 200ms var(--ease-out); }
.back-to-top{ opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; }
.back-to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.back-to-top:active{ transform:scale(.92); }
.fab:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -12px var(--shadow); }

/* ---- Botones: press feedback ---- */
.btn{ transition:background 180ms var(--ease-out), transform 140ms var(--ease-out), border-color 180ms var(--ease-out); }
.btn:active{ transform:scale(.97); }

/* ---- Barra CTA fija (móvil): sube desde abajo tras el hero, se oculta en contacto ---- */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(110%); transition:transform 280ms var(--ease-out); }
.sticky-cta.show{ transform:none; }
@media (prefers-reduced-motion:reduce){ .sticky-cta{ transition:none; } }

/* ---- Vídeo de fondo lazy: fade-in cuando ya reproduce ---- */
.bgvid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s var(--ease-out); pointer-events:none; }
.bgvid.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .bgvid{ display:none; } }

/* ---- Línea de tiempo con progreso ---- */
.timeline{ position:relative; }
.tl-list{ list-style:none; margin:0; padding:0 0 0 34px; }
.tl-line{ position:absolute; left:10px; top:8px; bottom:8px; width:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.tl-line i{ position:absolute; inset:0; background:var(--accent); transform-origin:top; transform:scaleY(0); border-radius:2px; }
.tl-item{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:12px; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.tl-item::before{ content:''; position:absolute; left:-30px; top:26px; width:10px; height:10px; border-radius:50%; background:var(--line); border:2px solid var(--surface); }
.tl-item.is-current::before{ background:var(--accent); }
.tl-n{ font-size:1.4rem; color:var(--ink); opacity:.4; line-height:1; }
.tl-item.is-current .tl-n{ color:var(--accent); opacity:1; }

/* ---- Revelado en cortina: clip-path que se abre en vez de fundido+desplazamiento (mismo JS que .reveal) ---- */
.reveal-clip{ clip-path:inset(12% 0 12% 0 round 10px); transition:clip-path 1.1s var(--ease-out); }
.reveal-clip.in{ clip-path:inset(0 0 0 0 round 10px); }
@media (prefers-reduced-motion:reduce){ .reveal-clip{ clip-path:none; transition:none; } }

/* ---- Galería en mampostería (CSS columns, sin JS de layout) ---- */
.masonry{ columns:3 320px; column-gap:16px; }
.mas-item{ break-inside:avoid; margin:0 0 16px; position:relative; overflow:hidden; border-radius:6px; background:var(--line); cursor:zoom-in; display:block; width:100%; padding:0; border:0; text-align:left; }
.mas-item img{ width:100%; height:auto; display:block; transition:transform .8s var(--ease-out); }
.mas-item:hover img{ transform:scale(1.04); }
.mas-item figcaption{ position:absolute; inset:auto 0 0 0; padding:40px 16px 14px; background:linear-gradient(0deg, var(--shadow), transparent); display:flex; justify-content:space-between; align-items:baseline; gap:10px; color:var(--surface); }
.mas-item[hidden]{ display:none; }
@media (max-width:640px){ .masonry{ columns:2 150px; } }

/* ---- Visor de galería en <dialog> nativo, con anterior/siguiente ---- */
.visor{ border:0; padding:0; margin:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; background:var(--ink); color:var(--surface); }
.visor::backdrop{ background:color-mix(in srgb, var(--ink) 92%, transparent); }
.visor-dentro{ height:100%; display:grid; grid-template-rows:1fr auto; padding:64px 16px 18px; }
.visor-dentro figure{ margin:0; display:flex; align-items:center; justify-content:center; min-height:0; }
.visor-dentro img{ max-height:100%; max-width:min(100%,900px); object-fit:contain; border-radius:6px; }
.visor-pie{ display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:900px; width:100%; margin:14px auto 0; }
.redondo{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:none; color:inherit; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; line-height:1; transition:border-color .2s ease; }
.redondo:hover{ border-color:currentColor; }
.visor .cerrar{ position:absolute; top:10px; right:12px; }
.visor-nav{ display:flex; gap:10px; }

/* ---- Accesibilidad: sin movimiento ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .sh-content,.sh-media,.story-world,.card-tilt{ transition:none; }
  .lightbox-backdrop,.lightbox-panel{ transition:opacity 150ms linear; transform:none; }
  .back-to-top{ transition:opacity 150ms linear; }
}