/* Ofertas de campaña (29-oct-2026). Las promociones del motor (mu-plugins/mtryx-promociones.php) que llevan la clave «campana» se lucen en:
     - la portada: bloque .camp bajo la cabecera, lo pinta js/campanas.js (oculto hasta que haya ofertas vigentes);
     - /ofertas/: página .camp-page que sirve mu-plugins/mtryx-campanas.php con la rejilla de productos del tema.
   Solo tokens de system.css (--c-*, --ff-*, --radius, --gut, --ease). Prefijo .camp. Sin ofertas vigentes no se ve nada. */

.camp, .camp-page { font-family: var(--ff-ui); color: var(--ink, #1F2A24); }
.camp *, .camp *::before, .camp *::after, .camp-page *, .camp-page *::before, .camp-page *::after { box-sizing: border-box; }
.camp a, .camp-page a { color: inherit; text-decoration: none; }
.camp p, .camp-page p { margin: 0; }
.camp[hidden] { display: none; }
.camp-i { display: block; flex: none; width: 18px; height: 18px; }

/* ═══ Portada: bloque «Ofertas de noviembre» ═══ */
.camp { padding: clamp(30px, 5vw, 56px) 0 clamp(32px, 5vw, 60px); background: var(--c-crema-soft, #FAF7F3); border-bottom: 1px solid var(--c-linea, rgba(31,42,36,.10)); }
.camp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 32px; margin-bottom: clamp(18px, 3vw, 30px); }
.camp__titulo { display: grid; gap: 8px; min-width: 0; }
.camp-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--c-verde-botanico, #276B45); }
.camp__h { margin: 0; font-family: var(--ff-display); font-weight: 500; font-size: clamp(1.75rem, 6.6vw, 2.7rem); line-height: 1.04; letter-spacing: -.012em;
  color: var(--c-grafito, #1F2A24); text-wrap: balance; }
.camp__h em, .camp-page__h em { font-style: italic; font-weight: 400; color: var(--c-verde-botanico, #276B45); }
.camp__sub { font-size: .98rem; color: var(--c-grafito-soft, #4A554F); max-width: 62ch; }
.camp__todas { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--c-linea-strong, rgba(31,42,36,.18)); font-weight: 600; font-size: .92rem; letter-spacing: .02em; white-space: nowrap; color: var(--c-verde-botanico, #276B45);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.camp__todas:hover { background: var(--c-blanco, #fff); border-color: var(--c-verde-botanico, #276B45); transform: translateY(-1px); }
.camp__todas .camp-i { transition: transform .25s var(--ease); }
.camp__todas:hover .camp-i { transform: translateX(3px); }

.camp__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.camp__grid > li { display: flex; min-width: 0; }

/* Tarjeta de una oferta */
.camp-card { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 22px 22px 18px; border-radius: var(--radius, 14px);
  background: var(--c-blanco, #fff); border: 1px solid var(--c-linea, rgba(31,42,36,.10));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.camp-card::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-verde-salvia, #6FAE8C); }
.camp-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c-verde-botanico, #276B45) 40%, transparent); box-shadow: 0 18px 36px -24px rgba(31,42,36,.35); }
.camp-card:focus-visible, .camp__todas:focus-visible, .camp-chip:focus-visible { outline: 3px solid var(--c-verde-botanico, #276B45); outline-offset: 3px; }
.camp-marca { font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-grafito-soft, #4A554F); }
.camp-card__t { margin: 0; font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.7rem, 5.2vw, 2.1rem); line-height: 1.05; letter-spacing: -.012em; color: var(--c-verde-botanico, #276B45);
  font-variant-numeric: lining-nums; text-wrap: balance; }
.camp-card__s { font-size: .9rem; line-height: 1.5; color: var(--c-grafito-soft, #4A554F); flex: 1 1 auto; }
.camp-card__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--c-linea, rgba(31,42,36,.10)); }
.camp-hasta { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: 999px; background: var(--c-rosa-suave, #F4D6DD); color: #5A2A38;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.camp-card__ver { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--c-verde-botanico, #276B45); }
.camp-card__ver .camp-i { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.camp-card:hover .camp-card__ver .camp-i { transform: translateX(3px); }

/* Tarjeta con imagen (opcional): la foto arriba (3:2 en todos los anchos) y el texto debajo; sin imagen, la tarjeta de siempre */
.camp-card--img { padding: 0; gap: 0; overflow: hidden; }
.camp-card--img::before { display: none; }
.camp-card__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-crema, #F3EFEA); }
.camp-card__media .camp-hasta { position: absolute; z-index: 1; top: 12px; left: 12px; box-shadow: 0 2px 10px rgba(31,42,36,.18); }
.camp-card__media picture, .camp-card__img { display: block; width: 100%; height: 100%; }
.camp-card__img { object-fit: cover; transition: transform .6s var(--ease); }
.camp-card__img--ancha { object-position: 78% 50%; }
.camp-card--img:hover .camp-card__img { transform: scale(1.025); }
.camp-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 18px 22px 18px; }

/* ═══ Página /ofertas/ ═══ */
.camp-page { background: var(--c-crema-soft, #FAF7F3); padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 7vw, 90px); }
.camp-page__head { display: grid; gap: 12px; margin-bottom: clamp(22px, 4vw, 40px); max-width: 880px; }
.camp-page__h { margin: 0; font-family: var(--ff-display); font-weight: 500; font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1.02; letter-spacing: -.015em; color: var(--c-grafito, #1F2A24); text-wrap: balance; }
.camp-page__sub { font-size: 1.02rem; color: var(--c-grafito-soft, #4A554F); }
.camp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.camp-chip { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 9px 18px; border-radius: 999px; background: var(--c-blanco, #fff);
  border: 1.5px solid var(--c-linea-strong, rgba(31,42,36,.18)); font-size: .86rem; line-height: 1.25; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.camp-chip b { font-weight: 700; letter-spacing: .01em; }
.camp-chip span { color: var(--c-verde-botanico, #276B45); font-weight: 600; }
.camp-chip:hover { border-color: var(--c-verde-botanico, #276B45); }

.camp-sec { margin-top: clamp(30px, 5vw, 56px); scroll-margin-top: 90px; }
.camp-sec:first-of-type { margin-top: 0; }
.camp-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 28px; padding-bottom: 16px; margin-bottom: clamp(14px, 2.4vw, 22px); border-bottom: 1px solid var(--c-linea-strong, rgba(31,42,36,.18)); }
.camp-sec__txt { display: grid; gap: 6px; min-width: 0; }
.camp-sec__h { margin: 0; font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.7rem, 5.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.012em; color: var(--c-verde-botanico, #276B45); text-wrap: balance; }
.camp-sec__sub { font-size: .94rem; color: var(--c-grafito-soft, #4A554F); max-width: 70ch; }
.camp-sec__n { margin-top: 14px; font-size: .82rem; color: var(--c-grafito-soft, #4A554F); }
.camp-sec__bases { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--c-crema, #F3EFEA); font-size: .74rem; line-height: 1.55; color: var(--c-grafito-soft, #4A554F); }
.camp-sec__bases b { color: var(--c-grafito, #1F2A24); }

/* Grupo con imagen (opcional). Pantalla estrecha: la imagen arriba y el texto debajo, sobre el fondo de la página. Desde 1100 px: el texto va SOBRE la
   imagen (franja 3:1, que deja sitio limpio a la izquierda) con un velo suave de su color, claro u oscuro según «tono», para que se lea siempre. */
.camp-sec__banner { display: block; }
.camp-sec__pic { display: block; border-radius: var(--radius, 14px); overflow: hidden; background: var(--c-crema, #F3EFEA); }
.camp-sec__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.camp-sec__img--ancha { aspect-ratio: 3 / 1; object-position: 78% 50%; }
.camp-sec--img .camp-sec__head { margin-top: 14px; }
@media (min-width: 641px) { .camp-sec__img { aspect-ratio: 3 / 1; } }
@media (min-width: 1100px) {
  .camp-sec__banner { position: relative; border-radius: var(--radius, 14px); overflow: hidden; margin-bottom: clamp(14px, 2.4vw, 22px); }
  .camp-sec__banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
  .camp-tono-claro .camp-sec__banner::after { background: linear-gradient(90deg, rgba(250,247,243,.62) 0%, rgba(250,247,243,.38) 26%, rgba(250,247,243,0) 52%); }
  .camp-tono-oscuro .camp-sec__banner::after { background: linear-gradient(90deg, rgba(14,20,17,.55) 0%, rgba(14,20,17,.30) 26%, rgba(14,20,17,0) 52%); }
  .camp-sec__pic { border-radius: 0; }
  .camp-sec--img .camp-sec__head { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: min(42%, 520px); margin: 0; padding: 0 0 0 clamp(28px, 3.6vw, 52px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; border: 0; }
  .camp-sec--img .camp-sec__sub { max-width: 34ch; }
  .camp-tono-oscuro .camp-marca, .camp-tono-oscuro .camp-sec__sub { color: #E6E9E4; }
  .camp-tono-oscuro .camp-sec__h { color: #FFFFFF; }
  .camp-tono-oscuro .camp-hasta { background: rgba(255,255,255,.92); }
}

/* Rejilla: las tarjetas son las del tema (.fma-card); aquí solo las columnas, a todo el ancho de la página */
.camp-page ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px)  { .camp-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px)  { .camp-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1200px) { .camp-page ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.camp-page ul.products > li { margin: 0; width: auto; float: none; }

/* Indicador de la tira (solo móvil; decorativo): puntitos, el de la tarjeta a la vista va marcado */
.camp__dots { display: none; }

@media (max-width: 640px) {
  /* Portada en el móvil: las ofertas van en una tira horizontal (una tarjeta por pantalla, la siguiente asoma) y la cabecera se compacta; el bloque entero
     (título incluido) queda en unos 600 px. El texto «Del 1 al…» sobra: cada tarjeta ya dice «Hasta el…». Escritorio y tablet no cambian. */
  .camp { padding: 22px 0 18px; overflow-x: clip; }
  .camp__head { flex-direction: row; align-items: flex-end; gap: 4px 12px; margin-bottom: 14px; }
  .camp__sub { display: none; }
  .camp__todas { min-height: 44px; padding: 0 2px 0 8px; border: 0; border-radius: 0; font-size: .9rem; }
  .camp__todas:hover { background: none; transform: none; }
  .camp__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 6px; scroll-padding-inline: var(--gut); }
  .camp__grid::-webkit-scrollbar { display: none; }
  .camp__grid > li { flex: 0 0 min(85vw, 340px); scroll-snap-align: start; }
  .camp__dots { display: flex; justify-content: center; gap: 7px; margin-top: 8px; }
  .camp__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-linea-strong, rgba(31,42,36,.18)); transition: background-color .2s, transform .2s; }
  .camp__dots i.is-on { background: var(--c-verde-botanico, #276B45); transform: scale(1.2); }
  .camp-card { padding: 18px 18px 16px; }
  .camp-card--img { padding: 0; }
  .camp-card__media { aspect-ratio: 16 / 10; }
  .camp-card__body { padding: 14px 18px 14px; gap: 6px; }
  .camp-card__s { font-size: .86rem; line-height: 1.45; }
  .camp-card__pie { margin-top: 2px; padding-top: 10px; }
  .camp-sec__head { flex-direction: column; align-items: flex-start; }
  .camp-chip { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .camp-card, .camp-card:hover, .camp__todas, .camp__todas:hover, .camp-card__ver .camp-i, .camp__todas .camp-i { transition: none; transform: none; }
}