/* Symploké · piezas comunes a todas las páginas: scroll suave (Lenis), aparición al hacer scroll,
   color de acento en los dibujos al pasar por las tarjetas y pie verde */

/* ---------- Lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- aparición al hacer scroll ---------- */
@keyframes rvIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.rv:not(.in){opacity:0}
.rv.in{animation:rvIn 1s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion: reduce){
  .rv:not(.in){opacity:1}
  .rv.in{animation:none}
}

/* ---------- el dibujo de la tarjeta que se señala cambia de verde ----------
   En reposo: personas en blanco y mancha de fondo en verde apagado (#BFEBD7).
   data-hover en <html>: mancha (la mancha se enciende al acento del logo), ropa (personas en verde claro),
   entorno (plantas, muebles y objetos en acento) o fondo (todo el fondo del dibujo en verde muy claro) */
:root{--acc:#2FD08E;--acc-pale:#C4F4E0}
:is(.card,.qwin,.band,.ct-art) svg *{transition:fill .35s ease}
[data-hover="mancha"] :is(.card,.qwin,.band,.ct-art):hover .bg{fill:var(--acc)}
[data-hover="ropa"] :is(.card,.qwin,.band,.ct-art):hover .pp [fill="#FFFFFF"]{fill:var(--acc-pale)}
[data-hover="entorno"] :is(.card,.qwin,.band,.ct-art):hover :is([fill="#CDEEDD"],[fill="#A9E1C6"],[fill="#5FBF95"]):not(.pp *){fill:var(--acc)}
[data-hover="fondo"] :is(.card,.qwin,.band,.ct-art):hover svg > rect[width="400"]{fill:var(--acc-pale)}

/* selector para probar las variantes del acento (página de terapia) */
.hvpick{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:calc(100vw - 32px);padding:8px 10px;border-radius:18px;background:var(--bg);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,40,25,.14);font:500 13px/1 'DM Sans',sans-serif;color:var(--ink2)}
.hvpick span{padding:0 4px}
.hvpick button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer}
.hvpick button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--btntext)}

/* ---------- pie ---------- */
footer{background:#007A50 !important;color:#FFFFFF !important;border-top:0 !important}
footer a{color:inherit}

/* ---------- flecha de botones y enlaces: se adelanta un poco al pasar el ratón ---------- */
.arr{display:inline-block;transition:transform .3s cubic-bezier(.3,.7,.2,1.4)}
:is(a,button,.card,.qwin):hover .arr{transform:translateX(5px)}
@media (prefers-reduced-motion: reduce){ .arr{transition:none} }

/* ---------- cabecera: se compacta al empezar a bajar (clase .scrolled en <html>, la pone comun.js) ---------- */
.nav{transition:height .35s ease,margin-bottom .35s ease,box-shadow .35s ease}
.nav .brand{transition:font-size .35s ease,gap .35s ease}
.nav .brand svg{transition:width .35s ease,height .35s ease}
.nav .btn.small{transition:padding .35s ease,font-size .35s ease,transform .15s ease}
/* el margen inferior conserva el alto que ocupaba la cabecera, para que el contenido no salte al encogerla */
html.scrolled .nav{height:64px;margin-bottom:32px;box-shadow:0 1px 0 var(--line),0 8px 24px rgba(0,40,25,.06)}
html.scrolled .nav .brand{font-size:28px;gap:10px}
html.scrolled .nav .brand svg{width:40px;height:40px}
html.scrolled .nav .btn.small{padding:9px 18px;font-size:14px}
@media (max-width:860px){
  html.scrolled .nav{height:58px;margin-bottom:18px}   /* el margen guarda el hueco: el contenido no salta al encoger */
  html.scrolled .nav .brand{font-size:22px;gap:8px}
  html.scrolled .nav .brand svg{width:34px;height:34px}
  html.scrolled .nav .btn.small{padding:8px 12px;font-size:13px}
}
@media (prefers-reduced-motion: reduce){ .nav,.nav .brand,.nav .brand svg,.nav .btn.small{transition:none} }