/* ============================================================
   GPI · Capa de elegancia / motion (sitio Territorio)
   ============================================================ */

/* Fix: las imágenes reales no deben heredar el padding/rayas del placeholder */
img.photo, img.av{padding:0 !important;background:none !important}


/* Scroll-reveal — sólo se activa cuando JS añade .reveal,
   así que sin JS el contenido se ve normal (progressive enhancement) */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .85s cubic-bezier(.16,.84,.44,1),
               transform .85s cubic-bezier(.16,.84,.44,1);
    will-change:opacity,transform;
  }
  .reveal.in{opacity:1;transform:none}
}

/* Header: sombra suave al hacer scroll */
header{transition:box-shadow .35s ease, background .35s ease, border-color .35s ease}
header.scrolled{box-shadow:0 14px 40px -28px rgba(0,0,0,.45)}

/* Menú: subrayado animado elegante */
.navlinks a:not(.btn){position:relative}
.navlinks a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.16,.84,.44,1);
}
.navlinks a:not(.btn):hover::after{transform:scaleX(1)}
.navlinks a.active:not(.btn)::after{transform:scaleX(1);background:var(--clay,currentColor)}

/* Botones: ligera elevación */
.btn{transition:transform .28s cubic-bezier(.16,.84,.44,1), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .28s ease}
.btn:hover{transform:translateY(-2px)}

/* Tarjetas con imagen: zoom suave + clip */
.card{overflow:hidden}
.card .ph, .card img.photo{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.card:hover img.photo{transform:scale(1.05)}

/* Profundidad en imágenes destacadas */
.hero-media{box-shadow:0 46px 90px -54px rgba(20,30,40,.5)}
.team-photo img{box-shadow:0 36px 80px -52px rgba(20,30,40,.45)}

/* Foco accesible y elegante */
a:focus-visible,.btn:focus-visible,button:focus-visible{
  outline:2px solid currentColor;outline-offset:3px;border-radius:2px;
}

/* Selección de texto sutil */
::selection{background:rgba(127,127,127,.22)}