/* Vallehogar · animaciones web (1a entrada, 1c banner, 1e etiquetas). Diseño original tal cual;
   al final, los ajustes para encajarlo en la web (ver «Encaje en la web»). */
:root{--vh-deep:#23483A;--vh-green:#2F5D4A;--vh-green-h:#264E3E;--vh-mint:#9CC7A6;--vh-paper:#F7F6F2;--vh-ink:#262626;--vh-ease:cubic-bezier(.2,.8,.2,1);}

/* 1a · Entrada: telón con logo */
.vh-intro{position:fixed;inset:0;z-index:9999;background:var(--vh-paper);display:flex;align-items:center;justify-content:center;gap:20px;transition:transform .95s cubic-bezier(.75,0,.2,1);}
.vh-intro__mark{width:110px;height:110px;opacity:0;transform:scale(.55);transition:opacity .4s ease,transform .7s cubic-bezier(.34,1.56,.64,1);}
.vh-intro__word{display:flex;flex-direction:column;gap:3px;clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.65,0,.35,1);}
.vh-intro__word img{display:block;width:280px;height:auto;}
.vh-intro.is-mark .vh-intro__mark{opacity:1;transform:scale(1);}
.vh-intro.is-word .vh-intro__word{clip-path:inset(0 0 0 0);}
.vh-intro.is-out{transform:translateY(-100%);}
.vh-up{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .8s var(--vh-ease);transition-delay:var(--d,0s);}
.vh-ready .vh-up{opacity:1;transform:none;}

/* 1c · Banner: paisaje vivo */
.vh-banner{position:relative;height:420px;border-radius:14px;overflow:hidden;background:var(--vh-deep);color:#fff;font-family:inherit;}
.vh-banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:vhKb 20s ease-in-out infinite alternate;}
.vh-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,36,28,.78) 0%,rgba(18,36,28,.35) 60%,rgba(18,36,28,.1) 100%);}
.vh-banner__body{position:absolute;z-index:1;left:clamp(24px,6vw,64px);right:24px;top:64px;max-width:560px;}
.vh-banner__msgs{position:relative;height:180px;}
.vh-banner__msg{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform 1s var(--vh-ease);}
.vh-banner__msg.is-prev{transform:translateY(-18px);}
.vh-banner__msg.is-on{opacity:1;transform:none;}
.vh-banner__eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--vh-mint);margin-bottom:14px;}
.vh-banner__title{font-size:clamp(30px,4vw,46px);line-height:1.06;font-weight:700;letter-spacing:-.025em;margin:0;text-wrap:pretty;}
.vh-banner__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.vh-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.05em;text-decoration:none;color:#fff;transition:background .25s ease;}
.vh-btn--primary{background:var(--vh-green);}
.vh-btn--primary:hover{background:var(--vh-green-h);color:#fff;}
.vh-btn--ghost{border:1px solid rgba(255,255,255,.55);font-weight:600;}
.vh-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;}
.vh-btn__arrow{display:inline-block;animation:vhNudge 2.4s ease-in-out infinite;}
.vh-banner__dots{position:absolute;z-index:1;left:clamp(24px,6vw,64px);bottom:30px;display:flex;gap:8px;}
.vh-banner__dots span{width:32px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);transition:background .6s ease;}
.vh-banner__dots span.is-on{background:#fff;}

/* 1e · Etiquetas: cinta que se despliega */
.vh-card{background:#fff;border:1px solid #E6E4DD;border-radius:14px;overflow:hidden;transition:transform .35s var(--vh-ease),box-shadow .35s ease;}
.vh-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(30,40,35,.14);}
.vh-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;}
.vh-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--vh-ease);}
.vh-card:hover .vh-card__media img{transform:scale(1.06);}
.vh-tag{position:absolute;left:14px;top:14px;border-radius:6px;overflow:hidden;display:flex;}
.vh-tag__in{display:flex;align-items:center;white-space:nowrap;padding:7px 10px;font-size:10px;font-weight:700;letter-spacing:.1em;background:var(--vh-green);color:#fff;transform:translateX(-105%);transition:transform .7s var(--vh-ease);transition-delay:var(--d,.2s);}
.vh-tag.is-in .vh-tag__in{transform:none;}
.vh-tag__detail{display:inline-block;overflow:hidden;max-width:0;opacity:0;font-weight:600;letter-spacing:.04em;transition:max-width .45s var(--vh-ease),opacity .3s ease;}
.vh-card:hover .vh-tag__detail{max-width:160px;opacity:1;}
.vh-tag--rebajado .vh-tag__in{background:var(--vh-mint);color:#1E3A2E;}
.vh-tag--exclusiva .vh-tag__in{background:var(--vh-ink);}

@keyframes vhKb{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.14) translate(-2%,-1.5%)}}
@keyframes vhNudge{0%,60%,100%{transform:translateX(0)}75%{transform:translateX(5px)}}

@media (prefers-reduced-motion:reduce){
  .vh-intro{display:none;}
  .vh-up,.vh-tag__in{opacity:1;transform:none;transition:none;}
  .vh-banner__img,.vh-btn__arrow{animation:none;}
}

/* ------------------------------------------------------------ Encaje en la web */
/* Solo con JavaScript se esconde el contenido que entra (si falla el script, se ve todo) */
html:not(.vh-js) .vh-up{opacity:1;transform:none;}
html:not(.vh-js) .vh-intro, html.vh-sin-intro .vh-intro{display:none;}
/* Pase lo que pase, el telon no se queda: a los 4 s se va solo */
.vh-intro{animation:vhIntroFuera 0s 4s forwards;}
@keyframes vhIntroFuera{to{visibility:hidden;pointer-events:none;}}
.vh-intro__mark{object-fit:contain;}
.vh-intro__word img{max-width:62vw;}
@media (max-width:560px){.vh-intro{flex-direction:column;gap:14px;}.vh-intro__mark{width:84px;height:84px;}}
/* El banner va dentro del contenedor de la portada */
.vh-banner__title{color:#fff;font-family:var(--display);}
.vh-banner__ctas .vh-btn{font-family:var(--display);}
@media (max-width:720px){.vh-banner{height:460px;}.vh-banner__body{top:40px;}.vh-banner__msgs{height:200px;}}
/* Las etiquetas van junto a las de la ficha (En venta...), no encima */
.etiquetas .vh-tag{position:static;}
.tarjeta:hover .vh-tag__detail{max-width:160px;opacity:1;}