/* assets/d-tienda.css — auditoría del dueño (9-oct-2026) · unidad T · Tienda (tienda.html).
   Va DESPUÉS de assets/ux.css: aquí se afina tarjetas de producto, estantes y coherencia con el inicio.
   Usa el sistema de ux.css: --t-portada · --t-seccion · --t-sub · --t-cuerpo · --t-ante · --t-min (docs/AUDITOR-PLAN.md,
   «Sistema entregado»). Sin colores ni tipografías nuevas; el papel con fibra se queda.

   H11 (lado tienda) · H9 (una sola tarjeta de producto con el inicio):
   · tarjetas a 0° (el papel con fibra y la estampilla se quedan; el giro de ±1,4° con el botón adentro se lee como error)
   · nombre en --t-sub, origen como antetítulo (--t-ante), precio con el hilo del acento del destino (igual que la colección del inicio)
   · Tónica Rubí: la MISMA tarjeta, distinguida por su cinta (se va el papel kraft)
   · sin tarjetas huérfanas: celular 2 col. (la última impar ocupa el ancho) · tableta 3 col. (Rubí ocupa dos) · escritorio 4 col.
   · «Promo 4×199»: nota de papel liso con filete sepia y solo la cifra en ámbar (sin caja rosada ni letra roja)
   · Nía: sobre el mismo papel que las demás (se va el verde de la tarjeta) · Expedición Completa en el café de la casa, botellas grandes */

/* ---------- tarjeta de producto: 0°, tinta de la casa ---------- */
.pcard,.pcard:nth-child(odd),.pcard:nth-child(even){transform:none}
.pcard:hover{transform:none;box-shadow:0 14px 30px rgba(0,0,0,.26)}
@media (hover:hover){ .pcard:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(0,0,0,.30)} }
.pcard h3,.pcard .precio{color:var(--espresso)}            /* #20140e (casi negro) → tinta de la casa */
.pcard h3{font-size:var(--t-sub);line-height:1.08;margin-top:3px;text-wrap:balance}
.pcard .lugar{font-family:var(--t-flat);font-size:var(--t-ante);font-weight:600;letter-spacing:.1em;line-height:1.2;color:#5C4C37}
@media (max-width:820px){ .pcard .lugar{font-size:14px;letter-spacing:.03em} }   /* H11: texto de lectura ≥14 px en celular; en una sola línea («Londres, Inglaterra») */
@media (min-width:620px) and (max-width:820px){ .pcard .lugar{letter-spacing:.08em} }
@media (min-width:821px){ .pcard .lugar{letter-spacing:.14em} }
.pcard .nota{font-size:15px;line-height:1.3}
@media (max-width:820px){ .pcard .nota{font-size:14px} }
.pcard .precio{font-size:17px;letter-spacing:.06em;display:inline-block;
  padding-bottom:1px;border-bottom:3px solid var(--acc,transparent)}   /* el hilo del destino, como en la colección del inicio */
.pcard .add{font-size:16px}

/* ---------- Tónica Rubí: la misma tarjeta; la distingue su cinta ---------- */
.pcard.clasico{background:#efe6d2 url('../img/papel-postal.webp') center/cover;background-blend-mode:normal;border:0}
.pcard.clasico .ph{background:linear-gradient(rgba(238,229,208,.42),rgba(226,214,188,.42)),url("../img/papel-postal.webp") center/cover}
.pcard.clasico .lugar{color:#5C4C37}
.sello-clasico{top:-12px;left:-8px;transform:none;background:#432918;color:var(--crema);   /* café de la casa (#432918), letra crema: 13:1 */
  font-size:14px;letter-spacing:.14em;font-weight:600;padding:5px 11px;box-shadow:0 2px 6px rgba(44,38,31,.28)}

/* ---------- Nía: sobre el mismo papel y la misma tinta que las demás ---------- */
.pcard.nia .ph{background:linear-gradient(rgba(238,229,208,.42),rgba(226,214,188,.42)),url("../img/papel-postal.webp") center/cover}
.pcard.nia .lugar{color:#5C4C37}
.nia-sello{font-family:var(--t-flat);font-size:var(--t-ante);font-weight:600;letter-spacing:var(--t-ante-track);color:#5C4C37;margin-bottom:6px}
.nia-intro{font-size:var(--t-cuerpo);line-height:1.5;max-width:62ch}
.nia-intro p{font-size:inherit}
@media (max-width:959px){ .nia-intro{margin:0 0 20px;padding:0 4px;max-width:62ch} }
.pcard.nia .ph img{filter:saturate(.74) sepia(.16) contrast(.97) drop-shadow(0 8px 12px rgba(44,38,31,.32))}   /* la selva se acerca al bodegón cálido de las otras botellas */

/* ---------- promo: nota de papel liso, filete sepia y solo la cifra en ámbar ---------- */
.promo{max-width:720px}
.promo .in{background:#F4EEDD;border:1px solid rgba(92,76,55,.25);border-radius:2px;box-shadow:0 2px 6px rgba(44,38,31,.07);
  padding:18px 22px;text-align:center;font-size:var(--t-cuerpo);line-height:1.45;color:var(--espresso);text-wrap:balance}
.promo b{color:var(--espresso);font-weight:600}
.promo .in>b:nth-of-type(2){font-size:24px;line-height:1.1;font-weight:600;color:var(--ambar);white-space:nowrap}   /* 24 px = texto grande: ámbar sobre papel 4,1:1 ≥ 3:1 */
.promo i{display:block;margin-top:6px;font-size:14px!important;font-style:italic;color:#5C4C37;opacity:1!important}
@media (min-width:821px){ .promo .in>b:nth-of-type(2){font-size:26px} }

/* ---------- sin tarjetas huérfanas ---------- */
/* celular (2 columnas): la última impar de las rejillas de tres ocupa el ancho, en horizontal (foto a la izquierda) */
@media (max-width:619px){
  .grid.tres>.pcard.lat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    grid-template-rows:auto auto auto 1fr;column-gap:14px;padding:10px 14px 12px 10px}
  .grid.tres>.pcard.lat>.ph{grid-column:1;grid-row:1/-1;aspect-ratio:auto;min-height:196px;align-self:stretch}
  #nia .grid.tres>.pcard:not(.lat) .lugar{min-height:2.4em;display:flex;align-items:flex-end}   /* «Herbal · tipo negroni» (2 líneas) y «Picante · fresco» (1): el nombre arranca a la misma altura */
  .grid.tres>.pcard.lat>.ph img{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0 auto;height:min(96%,236px)}   /* la foto no decide el alto de la fila */
  .grid.tres>.pcard.lat>.lugar{grid-column:2;grid-row:1;align-self:end;margin-top:2px}
  .grid.tres>.pcard.lat>h3{grid-column:2;grid-row:2}
  .grid.tres>.pcard.lat>.nota{grid-column:2;grid-row:3;min-height:0}
  .grid.tres>.pcard.lat>.fila{grid-column:2;grid-row:4;align-self:end;margin-top:0}
}
/* tableta (3 columnas): Tónica Rubí, la octava, ocupa dos y cierra la rejilla */
@media (min-width:620px) and (max-width:959px){
  .grid.ocho>.pcard.lat{grid-column:span 2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-rows:auto auto auto 1fr;column-gap:18px;padding:10px 16px 14px 10px}
  .grid.ocho>.pcard.lat>.ph{grid-column:1;grid-row:1/-1;aspect-ratio:auto;min-height:272px;align-self:stretch}
  .grid.ocho>.pcard.lat>.ph img{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0 auto;height:min(96%,262px)}
  .grid.ocho>.pcard.lat>.lugar{grid-column:2;grid-row:1;align-self:end}
  .grid.ocho>.pcard.lat>h3{grid-column:2;grid-row:2}
  .grid.ocho>.pcard.lat>.nota{grid-column:2;grid-row:3;min-height:0}
  .grid.ocho>.pcard.lat>.fila{grid-column:2;grid-row:4;align-self:end;margin-top:0}
}
/* el equipaje: lo que haya (1, 2 o 3 según la ciudad) en una fila centrada del mismo ancho de tarjeta */
@media (min-width:620px){
  #accesorios .grid.tres{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 16px}
  #accesorios .grid.tres>.pcard{flex:0 0 calc((100% - 32px)/3)}
  #accesorios .grid.tres>.pcard.lat{display:flex}
}
@media (min-width:960px){
  #accesorios .grid.tres{gap:30px 22px}
  #accesorios .grid.tres>.pcard{flex:0 0 calc((100% - 66px)/4)}
  /* Nía: el texto de la casa ocupa la cuarta columna y las tres botellas, las otras tres (nada queda a medias) */
  #nia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:22px;align-items:stretch}
  #nia .sechead{grid-column:1/-1}
  #nia .nia-intro{grid-column:1;margin:0;padding:6px 6px 0 0;max-width:none;align-self:start}
  #nia .grid.tres{display:contents}
}

/* ---------- ornamento con mesura: nada cortado por el borde ni sobre el texto ---------- */
.tdeco.st{display:none}                                     /* las estampillas ya están en las tarjetas: no se repiten sueltas */
@media (max-width:1379px){ .tdeco{display:none!important} } /* sin margen para la lámina: se oculta antes que cortarla */
@media (min-width:1380px){
  .tdeco{width:150px!important;left:-168px!important;right:auto!important}
}

/* ---------- La Expedición Completa: el cargamento, con presencia de producto ---------- */
.completa{background:linear-gradient(rgba(67,41,24,.94),rgba(67,41,24,.94)),url("../img/fondo-papel.jpg");background-size:auto,600px}
.completa .botellas{margin:18px 0 22px;flex-wrap:nowrap}
.completa .botellas img{height:clamp(92px,27vw,128px);margin-left:-5px}
.completa .precio{font-size:28px}
@media (min-width:960px){
  .completa{padding:76px 24px 72px}
  .completa .botellas{margin:26px 0 30px}
  .completa .botellas img{height:210px;margin-left:-6px}
  .completa .exp-sello{right:max(24px,calc(50% - 560px));top:28px;width:104px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   REMATE (ronda 2 del dueño, 9-oct). La franja «Pruébala primero» partía la rejilla entre la primera y la segunda
   fila. En pantallas anchas pasa ANTES de la rejilla, en un solo renglón (texto a la izquierda, botón a la derecha);
   el orden del documento no cambia (caja.js la sigue insertando donde siempre): solo se pinta primero. En celular se
   queda tras la primera fila, para no quitarle el primer pantallazo al producto.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width:721px){
  .grid>.cjx-fr{order:-1;margin:0 0 4px;padding:13px 22px;gap:8px 28px;flex-wrap:nowrap}
  .grid>.cjx-fr .tx{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;row-gap:1px;align-items:baseline;flex:1 1 auto}
  .grid>.cjx-fr .k{grid-column:1;grid-row:1 / span 2;align-self:center;margin:0;white-space:nowrap}
  .grid>.cjx-fr .t{grid-column:2}
  .grid>.cjx-fr .s{grid-column:2;margin:0}
  .grid>.cjx-fr .b{min-height:44px;padding:9px 24px;white-space:nowrap}
}
@media (min-width:960px){
  /* …y para que la franja no le quite altura al primer renglón, el encabezado se recoge: la entradilla en una línea */
  .thead{max-width:980px;padding-top:12px;padding-bottom:6px}
  .thead h1{margin-bottom:8px}
  .thead .explica{max-width:none}
  .thead .explica .dato{display:inline;margin:0 0 0 .3em}
  .thead .ciu-aqui{margin-top:2px}
  #siropes .sechead{margin:-14px 4px 12px}
  .grid>.cjx-fr{padding:10px 22px;margin-bottom:-6px}
}