/* Tienda: lienzo claro con tarjetas, como un catálogo (tokens del manual v4.0) */
.shop-page { background: var(--gs-color-bg-default); }
.shop-page main { padding-top: 80px; background: var(--gs-color-bg-default); min-height: 70vh; }
.shop-page .rail { display: none; }
.t-head { padding-block: clamp(36px, 5vw, var(--gs-space-8)) var(--gs-space-2); }
.t-head h1 { margin: 0 0 var(--gs-space-3); font-family: var(--gs-font-heading); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: var(--gs-tracking-display); color: var(--gs-color-text-heading); }
.t-head h1::after { content: ""; display: block; width: 56px; height: 3px; margin: var(--gs-space-3) 0 0; border-radius: var(--gs-radius-pill); background: var(--gs-bosque-600); }
.t-head p { margin: 0; max-width: var(--gs-measure); color: var(--gs-color-text-default); }
.t-head .t-demo { margin-top: var(--gs-space-4); display: inline-block; font-size: var(--gs-text-small); font-weight: 600; color: var(--pine); background: var(--gs-lima-100); border: 1px solid var(--gs-lima-200); border-radius: var(--gs-radius-pill); padding: var(--gs-space-2) var(--gs-space-4); }
.t-demo[hidden] { display: none; }
.t-list { padding-block: var(--gs-space-5) clamp(var(--gs-space-7), 6vw, 80px); }
.t-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gs-space-3); margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--gs-space-2); }
.chips[hidden] { display: none; }
.chip { font-weight: 600; font-size: var(--gs-text-small); color: var(--pine); background: var(--gs-white); border: 1px solid var(--gs-color-border-input); border-radius: var(--gs-radius-pill); padding: var(--gs-space-2) var(--gs-space-4); min-height: var(--gs-space-touch); transition: background-color var(--gs-duration-fast) var(--gs-easing-standard), color var(--gs-duration-fast) var(--gs-easing-standard), border-color var(--gs-duration-fast) var(--gs-easing-standard); }
.chip:hover { border-color: var(--pine); }
.chip[aria-pressed="true"] { background: var(--pine); color: var(--chalk); border-color: var(--pine); }
.t-count { margin: 0 0 0 auto; font-size: var(--gs-text-small); color: var(--gs-color-text-muted); }
.t-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gs-space-5); }
.t-grid[hidden], .tp[hidden] { display: none; }
.tp { display: flex; flex-direction: column; background: var(--gs-card-bg); border: 1px solid var(--chalk-line); border-radius: var(--gs-card-radius); overflow: hidden; box-shadow: 0 14px 30px -24px rgba(28, 78, 56, .5); transition: transform var(--gs-duration-fast) var(--gs-easing-standard), box-shadow var(--gs-duration-fast) var(--gs-easing-standard); }
@media (hover: hover) and (pointer: fine) { .tp:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(28, 78, 56, .55); } }
.tp-ph { position: relative; aspect-ratio: 4 / 3; background: var(--gs-lima-100); overflow: hidden; }
.tp-ph img { width: 100%; height: 100%; object-fit: cover; }
.tp-badge { position: absolute; top: 12px; right: 12px; background: var(--pine); color: var(--chalk); font-size: var(--gs-text-label); font-weight: 600; letter-spacing: var(--gs-tracking-label); text-transform: uppercase; padding: var(--gs-space-1) var(--gs-space-3); border-radius: var(--gs-radius-sm); }
/* «Vendido»: franja lima sólida con texto bosque (sin blanco sobre lima, sin velo ni sombra) */
.tp-sold { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; font-family: var(--gs-font-heading); font-weight: 700; font-size: clamp(2rem, 4.5vw, 2.8rem); letter-spacing: .04em; text-transform: uppercase; color: var(--gs-color-text-on-accent); }
.tp-sold::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 64px; transform: translateY(-50%); background: var(--gs-color-action-accent); z-index: -1; }
.tp-b { display: flex; flex-direction: column; gap: var(--gs-space-2); padding: var(--gs-card-padding) 20px 20px; flex: 1; }
.tp-b h3 { margin: 0; font-family: var(--gs-font-heading); font-weight: 700; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.01em; color: var(--gs-color-text-heading); }
.tp-l { margin: 0; font-size: var(--gs-text-small); color: var(--gs-color-text-muted); }
.tp-s { list-style: none; margin: var(--gs-space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gs-space-2); }
.tp-s li { font-size: .8rem; font-weight: 600; color: var(--pine); background: var(--gs-lima-100); border-radius: var(--gs-radius-pill); padding: var(--gs-space-1) var(--gs-space-3); }
.tp-f { display: flex; align-items: center; justify-content: space-between; gap: var(--gs-space-3); margin-top: auto; padding-top: var(--gs-space-4); border-top: 1px solid var(--chalk-line); }
.tp-p { font-family: var(--gs-font-body); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gs-color-text-heading); }
.tp-buy { display: inline-flex; align-items: center; justify-content: center; min-height: var(--gs-button-min-height); padding: 0 var(--gs-space-5); border-radius: var(--gs-button-radius); background: var(--gs-button-primary-bg); color: var(--gs-button-primary-text); font-weight: 600; font-size: var(--gs-text-button); text-decoration: none; transition: background-color var(--gs-duration-fast) var(--gs-easing-standard), transform var(--gs-duration-fast) var(--gs-easing-standard); }
.tp-buy:hover { background: var(--gs-button-primary-bg-hover); transform: translateY(-1px); }
.tp.sold .tp-ph img { filter: grayscale(.5); opacity: .8; }
.tp.sold .tp-p { color: var(--gs-color-text-muted); text-decoration: line-through; }
.t-note a { color: var(--gs-color-text-link); font-weight: 600; }
.t-empty { text-align: center; padding: 40px 0; }
.t-empty[hidden] { display: none; }
.t-empty h2 { margin: 0 0 var(--gs-space-2); font-family: var(--gs-font-heading); font-weight: 700; color: var(--gs-color-text-heading); }
.nav .nav-shop { font-weight: 700; }
/* Página actual: subrayado bosque-600 (el lima sobre crema no llegaba a 3:1) */
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gs-bosque-600); text-decoration-thickness: 3px; text-underline-offset: 8px; }
@media (max-width: 980px) { .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .t-grid { grid-template-columns: 1fr; } .t-count { margin-left: 0; } .tp-p { font-size: 1.3rem; } }

.t-aviso { padding-top: var(--gs-space-5); }
.aviso { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--gs-space-4) 20px; padding: var(--gs-space-5) 28px; background: var(--gs-color-surface-default); border: 1px solid var(--chalk-line); border-left: 4px solid var(--gs-bosque-600); border-radius: var(--gs-radius-md); box-shadow: 0 14px 30px -26px rgba(28, 78, 56, .5); }
.aviso svg { width: 36px; height: 36px; fill: none; stroke: var(--pine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aviso h2 { margin: 0; font-family: var(--gs-font-heading); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; color: var(--gs-color-text-heading); }
.aviso p { grid-column: 1 / -1; margin: 0; padding-top: var(--gs-space-4); padding-right: max(0px, calc(100% - var(--gs-measure))); border-top: 1px solid var(--chalk-line); font-size: var(--gs-text-body); line-height: var(--gs-leading-body); color: var(--gs-color-text-default); text-align: left; }
.aviso .btn { white-space: nowrap; }
@media (max-width: 640px) { .aviso { grid-template-columns: auto 1fr; padding: 20px; } .aviso svg { width: 32px; height: 32px; } .aviso h2 { font-size: 1.08rem; } .aviso .btn { grid-column: 1 / -1; order: 3; } .aviso p { order: 2; } }
.t-note { margin: var(--gs-space-6) 0 0; padding: 20px 28px; background: var(--gs-color-surface-default); border: 1px solid var(--chalk-line); border-left: 4px solid var(--gs-bosque-600); border-radius: var(--gs-radius-md); box-shadow: 0 14px 30px -26px rgba(28, 78, 56, .5); font-size: var(--gs-text-body); line-height: var(--gs-leading-body); color: var(--gs-color-text-default); text-align: left; }
.t-note { max-width: calc(var(--gs-measure) + 60px); }
@media (max-width: 640px) { .t-note { padding: var(--gs-space-4) 20px; } }

/* Invitaciones a publicar */
.tp.invite { background: var(--gs-lima-50); border: 2px dashed var(--gs-lima-500); box-shadow: none; }
.tp.invite .tp-ph { display: grid; place-items: center; background: var(--gs-lima-100); }
.tp.invite .tp-ph svg { width: 34%; max-width: 130px; height: auto; fill: none; stroke: var(--pine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
/* Frase de más de 4 palabras: tipo oración, sin mayúsculas sostenidas */
.inv-k { align-self: flex-start; font-size: var(--gs-text-label); font-weight: 600; letter-spacing: .02em; color: var(--gs-color-text-on-accent); background: var(--gs-color-action-accent); border-radius: var(--gs-radius-sm); padding: var(--gs-space-1) var(--gs-space-3); }
.tp.invite .tp-f { border-top-color: var(--gs-lima-200); justify-content: stretch; }
.inv-btn { width: 100%; background: transparent; color: var(--pine); border: 2px solid var(--pine); }
.inv-btn:hover { background: var(--pine); color: var(--chalk); }