/* Fuentes locales (subconjunto latino: incluye tildes y ñ) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/space-grotesk.woff2") format('woff2')}
@font-face{font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/mrs-saint-delafield.woff2") format('woff2')}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#2A2A2C;font-family:'Space Grotesk',system-ui,sans-serif;color:#fff}
img{max-width:100%}
.grain{background-image:url("../img/textura-grano.png");background-size:256px 256px}
a{color:inherit;text-decoration:none}
a:hover{opacity:.82}
a:focus-visible,button:focus-visible{outline:3px solid #A99BFF;outline-offset:3px}
input:focus-visible,textarea:focus-visible{outline:3px solid #A99BFF;outline-offset:2px;border-color:#A99BFF}
input::placeholder,textarea::placeholder{color:#A9A9B2}
[hidden]{display:none!important}
/* Evita scroll horizontal por los adornos SVG en pantallas pequeñas */
header{max-width:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Transición suave al cambiar de página (Chrome, Edge, Safari recientes) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ---------- Animaciones al hacer scroll ---------- */
/* Se usan las propiedades translate/scale para no pisar los transform que ya trae el diseño */
.js-anim .rv{
  opacity:0;translate:0 32px;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s)
}
.js-anim .rv-img{
  opacity:0;scale:1.06;
  transition:opacity 1s ease,scale 1.2s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s)
}
.js-anim .rv.visible{opacity:1;translate:0 0}
.js-anim .rv-img.visible{opacity:1;scale:1}
header > svg[aria-hidden="true"]{will-change:rotate,translate}

/* Zoom suave en las imágenes de proyectos al pasar el mouse */
a[aria-label^="Ver"] img,a[aria-label^="Ver"] img.visible{transition:scale .6s cubic-bezier(.2,.7,.2,1),opacity 1s ease}
a[aria-label^="Ver"]:hover img,.js-anim a[aria-label^="Ver"]:hover img.visible{scale:1.04}
a[aria-label^="Ver"]:hover{opacity:1}

/* ---------- Parallax ---------- */
/* Las imágenes con parallax quedan un poco ampliadas para que al moverse no se vea el borde */
.js-anim .px-img{scale:1.12}
.js-anim .rv-img.px-img{scale:1.2}
.js-anim .rv-img.px-img.visible{scale:1.12}
.js-anim a[aria-label]:hover img.px-img,.js-anim a[aria-label]:hover img.px-img.visible{scale:1.16}
.px-img,header h1{will-change:translate}

/* ---------- Franja de valores (Sobre mí) ---------- */
.valores{
  position:relative;max-width:1200px;margin:0 auto;padding:0;list-style:none;
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:clamp(18px,3.6vw,56px);
  font-size:clamp(22px,3.3vw,46px);line-height:1;letter-spacing:-.02em;text-transform:uppercase
}
.valores__item{font-weight:700;text-align:center;white-space:nowrap}
.valores__item--acento{font-weight:300;color:#A99BFF}
.valores__punto{flex:none;width:12px;height:12px;border-radius:50%;background:#A99BFF}
@media (max-width:720px){
  .valores{flex-direction:column;gap:22px;font-size:clamp(34px,10vw,52px)}
  .valores__punto{width:10px;height:10px}
}