/* Ficha de variedad · "cartel de feria + carta de bar" · Terroir Radical · 13-oct-2026
   Se carga solo en las fichas de variedad. Todo va dentro de main.var-page (no afecta a otras páginas).
   Uvas blancas: racimo recortado (var-print--natural) si existe el recorte; si no, foto con marco (var-print--foto).
   Uvas tintas, rosadas y naranja: foto con marco.
   Lo memorable: la foto impresa en dos tintas (risografía) con la segunda tinta desplazada.
   Color de campo por tipo de uva: main[data-tipus="blanc|negre|rosat|orange"].            */

main.var-page {
  --v-bg: #F2C012;       /* campo del cartel */
  --v-ink: #1A3318;      /* tinta */
  --v-duo: #B8451E;      /* segunda tinta (la que se desplaza) */
  --v-shade: #2B5425;    /* sombra del marco de la foto */
  --v-s1: #B8451E; --v-s2: #2B5425; --v-s3: #D4607A; --v-s4: #7B2D2D;   /* sombreados de los bloques */
  --v-ed-bg: #B8451E; --v-ed-ink: #FFF8EC;                                 /* banda editorial */
  --v-paper: #FFF8EC;    /* papel */
  --v-menu: #F2E5CB;     /* papel de la carta */
  --v-menu-ink: #1A3318;
  --v-menu-price: #B8451E;
  --v-menu-line: rgba(26, 51, 24, .28);
  --v-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main.var-page[data-tipus="negre"]  { --v-bg: #7B2D2D; --v-ink: #FFF3E3; --v-duo: #D4607A; --v-shade: #F2C012; --v-s1: #F2C012; --v-s2: #D4607A; --v-s3: #B8451E; --v-s4: #2B5425; --v-ed-bg: #D4607A; --v-ed-ink: #2A0F18; --v-menu-price: #7B2D2D; }
main.var-page[data-tipus="rosat"]  { --v-bg: #D4607A; --v-ink: #2A0F18; --v-duo: #F2C012; --v-shade: #7B2D2D; --v-s1: #7B2D2D; --v-s2: #F2C012; --v-s3: #2B5425; --v-s4: #B8451E; --v-ed-bg: #F2C012; --v-ed-ink: #1A1710; --v-menu-price: #A83A55; }
main.var-page[data-tipus="orange"] { --v-bg: #E8833A; --v-ink: #2B1405; --v-duo: #F2C012; --v-shade: #2B5425; --v-s1: #2B5425; --v-s2: #7B2D2D; --v-s3: #D4607A; --v-s4: #F2C012; --v-ed-bg: #F2C012; --v-ed-ink: #1A1710; --v-menu-price: #8B3A0A; }

.var-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── Cabecera ───────── */
main.var-page .var-hero {
  position: relative; overflow: hidden; background: var(--v-bg); color: var(--v-ink);
  padding: clamp(76px, 11svh, 112px) 0 clamp(40px, 8svh, 120px);   /* deja sitio al encabezado fijo (80px) */
}
main.var-page .var-hero::before {              /* papel impreso */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--v-grain); opacity: .14; mix-blend-mode: multiply;
}
main.var-page .var-hero-grid {
  position: relative; z-index: 1; display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas: "nom nom" "dades print";
  column-gap: clamp(24px, 5vw, 80px);
}
main.var-page .var-hero h1 {                    /* el nombre pisa la foto */
  grid-area: nom; position: relative; z-index: 3; margin: 0; color: var(--v-ink);
  font-family: var(--ff-cond); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.4rem, min(14vw, 20svh), 12rem); line-height: .8; letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
main.var-page .var-hero h1.var-nom--m { font-size: clamp(3rem, min(10.5vw, 15svh), 8.4rem); }
main.var-page .var-hero h1.var-nom--l { font-size: clamp(2.6rem, min(7.4vw, 11svh), 6rem); line-height: .86; }

/* datos como carta de bar: etiqueta ........ valor */
main.var-page .var-datos {
  grid-area: dades; align-self: end; margin: clamp(26px, 3vw, 48px) 0 0; max-width: 31rem; position: relative; z-index: 2;
}
main.var-page .var-datos > div { display: flex; align-items: baseline; padding: .5rem 0; }
main.var-page .var-datos dt {
  display: flex; flex: 1; align-items: baseline;
  font: italic 400 1.15rem/1.2 var(--ff-display);
}
main.var-page .var-datos dt::after {
  content: ""; flex: 1; margin: 0 .75rem; border-bottom: 2px dotted currentColor; opacity: .65; transform: translateY(-.28em);
}
main.var-page .var-datos dd {
  margin: 0; text-align: right; font: 800 clamp(1.3rem, 2vw, 1.7rem)/1.1 var(--ff-cond); letter-spacing: .015em;
}

/* la foto como impresión a dos tintas */
main.var-page .var-print {
  grid-area: print; position: relative; justify-self: end; width: fit-content; max-width: 100%;
  margin: calc(-1 * clamp(1.5rem, 5vw, 5rem)) 0 0;
}
main.var-page .var-print::before {              /* segunda tinta, mal registrada */
  content: ""; position: absolute; inset: 0; background: var(--v-shade);
  transform: translate(clamp(8px, 1.3vw, 18px), clamp(8px, 1.2vw, 16px));
}
main.var-page .var-print-plate { position: relative; background: var(--v-duo); overflow: hidden; }
main.var-page .var-print img {
  display: block; object-fit: contain;
  filter: grayscale(1) contrast(1.45) brightness(1.06); mix-blend-mode: multiply; transition: filter .35s ease;
}
main.var-page .var-print:hover img { filter: none; mix-blend-mode: normal; }   /* al pasar el cursor: color real */

/* ───────── Ficha ───────── */
main.var-page .s-varietat-ficha { background: var(--v-paper); padding: clamp(60px, 8vw, 116px) 0; }
main.var-page .var-ficha-layout { display: block; }
main.var-page .var-ficha-text {
  max-width: 64rem; padding-left: clamp(18px, 2.6vw, 38px); border-left: 7px solid var(--v-duo);
}
main.var-page .var-ficha-text .eyebrow {
  display: block; margin: 0 0 14px; padding: 0; background: none; color: #1A3318;
  font: italic 400 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--ff-display); letter-spacing: 0; text-transform: none;
}
main.var-page .var-ficha-text .eyebrow::before { display: none; }
main.var-page .var-desc-full { max-width: 62ch; font-size: clamp(1.12rem, 1.3vw, 1.28rem); line-height: 1.78; color: #1A1710; }

/* ───────── Carta de vinos: papel crema como una carta impresa; el verde solo en acentos ───────── */
main.var-page .s-varietat-cta {
  position: relative; text-align: left; padding: clamp(52px, 7vw, 96px) 0;
  background: var(--v-menu); color: var(--v-menu-ink); border-top: 14px solid #2B5425;
}
main.var-page .s-varietat-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--v-grain); opacity: .09; mix-blend-mode: multiply; }
main.var-page .s-varietat-cta .container { position: relative; max-width: 52rem; margin-left: max(24px, calc((100% - 1200px) / 2)); }
main.var-page .s-varietat-cta h2 {
  color: #2B5425; text-transform: none; margin-bottom: 10px;
  font: italic 400 clamp(1.9rem, 3.6vw, 3rem)/1.05 var(--ff-display);
}
main.var-page .s-varietat-cta p { margin: 0 0 26px; max-width: 46ch; color: var(--v-menu-ink); opacity: .88; }
main.var-page .varietat-vins-grid { display: block; max-width: none; margin: 0 0 18px; }
main.var-page .vv-card {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 18px; padding: 16px 0; margin: 0; width: 100%; max-width: none; height: auto;
  background: none; border: 0; border-top: 1px solid var(--v-menu-line); border-radius: 0; box-shadow: none; transform: none;
  color: inherit; text-decoration: none;
}
main.var-page .vv-card:last-child { border-bottom: 1px solid var(--v-menu-line); }
main.var-page .vv-card-img { flex: none; width: 68px; height: 68px; aspect-ratio: auto; border-radius: 50%; overflow: hidden; }
main.var-page .vv-card-img img { width: 100%; height: 100%; object-fit: cover; }
main.var-page .vv-card-body { flex: 1; min-width: 0; padding: 0; background: none; display: grid; grid-template-columns: auto 1fr auto; column-gap: .7rem; align-items: baseline; }
main.var-page .vv-card-body::before { content: ""; grid-column: 2; grid-row: 1; border-bottom: 2px dotted rgba(43, 84, 37, .75); transform: translateY(-.3em); }
main.var-page .vv-card-nom { grid-column: 1; grid-row: 1; margin: 0; font: 700 clamp(1.3rem, 2.2vw, 1.7rem)/1.1 var(--ff-cond); color: var(--v-menu-ink); }
main.var-page .vv-card-preu { grid-column: 3; grid-row: 1; margin: 0; font: 800 clamp(1.3rem, 2.2vw, 1.7rem)/1.1 var(--ff-cond); color: var(--v-menu-price); }
main.var-page .vv-card-meta, main.var-page .vi-promo-tag {
  grid-column: 1 / -1; margin: 3px 0 0 !important; text-align: left !important; color: rgba(26, 51, 24, .78) !important;
  font-size: .9rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
}
main.var-page .vv-card:hover .vv-card-nom { color: var(--v-menu-price); }
main.var-page .varietat-vins-count { max-width: none; margin: 0 0 26px !important; font-size: .95rem; color: var(--v-menu-ink); opacity: .8 !important; }
main.var-page .btn-tenda { border-radius: 0; background: #2B5425; color: #fff; font-weight: 800; letter-spacing: .04em; }

/* ───────── Móvil ───────── */
@media (max-width: 760px) {
  main.var-page .var-hero-grid { grid-template-columns: 1fr; grid-template-areas: "nom" "print" "dades"; }
  main.var-page .var-print { justify-self: start; max-width: 320px; margin: 22px 14px 0 0; }
  main.var-page .var-print--natural .var-print-plate { height: auto; width: min(320px, 100%); }
  main.var-page .var-print--foto img { max-height: 70svh; }
  main.var-page .var-datos { max-width: none; margin-top: 34px; }
  main.var-page .s-varietat-cta .container { margin-left: 0; }
  main.var-page .vv-card-img { width: 56px; height: 56px; }
}

/* ───────── Variantes de la foto: color natural sobre el fondo de color ───────── */
/* natural: racimo recortado (fondo transparente) sobre la tinta del tipo de uva */
main.var-page .var-print--natural .var-print-plate { height: clamp(250px, 52svh, 560px); aspect-ratio: 4 / 5; }
main.var-page .var-print--natural img {
  width: 100%; height: 100%; padding: 5% 9%; box-sizing: border-box; mix-blend-mode: normal;
  filter: drop-shadow(0 10px 0 rgba(26, 51, 24, .22));
}
main.var-page .var-print--natural:hover img { filter: drop-shadow(0 14px 0 rgba(26, 51, 24, .3)); }
/* foto: fotografía real de viña con su propio fondo, entre un margen de la tinta (nunca se recorta) */
main.var-page .var-print--foto .var-print-plate { padding: clamp(10px, 1.6vw, 20px); }
main.var-page .var-print--foto img {
  width: auto; height: auto; max-width: min(100%, 420px); max-height: clamp(230px, 50svh, 580px);
  filter: none; mix-blend-mode: normal;
}
main.var-page .var-print--foto:hover img { filter: none; }

/* ───────── Hub de variedades: repertorio complementario (notas sin ficha propia) ───────── */
.s-notes-ampelo {
  position: relative; text-align: left; padding: clamp(52px, 7vw, 100px) 0;
  background: #F2E5CB; color: #1A3318; border-top: 14px solid #2B5425;
}
.s-notes-ampelo::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.s-notes-ampelo .container { position: relative; }
.s-notes-ampelo .eyebrow { margin: 0 0 8px; padding: 0; background: none; color: #B8451E; text-transform: none; letter-spacing: 0; font: italic 400 1.15rem/1.2 var(--ff-display); }
.s-notes-ampelo .eyebrow::before { display: none; }
.s-notes-ampelo h2 { margin: 0 0 16px; color: #2B5425; text-transform: none; font: italic 400 clamp(2rem, 4vw, 3.4rem)/1.05 var(--ff-display); }
.s-notes-ampelo h2 em { font-style: inherit; }
.s-notes-ampelo .notes-intro { max-width: 62ch; margin: 0 0 clamp(30px, 4vw, 48px); color: #1A1710; opacity: .85; font-size: 1.02rem; line-height: 1.7; }
/* mosaico: cada nota con su altura natural, encajadas en columnas sin huecos */
.s-notes-ampelo .notes-grid { display: block; column-width: 260px; column-gap: 28px; }
.s-notes-ampelo .note-item {
  --nc: #1A3318; --sh: #B8451E;
  background: #FFF8EC; border: 2px solid #1A3318; border-left: 9px solid var(--nc); border-radius: 0;
  padding: 20px 22px 24px; box-shadow: 7px 7px 0 var(--sh); transition: transform .18s ease, box-shadow .18s ease;
  break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 30px; box-sizing: border-box; vertical-align: top;
}
.s-notes-ampelo .note-item[data-color="blanc"] { --nc: #F2C012; }
.s-notes-ampelo .note-item[data-color="negre"] { --nc: #7B2D2D; }
.s-notes-ampelo .note-item[data-color="rosat"] { --nc: #D4607A; }
/* el sombreado recorre la paleta de la marca: teja, amarillo, verde, rosa, burdeos */
.s-notes-ampelo .note-item:nth-child(5n+1) { --sh: #B8451E; }
.s-notes-ampelo .note-item:nth-child(5n+2) { --sh: #F2C012; }
.s-notes-ampelo .note-item:nth-child(5n+3) { --sh: #2B5425; }
.s-notes-ampelo .note-item:nth-child(5n+4) { --sh: #D4607A; }
.s-notes-ampelo .note-item:nth-child(5n)   { --sh: #7B2D2D; }
.s-notes-ampelo .note-item:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--sh); }
.s-notes-ampelo .note-nom { margin: 0 0 6px; color: #1A3318; text-transform: uppercase; font: 900 clamp(1.7rem, 2.4vw, 2.2rem)/.95 var(--ff-cond); letter-spacing: -.005em; }
.s-notes-ampelo .note-origen { display: block; margin: 0 0 12px; color: rgba(26, 51, 24, .8); letter-spacing: 0; font: italic 400 .98rem/1.35 var(--ff-display); }
.s-notes-ampelo .note-text { margin: 0; color: #1A1710; font-size: .98rem; line-height: 1.66; }
@media (prefers-reduced-motion: reduce) { .s-notes-ampelo .note-item { transition: none; } }

/* nota de fuentes al pie del repertorio: oscura, centrada y con ancho de párrafo */
.s-notes-ampelo .notes-peu {
  max-width: 66ch; margin: clamp(44px, 6vw, 72px) auto 0; text-align: center; text-wrap: balance;
  color: #1A3318; opacity: 1; font-size: 1rem; line-height: 1.75;
}
.s-notes-ampelo .notes-peu sup { color: #B8451E; font-weight: 700; }
.s-notes-ampelo .notes-peu em { font-style: italic; }
.s-notes-ampelo .notes-peu a { color: #2B5425; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* enlace "Fitxa completa" de cada nota */
.s-notes-ampelo .note-item a { color: #B8451E !important; font-weight: 700; border-bottom-width: 2px !important; }
.s-notes-ampelo .note-item a:hover { color: #1A3318 !important; }

/* ───────── Información adicional: características y perspectiva TR ───────── */
/* Características: bloques sobre el color de la uva, con sombreado de la paleta */
main.var-page .s-varietat-specs { position: relative; background: var(--v-bg); color: var(--v-ink); padding: clamp(56px, 7vw, 104px) 0; }
main.var-page .s-varietat-specs::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--v-grain); opacity: .14; mix-blend-mode: multiply; }
main.var-page .s-varietat-specs .container { position: relative; }
main.var-page .s-varietat-specs .eyebrow {
  display: block; margin: 0 0 clamp(26px, 3.4vw, 44px); padding: 0; background: none; color: var(--v-ink);
  text-transform: none; letter-spacing: 0; font: italic 400 clamp(2rem, 4vw, 3.3rem)/1.05 var(--ff-display);
}
main.var-page .s-varietat-specs .eyebrow::before { display: none; }
main.var-page .var-specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(26px, 3vw, 38px); align-items: start; }
main.var-page .var-specs-grid:has(> .var-spec-bloc:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
main.var-page .var-spec-bloc {
  background: #FFF8EC; color: #1A1710; border: 3px solid #1A3318; padding: 22px 24px 18px;
  box-shadow: 9px 9px 0 var(--v-s1);
}
main.var-page .var-spec-bloc:nth-child(4n+2) { box-shadow: 9px 9px 0 var(--v-s2); }
main.var-page .var-spec-bloc:nth-child(4n+3) { box-shadow: 9px 9px 0 var(--v-s3); }
main.var-page .var-spec-bloc:nth-child(4n)   { box-shadow: 9px 9px 0 var(--v-s4); }
main.var-page .var-spec-bloc h3 {
  margin: 0 0 8px; color: #1A3318; text-transform: uppercase; font: 900 clamp(1.5rem, 2.1vw, 1.85rem)/1 var(--ff-cond); letter-spacing: -.005em;
}
main.var-page .var-spec-bloc ul { margin: 0; padding: 0; list-style: none; }
main.var-page .var-spec-bloc li { margin: 0; padding: 10px 0; font-size: 1rem; line-height: 1.55; border-top: 2px dotted rgba(26, 51, 24, .35); }
main.var-page .var-spec-bloc li:first-child { border-top: 0; }
main.var-page .var-spec-bloc li strong { color: #B8451E; font-weight: 800; }

/* La perspectiva TR: banda de color con cita destacada */
main.var-page .s-varietat-editorial { position: relative; overflow: hidden; background: var(--v-ed-bg); color: var(--v-ed-ink); padding: clamp(60px, 8vw, 116px) 0; }
main.var-page .s-varietat-editorial::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--v-grain); opacity: .14; mix-blend-mode: multiply; }
main.var-page .s-varietat-editorial .container { position: relative; }
main.var-page .s-varietat-editorial .eyebrow {
  display: inline-block; margin: 0 0 28px; padding: 7px 16px 6px; transform: rotate(-2deg);
  background: var(--v-ed-ink); color: var(--v-ed-bg); text-transform: none; letter-spacing: .08em;
  font: 800 1rem/1 var(--ff-cond);
}
main.var-page .s-varietat-editorial .eyebrow::before { display: none; }
main.var-page .var-editorial-quote { position: relative; margin: 0; padding: 0 0 0 clamp(0px, 9vw, 140px); max-width: 62rem; border: 0; }
main.var-page .var-editorial-quote::before {
  content: "\00AB"; position: absolute; left: 0; top: -.18em; font: 700 clamp(5.5rem, 12vw, 11rem)/1 var(--ff-display); opacity: .25; pointer-events: none;
}
main.var-page .var-editorial-quote p {
  position: relative; margin: 0; color: inherit; max-width: 56ch; font: italic 400 clamp(1.3rem, 2.3vw, 1.95rem)/1.5 var(--ff-display);
}
main.var-page .var-editorial-quote cite { display: block; margin-top: 26px; font: 800 1.15rem/1 var(--ff-cond); font-style: normal; letter-spacing: .06em; }
@media (max-width: 760px) {
  main.var-page .var-specs-grid, main.var-page .var-specs-grid:has(> .var-spec-bloc:nth-child(4):last-child) { grid-template-columns: 1fr; }
  main.var-page .var-editorial-quote { padding-left: 0; }
  main.var-page .var-editorial-quote::before { top: -.55em; }
}

/* filtros del hub de variedades: lo que no coincide se oculta (faltaba esta regla) */
.varietat-item.amagat, .note-item.amagat, .zona-label.amagat, .s-notes-ampelo.amagat { display: none !important; }