/* Ofertas de campaña de Vuelta del Castillo (30-oct-2026; basado en el de María, 29-oct-2026, con la paleta y los tokens de esta web).
   Las promociones del motor (mu-plugins/mtryx-promociones.php) que llevan la clave «campana» se lucen en:
     - la portada: bloque .camp bajo la cinta de confianza, 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 (tarjetas .fvc-card).
   Solo tokens de esta web (tokens.css): verde #00351D, marfil #F7F4EC, crema #EFE8D9, arena #C9A87C, tinta #1A2019. Prefijo .camp.
   Se carga en la portada y en /ofertas/ (dentro del tema, que define los mismos tokens). Sin ofertas vigentes no se ve nada. */
.camp, .camp-page { --camp-ease: cubic-bezier(.4, 0, .2, 1); --camp-gut: 1.25rem; --camp-linea-fuerte: rgba(0,53,29,.28);
  font-family: var(--f-sans); color: var(--c-tinta, #1A2019); }
.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, #EFE8D9); border-bottom: 1px solid var(--c-linea, rgba(0,53,29,.14)); }
.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: var(--fs-kicker, .78rem); font-weight: 500; letter-spacing: var(--ls-kicker, .18em); text-transform: uppercase; color: var(--c-arena-ink, #7D5F35); }
.camp__h { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 5.6vw, 2.5rem); line-height: 1.1; letter-spacing: var(--ls-display, .02em); text-transform: uppercase;
  color: var(--c-verde, #00351D); text-wrap: balance; }
.camp__h em, .camp-page__h em { font-style: normal; font-weight: 500; color: var(--c-arena-ink, #7D5F35); } /* sin cursiva: esta web no carga la cursiva de Playfair */
.camp__sub { font-size: .98rem; color: var(--c-tinta-soft, #4A544A); max-width: 62ch; }
.camp__todas { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; padding: 10px 0; white-space: nowrap; font-size: .86rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-verde, #00351D); border-bottom: 1.5px solid var(--c-arena, #C9A87C); transition: border-color .25s var(--camp-ease); }
.camp__todas:hover { border-bottom-color: var(--c-verde, #00351D); }
.camp__todas .camp-i { transition: transform .25s var(--camp-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(--r-md, 10px);
  background: var(--c-blanco, #fff); border: 1px solid var(--c-linea, rgba(0,53,29,.14));
  transition: transform .25s var(--camp-ease), box-shadow .25s var(--camp-ease), border-color .25s var(--camp-ease); }
.camp-card::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-arena, #C9A87C); }
.camp-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c-verde, #00351D) 40%, transparent); box-shadow: 0 18px 36px -24px rgba(26,32,25,.35); }
.camp-card:focus-visible, .camp__todas:focus-visible, .camp-chip:focus-visible { outline: 3px solid var(--c-verde, #00351D); outline-offset: 3px; }
.camp-marca { font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--c-tinta-soft, #4A544A); }
.camp-card__t { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.55rem, 4.8vw, 1.9rem); line-height: 1.1; letter-spacing: .01em; color: var(--c-verde, #00351D);
  font-variant-numeric: lining-nums; text-wrap: balance; }
.camp-card__s { font-size: .9rem; line-height: 1.5; color: var(--c-tinta-soft, #4A544A); 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(0,53,29,.14)); }
.camp-hasta { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: 999px; background: var(--c-arena, #C9A87C); color: var(--c-tinta, #1A2019);
  font-size: .72rem; font-weight: 500; 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: 500; color: var(--c-verde, #00351D); }
.camp-card__ver .camp-i { width: 16px; height: 16px; transition: transform .25s var(--camp-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, #EFE8D9); }
.camp-card__media .camp-hasta { position: absolute; z-index: 1; top: 12px; left: 12px; box-shadow: 0 2px 10px rgba(26,32,25,.18); }
.camp-card__media picture, .camp-card__img { display: block; width: 100%; height: 100%; }
.camp-card__img { object-fit: cover; transition: transform .6s var(--camp-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-marfil, #F7F4EC); 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(--f-display); font-weight: 500; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.06; letter-spacing: var(--ls-display, .02em); text-transform: uppercase; color: var(--c-verde, #00351D); text-wrap: balance; }
.camp-page__sub { font-size: 1.02rem; color: var(--c-tinta-soft, #4A544A); }
.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(--camp-linea-fuerte); font-size: .86rem; line-height: 1.25; transition: border-color .25s var(--camp-ease), background-color .25s var(--camp-ease); }
.camp-chip b { font-weight: 500; letter-spacing: .01em; }
.camp-chip span { color: var(--c-verde, #00351D); font-weight: 500; }
.camp-chip:hover { border-color: var(--c-verde, #00351D); }

.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(--camp-linea-fuerte); }
.camp-sec__txt { display: grid; gap: 6px; min-width: 0; }
.camp-sec__h { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 4.8vw, 2.1rem); line-height: 1.1; letter-spacing: var(--ls-display, .02em); text-transform: uppercase; color: var(--c-verde, #00351D); text-wrap: balance; }
.camp-sec__sub { font-size: .94rem; color: var(--c-tinta-soft, #4A544A); max-width: 70ch; }
.camp-sec__n { margin-top: 14px; font-size: .82rem; color: var(--c-tinta-soft, #4A544A); }
.camp-sec__bases { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--c-crema, #EFE8D9); font-size: .74rem; line-height: 1.55; color: var(--c-tinta-soft, #4A544A); }
.camp-sec__bases b { color: var(--c-tinta, #1A2019); }

/* 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(--r-md, 10px); overflow: hidden; background: var(--c-crema, #EFE8D9); }
.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(--r-md, 10px); 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(247,244,236,.62) 0%, rgba(247,244,236,.38) 26%, rgba(247,244,236,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: column; align-items: flex-start; gap: 0; margin-bottom: 10px; } /* Vuelta: el título (Playfair en mayúsculas) es más ancho que el de María y pisaba el enlace: el enlace va debajo */
  .camp__sub { display: none; }
  .camp__todas { min-height: 44px; padding: 0 2px 0 0; 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(--camp-gut) * -1); padding: 2px var(--camp-gut) 6px; scroll-padding-inline: var(--camp-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(--camp-linea-fuerte); transition: background-color .2s, transform .2s; }
  .camp__dots i.is-on { background: var(--c-verde, #00351D); 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; }
}