/* Piezas comunes de las maquetas 5–7. Cada página define --v-bg --v-fg --v-mut --v-line --v-acc --v-card --v-ink y sus fuentes. */
[hidden]{display:none!important}
.v-lock{overflow:hidden}
.heart{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--v-line);background:transparent;color:var(--v-fg);border-radius:999px;padding:6px 12px;font:500 14px var(--sans);cursor:pointer;font-variant-numeric:tabular-nums}
.heart svg{fill:none;stroke:currentColor;stroke-width:1.8}
.heart[aria-pressed="true"]{color:var(--v-acc);border-color:var(--v-acc)}
.heart[aria-pressed="true"] svg{fill:currentColor}
.heart.pop svg{animation:pop .45s ease-out}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.45)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.heart:focus-visible,.v-btn:focus-visible{outline:2px solid var(--v-acc);outline-offset:2px}
.v-scrim{position:fixed;inset:0;background:rgba(8,6,4,.62);z-index:40;backdrop-filter:blur(3px)}
.v-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--v-card);color:var(--v-fg);max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
.v-in{display:grid;grid-template-columns:1fr;max-width:980px;margin:0 auto}
.v-fig{position:relative;overflow:hidden}
.v-fig img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;max-width:100%}
.v-body{display:flex;flex-direction:column;gap:12px;padding:18px max(16px,env(safe-area-inset-right,0px)) 22px max(16px,env(safe-area-inset-left,0px));min-width:0}
.v-kick{margin:0;font:400 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--v-acc)}
.v-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.v-name{font:400 clamp(28px,5vw,40px)/1.05 var(--deco);margin:0;letter-spacing:.02em}
.v-price{font:500 20px var(--sans);color:var(--v-acc);font-variant-numeric:tabular-nums;white-space:nowrap}
.v-desc{margin:0;color:var(--v-mut)}
.v-al{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.v-chip{border:1px solid var(--v-line);border-radius:999px;padding:2px 10px;font-size:13px}
.v-small{margin:0;font-size:12.5px;color:var(--v-mut)}
.v-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.v-btn{border:1px solid var(--v-acc);background:var(--v-acc);color:var(--v-ink);border-radius:999px;padding:10px 18px;font:600 14px var(--sans);cursor:pointer}
.v-btn.ghost{background:transparent;color:var(--v-fg);border-color:var(--v-line)}
.v-btn[disabled]{opacity:.45;cursor:not-allowed}
.v-comments{border-top:1px solid var(--v-line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.v-comments h4{margin:0;font:400 22px var(--deco)}
.v-list{display:flex;flex-direction:column;gap:8px}
.v-note{border:1px solid var(--v-line);border-radius:10px;padding:10px 12px}
.v-note p{margin:4px 0 0;overflow-wrap:anywhere}
.v-note-top{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.v-pend{font-size:12px;color:var(--v-acc);border:1px dashed var(--v-acc);border-radius:999px;padding:0 8px}
.v-form{display:flex;flex-direction:column;gap:8px}
.v-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--v-mut)}
.v-form input,.v-form textarea{font:400 16px var(--sans);color:var(--v-fg);background:transparent;border:1px solid var(--v-line);border-radius:10px;padding:10px;min-width:0}
.v-form input:focus,.v-form textarea:focus{outline:none;border-color:var(--v-acc)}
.v-form .v-btn{align-self:flex-start}
.v-err{margin:0;color:var(--v-acc);font-size:14px}
@media (min-width:820px){.v-sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(980px,calc(100% - 48px));border-radius:14px}.v-in{grid-template-columns:1.05fr 1fr}.v-fig img{height:100%;aspect-ratio:auto;min-height:420px}.v-body{padding:24px}}
.w-tile{position:relative;margin:0;overflow:hidden;min-width:0}
.w-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .9s ease}
.w-tile img.w-in{opacity:0}
.w-tile figcaption{position:absolute;left:10px;top:10px;z-index:2;font:500 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--v-acc);color:var(--v-ink);padding:3px 8px;border-radius:999px}
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.w-tile img,.rv{transition:none}.heart.pop svg{animation:none}}
body{margin:0}