/* =============================================================
   Berry Amore — styles
   1. Tokens · 2. Base · 3. Utilities · 4. Components
   5. Inicio · 6. Las berries · 7. Footer · 8. Responsive
   9. Motion · 10. Reduced motion
   ============================================================= */

/* 1. Tokens ---------------------------------------------------- */
:root {
  /* Colores del logo */
  --berry: #901534;
  --berry-strong: #6f0f27;
  --amore: #531b6c;
  --amore-deep: #3d1350;
  --blue: #12446b;
  --leaf: #5e7130;
  --leaf-deep: #3f4d1e;

  /* Campos claros por fruta */
  --t-fresa: #f8dfe4;
  --t-frambuesa: #fcecf0;
  --t-arandano: #e0e9f2;
  --t-zarzamora: #ece2f1;
  --t-leaf: #e9eedc;

  --bg: #ffffff;
  --surface: #f6f2f5;
  --paper: #ffffff;
  --ink: #23182b;
  --muted: #5d5266;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --marker: "Caveat Brush", "Figtree", cursive;

  /* Cinco tamaños */
  --s-display: clamp(4rem, 1.6rem + 8.4vw, 10rem);
  --s-h2: clamp(2.75rem, 1.6rem + 3.6vw, 5rem);
  --s-lead: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  --s-body: 1.0625rem;
  --s-small: 0.875rem;

  --gutter: clamp(16px, 3vw, 32px);
  --section: clamp(88px, 11vw, 168px);
  --radius: 24px;
  --header-h: 76px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  font-family: var(--font);
  font-size: var(--s-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
p { text-wrap: pretty; }
h1, h2, h3 { line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; font-weight: 800; }
::selection { background: var(--berry); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* 3. Utilities ------------------------------------------------- */
.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 100; padding: .6rem 1rem; background: var(--ink); color: #fff; border-radius: 999px; }
.skip-link:focus { top: 1rem; }
.marker { font-family: var(--marker); font-weight: 400; letter-spacing: 0; line-height: 0.95; }
.display { font-family: var(--marker); font-weight: 400; font-size: var(--s-display); letter-spacing: 0; line-height: 0.88; }
.h2 { font-size: var(--s-h2); }
.h3, h3 { font-size: var(--s-lead); letter-spacing: -0.02em; line-height: 1.15; }
.lead { font-size: var(--s-lead); line-height: 1.4; max-width: 36ch; }
.statement { font-size: var(--s-lead); line-height: 1.4; font-weight: 500; max-width: 36ch; }
.section { padding-block: var(--section); }

/* 4. Components ------------------------------------------------ */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6rem; border-radius: 999px;
  background: var(--berry); color: #fff; font-weight: 700; text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button-small { min-height: 42px; padding: 0 1.1rem; font-size: var(--s-small); }
.button-light { background: #fff; color: var(--ink); }
.text-link {
  font-weight: 700; text-decoration: underline; text-underline-offset: .25em;
  text-decoration-thickness: .08em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--berry-strong); }
  .button-light:hover { background: var(--t-fresa); color: var(--ink); }
  .text-link:hover { text-decoration-color: currentColor; }
}

/* Header: logo al centro */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); transition: background-color var(--t-ui) ease; }
.site-header.is-scrolled { background: var(--surface); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); gap: 1rem; }
.brand { grid-column: 2; grid-row: 1; transition: transform var(--t-press) var(--ease-out); }
.brand:active { transform: scale(0.96); }
.brand img { height: 58px; width: auto; }
.menu-toggle {
  grid-column: 3; grid-row: 1; justify-self: end;
  min-height: 44px; padding: 0 1.1rem; border-radius: 999px; background: var(--surface);
  font-weight: 700; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.menu-toggle:active { transform: scale(0.96); }
.site-nav {
  position: absolute; top: calc(var(--header-h) - 6px); right: var(--gutter); left: var(--gutter);
  display: flex; flex-direction: column; gap: .25rem; padding: .75rem;
  background: var(--bg); border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(35, 24, 43, .35); /* flota: menú abierto — taste-skill-ignore */
  transform-origin: top right;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
  opacity: 0; transform: scale(0.97) translateY(-6px); visibility: hidden;
}
.site-nav.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.nav-group { display: flex; flex-direction: column; gap: .25rem; }
.site-nav a { padding: .85rem 1rem; border-radius: 14px; font-weight: 700; text-decoration: none; }
.site-nav a:not(.button) { transition: background-color var(--t-hover) ease; }
.site-nav a:not(.button):hover, .site-nav a[aria-current="page"] { background: var(--surface); }
.site-nav .button { margin-top: .25rem; }

/* Tints por fruta */
.tile-fresa { --tint: var(--t-fresa); --deep: var(--berry); }
.tile-frambuesa { --tint: var(--t-frambuesa); --deep: #b0284c; }
.tile-arandano { --tint: var(--t-arandano); --deep: var(--blue); }
.tile-zarzamora { --tint: var(--t-zarzamora); --deep: var(--amore); }

/* 5. Inicio ---------------------------------------------------- */

/* Portada con campo verde */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  min-height: min(calc(100svh - var(--header-h)), 920px);
  display: grid; align-items: end;
  background: var(--leaf-deep);
}
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg { z-index: -2; }
.hero-bg img { object-fit: cover; object-position: center 60%; }
.hero::after { /* velo oscuro para leer el texto sobre la foto */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(27, 36, 12, .82) 0%, rgba(27, 36, 12, .45) 45%, rgba(27, 36, 12, .1) 80%); /* velo sobre foto — taste-skill-ignore */
}
.hero-content { display: grid; gap: 1.5rem; padding-block: clamp(72px, 12vh, 140px) clamp(56px, 10vh, 120px); }
.hero .display { max-width: 12ch; }
.hero .lead { color: #fff; font-weight: 500; max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

/* Nuestros productos: el clamshell que cambia */
.showcase {
  --field: var(--t-fresa); --deep: var(--berry);
  background: var(--field); padding-block: var(--section);
  transition: background-color 1.6s var(--ease-soft);
}
.showcase[data-fruit="frambuesa"] { --field: var(--t-frambuesa); --deep: #b0284c; }
.showcase[data-fruit="arandano"] { --field: var(--t-arandano); --deep: var(--blue); }
.showcase[data-fruit="zarzamora"] { --field: var(--t-zarzamora); --deep: var(--amore); }
.showcase-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
.showcase-copy { display: grid; gap: 1.25rem; align-content: center; }
.showcase .h2 { color: var(--deep); transition: color 1.2s ease; }
.fruit-fact { display: grid; gap: .5rem; margin-top: .5rem; }
.fact-name { font-size: var(--s-h2); color: var(--deep); }
.fact-text { max-width: 40ch; }
.fact-name, .fact-text { transition: opacity 260ms ease, transform 360ms var(--ease-out), color 1.2s ease; }
.fruit-fact.is-swapping .fact-name, .fruit-fact.is-swapping .fact-text { opacity: 0; transform: translateY(8px); }

.hero-stage { position: relative; display: grid; justify-items: center; }
.plinth, .stage-objects { grid-area: 1 / 1; }
.plinth { width: min(86vw, 560px); aspect-ratio: 1; border-radius: 50%; background: var(--bg); }
.stage-objects { position: relative; width: min(86vw, 560px); aspect-ratio: 1; }
/* Los clamshells de 6 oz son casi cuadrados: a 68% del disco sus esquinas quedan dentro del círculo */
.stage-img {
  position: absolute; left: 50%; top: 50%;
  height: 68%; width: auto; max-width: none;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 1.6s var(--ease-soft);
}
.stage-img.is-on { opacity: 1; }
/* El clamshell de fresa es horizontal: se ajusta por ancho para caber en el disco */
.stage-img.is-wide { height: auto; width: 84%; top: 51%; }
.photo-list img.is-wide { object-fit: contain; }
.stage-icon {
  position: absolute; top: 2%; right: 4%; width: auto; height: clamp(72px, 12vw, 132px);
  transition: opacity 300ms ease, transform 500ms var(--ease-out);
}
.stage-icon.is-swapping { opacity: 0; transform: rotate(-12deg) scale(0.9); }
.stage-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.stage-picker button {
  min-height: 44px; padding: 0 1.1rem; border-radius: 999px; font-weight: 700; font-size: var(--s-small);
  background: rgba(255, 255, 255, .7); color: var(--ink);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.stage-picker button:active { transform: scale(0.96); }
.stage-picker button[aria-pressed="true"] { background: var(--deep); color: #fff; }
@media (hover: hover) and (pointer: fine) { .stage-picker button:not([aria-pressed="true"]):hover { background: #fff; } }

/* Temporada */
.products { background: var(--bg); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head .h2 { color: var(--amore); }
.months { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(28px, 3vw, 40px); }
.months button {
  min-width: 56px; min-height: 44px; padding: 0 .9rem; border-radius: 999px;
  background: var(--surface); font-weight: 700; font-size: var(--s-small);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.months button:active { transform: scale(0.95); }
.months button[aria-pressed="true"] { background: var(--amore); color: #fff; }
@media (hover: hover) and (pointer: fine) { .months button:not([aria-pressed="true"]):hover { background: var(--t-zarzamora); } }

.specimens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
.specimen { display: grid; gap: .2rem; justify-items: center; text-align: center; text-decoration: none; align-content: start; min-width: 0; }
.specimen[data-fruit="fresa"] { --deep: var(--berry); }
.specimen[data-fruit="frambuesa"] { --deep: #b0284c; }
.specimen[data-fruit="arandano"] { --deep: var(--blue); }
.specimen[data-fruit="zarzamora"] { --deep: var(--amore); }
.specimen-art { display: flex; justify-content: center; align-items: flex-end; width: 100%; margin-bottom: .5rem; }
.specimen-art img {
  width: auto; height: clamp(120px, 17vw, 230px); max-width: 100%; object-fit: contain;
  transition: transform 520ms var(--ease-out), opacity var(--t-ui) ease, filter var(--t-ui) ease;
}
.specimen-name { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); color: var(--deep); }
.specimen-season { color: var(--muted); font-size: var(--s-small); font-weight: 500; }
.specimen-more {
  font-weight: 700; font-size: var(--s-small); color: var(--berry);
  text-decoration: underline; text-underline-offset: .25em; text-decoration-color: transparent;
  transition: text-decoration-color var(--t-hover) ease;
}
.specimen.is-off .specimen-art img { opacity: .3; filter: grayscale(1); }
.specimen.is-on .specimen-season { color: var(--leaf); font-weight: 700; }
.specimen:active .specimen-art img { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .specimen:hover .specimen-art img { transform: translateY(-8px) rotate(-6deg); }
  .specimen:hover .specimen-more { text-decoration-color: currentColor; }
}
.season-note { margin-top: clamp(28px, 3vw, 40px); color: var(--muted); max-width: 60ch; text-align: center; margin-inline: auto; }

/* Presentación */
.packing { background: var(--surface); padding-top: clamp(56px, 6vw, 96px); }
.list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 40px; }
.list-head .h2 { color: var(--amore); }
.list-count { color: var(--ink); font-size: var(--s-lead); font-weight: 700; max-width: 34ch; }
.photo-list { display: grid; gap: 32px 64px; }
.photo-list li { display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: start; }
.photo-list img { width: 80px; height: 80px; object-fit: cover; border-radius: 18px; background: var(--bg); }
.photo-list p { max-width: 40ch; color: var(--muted); }
.photo-list .item-line { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); max-width: none; font-size: 1.125rem; }
.photo-list .item-line span { color: var(--ink); font-weight: 500; white-space: nowrap; }
.item-note { margin-top: .35rem; color: var(--berry) !important; font-weight: 700; font-size: var(--s-small); }

/* Certificación y envíos */
.field-section { background: var(--leaf-deep); color: #fff; padding-block: var(--section); }
.promise-grid { display: grid; gap: 56px; }
.promise-item { display: grid; gap: 1rem; align-content: start; }
.promise-item p { max-width: 36ch; font-size: var(--s-lead); line-height: 1.4; }
.promise-icon { width: auto; height: 96px; object-fit: contain; }
.promise-photo { align-self: center; justify-self: center; width: 100%; max-width: 480px; }
.promise-photo img { width: 100%; height: auto; }

/* Calidad de exportación: abanico de clamshells + sello giratorio */
.export-stack { max-width: 540px; }
.promise { overflow-x: clip; }
@media (max-width: 539px) { .stack { margin-inline: 8%; } }
.stack { position: relative; aspect-ratio: 1.08; }
.stack-card {
  position: absolute; left: 50%; top: 4%; width: 36% !important; height: auto;
  transform-origin: 50% 100%;
  transform: translateX(-50%) var(--fan, none);
  transition: transform 1100ms var(--ease-out) var(--d, 0ms), opacity 500ms ease var(--d, 0ms);
}
.stack-card.c1 { --fan: translate(-72%, 10%) rotate(-16deg); --d: 120ms; }
.stack-card.c2 { --fan: translate(0, -6%) rotate(0deg); --d: 0ms; }
.stack-card.c3 { --fan: translate(72%, 10%) rotate(16deg); --d: 240ms; }
.stack-front { position: absolute; left: 50%; bottom: 0; width: 82% !important; height: auto; transform: translateX(-50%); }
/* Sello arriba a la derecha, encima del abanico pero sin tocar las cajitas */
.export-stack { position: relative; --stamp: clamp(96px, 9vw, 132px); padding-top: calc(var(--stamp) + 12px); }
.stamp {
  position: absolute; top: 0; right: 0; width: var(--stamp); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%; background: var(--berry); color: #fff;
}
.stamp-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.stamp-ring text { font-family: var(--marker); font-size: 21px; fill: #fff; letter-spacing: .5px; }
.stamp-icon { width: 24% !important; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .export-stack:hover .stack-card.c1 { --fan: translate(-86%, 6%) rotate(-22deg); --d: 0ms; }
  .export-stack:hover .stack-card.c2 { --fan: translate(0, -14%) rotate(0deg); --d: 0ms; }
  .export-stack:hover .stack-card.c3 { --fan: translate(86%, 6%) rotate(22deg); --d: 0ms; }
}

/* Historia */
.story { position: relative; isolation: isolate; overflow: hidden; background: var(--amore); color: #fff; padding-block: var(--section); }
.story-pattern {
  position: absolute; inset: -20% 0; z-index: -1; opacity: .09;
  background: url("assets/img/patron-frutas-v2.webp") repeat; background-size: 300px 300px;
}
.story-grid { display: grid; gap: 48px; align-items: center; }
.story-copy { display: grid; gap: 1.5rem; justify-items: start; }
.story-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.story-tabs button {
  min-height: 44px; padding: 0 1.1rem; border-radius: 999px; font-weight: 700; font-size: var(--s-small);
  background: rgba(255, 255, 255, .12); color: #fff;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.story-tabs button:active { transform: scale(0.96); }
.story-tabs button[aria-selected="true"] { background: #fff; color: var(--amore); }
@media (hover: hover) and (pointer: fine) { .story-tabs button[aria-selected="false"]:hover { background: rgba(255, 255, 255, .22); } }
.story-panels { display: grid; }
.story-panel { display: grid; gap: 1rem; align-content: start; }
.story-panel + .story-panel { margin-top: 2rem; }
.story-panel p:not(.statement) { max-width: 46ch; }
.js .story-panels .story-panel { grid-area: 1 / 1; margin-top: 0; }
.js .story-panel { transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out), visibility 0s; }
.js .story-panel:not(.is-active) { visibility: hidden; opacity: 0; transform: translateY(12px); }

.napkin-wrap { display: grid; justify-items: center; }
.napkin {
  position: relative; display: grid; width: min(86vw, 520px); aspect-ratio: 1;
  padding: clamp(24px, 4vw, 48px); border-radius: 10px; color: var(--ink);
  background-color: #ffffff;
}
.napkin-art { grid-area: 1 / 1; display: grid; place-items: center; align-content: center; gap: 1rem; text-align: center; }
.js .napkin-art { transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.js .napkin-art:not(.is-active) { opacity: 0; visibility: hidden; transform: scale(0.97); }
.napkin-logo { width: 88%; }
.napkin-note { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); color: var(--berry); }
.napkin-pair { display: flex; gap: clamp(24px, 4vw, 48px); align-items: end; }
.napkin-pair img { height: clamp(96px, 14vw, 170px); width: auto; }
.napkin-pair figcaption { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); color: var(--amore); margin-top: .5rem; }
.napkin-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.napkin-values { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1rem; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
.napkin-values li:nth-child(4n+1) { color: var(--berry); }
.napkin-values li:nth-child(4n+2) { color: var(--amore); }
.napkin-values li:nth-child(4n+3) { color: var(--blue); }
.napkin-values li:nth-child(4n+4) { color: var(--leaf); }

/* Campos */
.fields { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 80px); }
.fields-head { display: grid; gap: 1.25rem; margin-bottom: clamp(32px, 4vw, 56px); }
.fields-head .h2 { color: var(--leaf); }
/* Foto grande + carrusel de campo, centrados al mismo ancho */
.fields-media { width: min(100% - 2 * var(--gutter), 1080px); margin-inline: auto; display: grid; gap: clamp(28px, 4vw, 48px); }
.fields-media > *, .slider-viewport { min-width: 0; }
.field-feature figcaption, .slide figcaption { margin-top: 8px; font-size: var(--s-small); color: var(--muted); }

.slider-viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 16px;
}
.slider-viewport::-webkit-scrollbar { display: none; }
.slider-viewport:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.slider-track { display: flex; gap: 12px; }
.slide { flex: 0 0 86%; scroll-snap-align: start; }
.slide img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: var(--surface); }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.slider-btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--leaf); color: #fff;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.slider-btn:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .slider-btn:hover { background: var(--leaf-deep); } }
.slider-dots { display: flex; gap: 8px; }
.slider-dots button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; background: var(--t-leaf);
  transition: transform var(--t-hover) var(--ease-out), background-color var(--t-hover) ease;
}
.slider-dots button[aria-current="true"] { background: var(--leaf); transform: scale(1.3); }
/* La foto grande se muestra a su tamaño real (1080 px) para que no se pixele */
.drift-frame { overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; }
.drift-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; border-radius: 0; }
.fields-note { margin-top: 24px; font-size: var(--s-small); color: var(--muted); }

/* Clientes: tarjeta derecha y centrada */
.clients { background: var(--leaf); padding-block: clamp(72px, 9vw, 128px); }
.client-card {
  width: min(100% - 2 * var(--gutter), 980px); margin-inline: auto;
  background: var(--bg); color: var(--ink); border-radius: 32px;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 64px);
  text-align: center; display: grid; gap: clamp(28px, 3vw, 44px);
}
.client-card .h2 { color: var(--leaf); }
.client-logos { display: grid; grid-template-columns: 1fr; gap: 12px; }
.client-logos a {
  display: grid; justify-items: center; align-content: center; gap: .75rem; height: 100%;
  padding: 28px 16px; border-radius: 22px;
  background: var(--surface); text-decoration: none; font-weight: 700;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.client-logos a:active { transform: scale(0.97); }
.client-logos img { height: 72px; width: auto; max-width: 100%; object-fit: contain; transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .client-logos a:hover { background: var(--t-leaf); }
  .client-logos a:hover img { transform: scale(1.06); }
}

/* Contacto */
.contact { background: var(--berry); color: #fff; padding-bottom: var(--section); }
.strip { overflow: hidden; padding-top: 48px; }
/* Todas las fotos del mismo tamaño; el relleno final hace que el giro empate sin salto */
.strip-track { display: flex; gap: 8px; padding-right: 8px; width: max-content; }
.strip-track img { width: 146px; height: 110px; object-fit: cover; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.contact-body { display: grid; gap: 1.25rem; padding-top: 72px; }
.contact-body .lead { max-width: 44ch; }
.contact-bar { display: grid; gap: 8px; margin-top: 1rem; }
.contact-bar input, .contact-bar button { min-height: 60px; border-radius: 18px; border: 0; padding: 0 1.25rem; font-size: 1.125rem; }
.contact-bar input { background: rgba(255, 255, 255, .14); color: #fff; transition: background-color var(--t-hover) ease; }
.contact-bar input::placeholder { color: rgba(255, 255, 255, .85); }
.contact-bar input:focus { background: rgba(255, 255, 255, .26); outline: 3px solid #fff; outline-offset: 2px; }
.contact-bar button { background: #fff; color: var(--berry); font-weight: 800; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.contact-bar button:active { transform: scale(0.97); }
.contact-bar button[disabled] { opacity: .7; cursor: progress; }
.form-note.is-ok { font-weight: 700; font-size: var(--s-body); }
@media (hover: hover) and (pointer: fine) { .contact-bar button:hover { background: var(--t-fresa); } }
.form-note { font-size: var(--s-small); }
.contact-cards { display: grid; gap: 8px; margin-top: 2rem; width: 100%; max-width: 760px; justify-self: center; }
.contact-card { display: grid; gap: .25rem; align-content: start; justify-items: center; text-align: center; padding: 22px 24px; border-radius: 20px; background: rgba(255, 255, 255, .1); }
.contact-card h3 { font-size: 1.125rem; margin-bottom: .2rem; }
.contact-card a, .contact-card span { text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .contact-card a:hover { text-decoration: underline; text-underline-offset: .2em; } }
.social { display: grid; gap: .8rem; margin-top: 1.5rem; }
.social h3 { font-size: 1.125rem; }
.social ul { display: flex; flex-wrap: wrap; gap: 8px; }
.social-button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.3rem; border-radius: 999px;
  background: #fff; color: var(--berry); font-weight: 800; text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.social-button:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .social-button:hover { background: var(--t-fresa); } }

/* 6. Las berries ----------------------------------------------- */
.berries-hero { padding-block: clamp(32px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.berries-hero-grid { display: grid; gap: 40px; align-items: center; }
.berries-hero-grid > div { display: grid; gap: 1.5rem; }
.berries-hero .display { color: var(--amore); }
.berries-hero .lead { max-width: 40ch; }
.berry-jump { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
.jump {
  display: grid; justify-items: center; gap: .25rem; min-width: 0;
  text-decoration: none; text-align: center;
  transition: transform var(--t-press) var(--ease-out);
}
.jump img { height: clamp(96px, 12vw, 170px); width: auto; max-width: 100%; object-fit: contain; transition: transform 520ms var(--ease-out); }
.jump span { font-family: var(--marker); font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); line-height: 1; color: var(--deep); }
.jump:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .jump:hover img { transform: translateY(-8px) rotate(-6deg); } }

.berry-facts { background: var(--surface); }
.berry-facts .h2 { color: var(--leaf); }
.facts-grid { display: grid; gap: 1.25rem; }
.facts-grid > p:last-child { max-width: 52ch; }

.berry { background: var(--tint); padding-block: var(--section); overflow-x: clip; }
.berry:nth-of-type(even) { background: var(--bg); }
.berry-grid { display: grid; gap: 40px; }
.berry-intro { display: grid; gap: 1rem; align-content: start; }
.berry-icon { width: auto; height: 104px; object-fit: contain; }
.berry .h2 { color: var(--deep); }
.berry-season { font-weight: 700; color: var(--deep); }
.berry-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; }
.berry-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Clamshell recortado: sin marco ni recorte, se ve completo sobre el color de la fruta */
.berry-photo.is-cutout { aspect-ratio: auto; max-height: none; border-radius: 0; overflow: visible; display: grid; place-items: center; }
.berry-photo.is-cutout img { width: auto; height: clamp(300px, 34vw, 500px); max-width: 100%; object-fit: contain; }
.berry-photo.is-cutout img.is-wide { height: auto; width: min(100%, 640px); }
.berry-cols { display: grid; gap: 40px; }
.berry-cols h3 { margin-bottom: 1rem; }
.care li, .benefits li { position: relative; padding-left: 1.6rem; margin-bottom: .85rem; max-width: 46ch; }
.care li::before, .benefits li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--deep); }
.benefits li::before { border-radius: 3px; transform: rotate(45deg); background: var(--leaf); }

.keep { position: relative; isolation: isolate; overflow: hidden; background: var(--amore); color: #fff; }
.keep::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .08; background: url("assets/img/patron-frutas-v2.webp") repeat; background-size: 300px 300px; }
.keep-grid { display: grid; gap: 2rem; }
.keep-list { display: grid; gap: 1.5rem; }
.keep-list li { font-size: var(--s-lead); line-height: 1.4; max-width: 40ch; }
.keep-list strong { display: block; }
.keep-note { font-size: var(--s-small); }
.berries-cta .cta-grid { display: grid; gap: 1.25rem; justify-items: start; }
.berries-cta .h2 { color: var(--berry); }

/* 6b. Blog: lista de notas y página de cada nota ---------------- */
.blog-hero { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.blog-hero .wrap { display: grid; gap: 1.5rem; }
.blog-hero .display { color: var(--amore); }
.blog-hero .lead { max-width: 40ch; }
.blog-list { padding-bottom: var(--section); }
.blog-grid { display: grid; gap: clamp(40px, 5vw, 56px) 32px; }
.post-card { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.post-card-img { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.post-card-body { display: grid; gap: .9rem; justify-items: start; }
.post-meta { font-size: var(--s-small); font-weight: 500; color: var(--muted); }
.post-card h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--amore); }
.post-card h2 a { text-decoration: none; }
.post-summary { max-width: 52ch; }
.post-card .button { margin-top: .4rem; }
@media (min-width: 720px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  /* La nota más reciente ocupa todo el ancho: foto a la izquierda, texto a la derecha */
  .post-card.is-featured { grid-column: 1 / -1; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(28px, 4vw, 56px); }
}
@media (min-width: 960px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (hover: hover) and (pointer: fine) {
  .post-card:hover .post-card-img img { transform: scale(1.04); }
  .post-card h2 a:hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: .06em; }
}

.post { padding-block: clamp(24px, 4vw, 56px) var(--section); }
.post-wrap { width: min(100% - 2 * var(--gutter), 720px); margin-inline: auto; }
.post-head { display: grid; gap: 1rem; justify-items: start; }
.post-back { font-size: var(--s-small); color: var(--berry); }
.post-title { font-family: var(--marker); font-weight: 400; font-size: clamp(2.75rem, 1.7rem + 3.6vw, 5rem); line-height: .95; letter-spacing: 0; color: var(--amore); }
.post-cover { width: min(100% - 2 * var(--gutter), 1080px); margin: clamp(32px, 4vw, 48px) auto; }
.post-cover img { width: 100%; border-radius: 12px; }
.post-cover figcaption { margin-top: 8px; font-size: var(--s-small); color: var(--muted); }
.post-body { font-size: 1.125rem; line-height: 1.7; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-family: var(--marker); font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1; letter-spacing: 0; color: var(--leaf); margin-top: 1.6em; }
.post-body .text-link { color: var(--berry); }
.post-list li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; }
.post-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--berry); }
.post-note { padding-top: 1.25rem; border-top: 1px solid var(--surface); font-size: var(--s-small); color: var(--muted); }
.post-body .post-more { margin-top: 2rem; }

/* 7. Footer: barra clásica ------------------------------------- */
.footer { background: var(--amore-deep); color: #fff; font-size: var(--s-small); }
.footer-cols { display: grid; gap: 36px; padding-block: 56px 40px; }
.footer-brand { display: grid; gap: 1rem; align-content: start; }
.footer-brand img { width: 150px; }
.footer-brand p { max-width: 30ch; font-size: var(--s-body); }
.footer-col { display: grid; gap: .5rem; align-content: start; }
.footer-col h3 { font-size: var(--s-body); margin-bottom: .25rem; }
.footer-col a { text-decoration: none; opacity: .88; overflow-wrap: anywhere; transition: opacity var(--t-hover) ease; }
.footer-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }
.footer-col span { opacity: .88; overflow-wrap: anywhere; }
.footer-sub { font-weight: 700; margin-top: .4rem; }
.footer-bottom { display: grid; gap: .5rem; padding-block: 20px 28px; }
.footer-bottom p { opacity: .8; }
.footer-bottom .credits { font-size: 0.8125rem; max-width: 90ch; justify-self: end; }

/* 8. Responsive ------------------------------------------------ */
@media (min-width: 540px) {
  .client-logos { grid-template-columns: repeat(3, 1fr); }
  .client-logos img { height: 60px; }
  .contact-bar { grid-template-columns: 1fr 1fr; }
  .contact-bar #c-pedido, .contact-bar button { grid-column: 1 / -1; }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .strip-track img { width: 200px; height: 150px; }
  .slide { flex-basis: calc((100% - 12px) / 2); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .photo-list { grid-template-columns: 1fr 1fr; }
  .promise-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 96px); row-gap: 72px; align-items: center; }
  .promise-photo { grid-column: auto; max-width: 460px; }
  .specimens { grid-template-columns: repeat(4, 1fr); }
  .berry-jump { grid-template-columns: repeat(4, 1fr); }
  .berry-cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  :root { --header-h: 92px; }
  .brand img { height: 70px; }
  .menu-toggle { display: none; }
  .site-nav {
    display: contents; position: static; padding: 0; background: none;
    box-shadow: none; /* taste-skill-ignore */ opacity: 1; transform: none; visibility: visible;
  }
  .nav-group { flex-direction: row; align-items: center; gap: .25rem; grid-row: 1; }
  .nav-left { grid-column: 1; justify-self: start; }
  .nav-right { grid-column: 3; justify-self: end; }
  .site-nav a { padding: .6rem .9rem; }
  .site-nav .button { margin: 0 0 0 .5rem; }
  .hero-content { padding-block: 120px clamp(80px, 12vh, 140px); }
  .showcase-grid { grid-template-columns: 5fr 6fr; }
  .stage-objects, .plinth { width: min(44vw, 580px); }
  .section-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; }
  .specimens { gap: 24px; }
  .story-grid { grid-template-columns: 6fr 5fr; gap: clamp(48px, 6vw, 96px); }
  .napkin { width: min(40vw, 540px); }
  /* Título más arriba y texto pegado a su derecha */
  .fields-head { grid-template-columns: auto minmax(0, 46ch); justify-content: start; align-items: start; column-gap: clamp(40px, 5vw, 80px); }
  .fields-head .statement { margin-top: 1.4rem; }
  .slide { flex-basis: calc((100% - 24px) / 3); }
  .drift-frame { aspect-ratio: 2 / 1; }
  .contact-bar { grid-template-columns: 1fr 1fr 1.3fr 1fr; }
  .contact-bar #c-pedido, .contact-bar button { grid-column: auto; }
  .contact-bar input, .contact-bar button { min-height: 96px; }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .berries-hero-grid { grid-template-columns: 1fr 1fr; }
  .berry-jump { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .facts-grid { grid-template-columns: 5fr 7fr; column-gap: 4rem; }
  .facts-grid > p:last-child { grid-column: 2; }
  .berry-grid { grid-template-columns: 6fr 5fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .berry-grid.is-flipped .berry-intro { order: 2; }
  .berry-grid.is-flipped .berry-photo { order: 1; }
  .berry-grid.is-flipped .berry-cols { order: 3; }
  .berry-photo { grid-row: span 2; }
  .berry-cols { align-self: end; }
  /* Clamshell centrado en altura y un poco hacia el centro de la página */
  .berry-photo.is-cutout { align-self: center; }
  .berry-grid:not(.is-flipped) .berry-photo.is-cutout { justify-items: start; }
  .berry-grid.is-flipped .berry-photo.is-cutout { justify-items: end; }
  .keep-grid { grid-template-columns: 5fr 7fr; column-gap: 4rem; }
  .keep-list { grid-row: span 2; }
  .footer-cols { grid-template-columns: 2fr 1fr 1.4fr 1fr; gap: 48px; }
  .footer-bottom { grid-template-columns: auto 1fr; gap: 2rem; align-items: start; }
  .footer-bottom .credits { text-align: right; }
}

/* 9. Motion ---------------------------------------------------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.lines [data-line] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* Portada: el campo se asienta despacio y el título sube línea por línea */
  /* Al abrir se asienta y después sigue moviéndose despacio, en bucle */
  .hero-bg img { animation: settle-photo 2.4s var(--ease-soft) both, field-drift 22s ease-in-out 2.4s infinite alternate; }
  .hero.is-offscreen .hero-bg img { animation-play-state: paused; }
  .js .lines [data-line] {
    transform: translateY(105%);
    animation: line-up 900ms var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 120ms + 250ms);
  }
  .js [data-rise] {
    opacity: 0; transform: translateY(18px);
    animation: rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 350ms);
  }

  /* Entradas por sección, en orden de lectura */
  .js [data-reveal] [data-part] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 75ms);
  }
  .js [data-reveal].is-in [data-part] { opacity: 1; transform: none; }
  .js .months[data-reveal] [data-part] { transform: translateY(12px); }

  /* El clamshell entra asentándose sobre su disco */
  .js .hero-stage { opacity: 0; transform: translateY(32px) scale(0.96); transition: opacity 900ms ease, transform 1100ms var(--ease-out); }
  .js .hero-stage.is-in { opacity: 1; transform: none; }

  /* La servilleta: el logo se "dibuja" de izquierda a derecha */
  .js .napkin-wrap:not(.is-in) .napkin-logo { clip-path: inset(0 100% 0 0); }
  .js .napkin-wrap.is-in .napkin-art.is-active .napkin-logo { animation: draw 1.8s var(--ease-in-out) 300ms both; }
  .js .napkin-wrap.is-in .napkin-art.is-active .napkin-note { animation: rise 700ms var(--ease-out) 900ms both; }

  /* Foto que se abre como persiana */
  .js .shutter > img {
    clip-path: inset(0 0 100% 0); transform: scale(1.12);
    transition: clip-path 1100ms var(--ease-in-out), transform 1500ms var(--ease-soft);
  }
  .js .shutter.is-in > img { clip-path: inset(0 0 0 0); transform: none; }

  /* Clamshells de "Las berries": entran subiendo y asentándose junto con su texto */
  .js .berry-photo.is-cutout > img {
    clip-path: none; opacity: 0;
    transform: translateY(48px) scale(0.92) rotate(-4deg);
    transition: opacity 700ms ease 220ms, transform 1100ms var(--ease-out) 220ms;
  }
  .js .berry-grid.is-flipped .berry-photo.is-cutout > img { transform: translateY(48px) scale(0.92) rotate(4deg); }
  .js .berry-photo.is-cutout.is-in > img,
  .js .berry-grid.is-flipped .berry-photo.is-cutout.is-in > img { opacity: 1; transform: none; }

  /* Calidad de exportación: el abanico se abre al aparecer; el sello gira y la fresa flota */
  .js .export-stack:not(.is-in) .stack-card { --fan: translate(0, 18%) rotate(0deg); opacity: 0; }
  .js .export-stack:not(.is-in) .stamp { opacity: 0; transform: scale(.6) rotate(-40deg); }
  .stamp { transition: opacity 500ms ease 700ms, transform 900ms var(--ease-out) 700ms; }
  .stamp-ring { animation: stamp-spin 22s linear infinite; }
  .stack-front { animation: float-y 6s ease-in-out infinite; }

  /* Tira de fotos de contacto */
  .strip-track { animation: marquee 110s linear infinite; }
  .strip:hover .strip-track, .strip.is-paused .strip-track { animation-play-state: paused; }
}

/* Movimiento ligado al scroll: campo y patrón de frutas */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .drift { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .story-pattern { animation: pattern-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}

@keyframes line-up { to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle-photo { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes field-drift { from { transform: scale(1); } to { transform: scale(1.1) translate(-2%, -1.5%); } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stamp-spin { to { transform: rotate(360deg); } }
@keyframes float-y { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes drift { from { transform: scale(1.03) translateY(-1.2%); } to { transform: scale(1.03) translateY(1.2%); } }
@keyframes pattern-drift { from { transform: translateY(-6%); } to { transform: translateY(6%); } }

/* 10. Reduced motion: se queda el contenido, se va el recorrido -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip { overflow-x: auto; }
  .slider-viewport { scroll-behavior: auto; }
  .stage-img, .showcase { transition-duration: 200ms; }
}

/* 11. Visor de fotos: las fotos de "Nuestros campos" se abren en grande y se navegan */
.field-feature img, .slide img { cursor: zoom-in; }
.field-feature img:focus-visible, .slide img:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
html.lb-lock { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 64px 72px 24px; background: rgba(28, 16, 36, 0.94);
  opacity: 0; transition: opacity 220ms var(--ease-soft);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lb-figure { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: 100%; }
.lb-img {
  max-width: min(100%, 1080px); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px);
  width: auto; height: auto; object-fit: contain; border-radius: 12px;
  opacity: 0; transform: scale(.97); transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out);
}
.lb-img.is-ready { opacity: 1; transform: none; }
.lb-figure figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; color: #fff; font-size: var(--s-small); text-align: center; }
.lb-count { color: rgba(255, 255, 255, .65); font-variant-numeric: tabular-nums; }
.lb-close, .lb-nav {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.lb-close { top: 12px; right: 12px; }
.lb-nav { top: 50%; margin-top: -24px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-close:active, .lb-nav:active { transform: scale(.92); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lb-close:hover, .lb-nav:hover { background: var(--leaf); } }
@media (max-width: 700px) {
  /* En el celular las flechas bajan para no tapar la foto */
  .lightbox { padding: 64px 16px 84px; }
  .lb-nav { top: auto; bottom: 18px; margin-top: 0; }
  .lb-prev { left: calc(50% - 60px); }
  .lb-next { right: calc(50% - 60px); }
  .lb-img { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lb-img { transition: none; }
  .lb-img { transform: none; }
}