/* Love Print: lo propio de la página sobre system.css (el logo, el momento de la dirección, las tarjetas de
   productos, la lista de líneas). Colores y letras: el :root de cada página. */

/* El logo de la marca en lugar de la marca dibujada */
.nav__logo img.logo-img { height: 52px; width: auto; }
@media (max-width: 639px) { .nav__logo img.logo-img { height: 44px; } }
.logo-img--pie { height: 56px; width: auto; }

/* Visítanos: la dirección grande, un solo momento de letra en la página */
.type-moment { margin: var(--s-3) 0 var(--s-6); font: var(--display-weight) clamp(40px, 4.4vw, 64px)/1.02 var(--font-display); letter-spacing: -0.03em; }
.type-moment a { display: inline-block; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; text-decoration-color: transparent; transition: text-decoration-color .25s; }
.type-moment a:hover { text-decoration-color: currentColor; }
@media (max-width: 639px) { .type-moment { margin-bottom: var(--s-5); } }

/* Lo más pedido: tarjetas 1:1, foto, nombre y precio */
.goods { list-style: none; margin: var(--s-7) 0 0; padding: 0; row-gap: var(--s-6); }
.good { display: grid; gap: var(--s-2); text-decoration: none; color: var(--ink); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.good__pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); background: var(--p-surface); }
.good__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.good__name { margin-top: var(--s-2); font: 500 16px/24px var(--font-text); }
.good__price { font-size: 16px; line-height: 24px; color: var(--muted); }
@media (hover: hover) {
  .good:hover { transform: translateY(-2px); }
  .good:hover .good__pic img { transform: scale(1.03); }
}
@media (min-width: 640px) and (max-width: 1023px) { .goods > li { grid-column: auto / span 6; } }
@media (max-width: 639px) { .goods > li { grid-column: auto / span 6; } }

/* Todo lo que fabricamos: la foto alta a la izquierda; la lista y la foto pequeña a la derecha */
.lineas__alta { grid-row: 1 / span 2; grid-column: 7 / span 6; margin: 0; border-radius: var(--r-lg); overflow: hidden; width: 100%; height: min(708px, calc(100svh - var(--padt) - var(--padb) - var(--bar))); }
.lineas__alta > img { width: 100%; height: 100%; object-fit: cover; }
.lineas__texto { grid-row: 1; }
.lineas__lista { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
@media (max-width: 639px) { .lineas__lista { grid-template-columns: 1fr; } }
#lineas .wrap.grid { grid-template-rows: auto 1fr; }
.lineas__lista a { display: flex; justify-content: space-between; align-items: baseline; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 18px; transition: color .2s, padding-left .25s; }
.lineas__lista a span { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 16px; }
.lineas__lista a:hover { color: var(--accent-text, #9e4472); padding-left: 6px; }
.lineas__chica { grid-row: 2; grid-column: 1 / span 3; align-self: end; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-lg); }
.lineas__chica a { display: block; height: 100%; }
.lineas__chica img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.lineas__chica:hover img { transform: scale(1.03); }
@media (max-width: 1023px) {
  #lineas .wrap.grid { display: flex; flex-direction: column; gap: var(--s-6); }
  .lineas__alta { height: auto; width: 100%; aspect-ratio: 4 / 3; }
  .lineas__chica { display: none; }
}

/* La franja de marca es el amarillo mantequilla de su etiqueta (no el rosado del botón): tinta negra a 15:1 */
.ground-brand { --bg: var(--p-brand); --surface: color-mix(in oklab, var(--p-brand) 90%, var(--p-brand-ink)); --ink: var(--p-brand-ink); --muted: #4a4446;
  --action: var(--p-brand-ink); --action-ink: var(--p-brand); }

/* El pie: las cuatro columnas a una altura */
.pie-columnas { align-items: stretch; }