/* ==========================================================================
   Forestgreen · Black Friday 2026
   Landing de la categoría 120 (catalog/listing/category-120.tpl) y franja
   amarilla superior (módulo fgblackfriday, hook displayBanner).
   Diseño: Figma AGROBROKER > LANDING > "LANDING BLACK FRIDAY" (1920 px).
   Las medidas del diseño se escalan con el ancho de ventana: valor/19.2 vw.
   Wardem, 05/11/2026
   ========================================================================== */

:root {
  --fgbf-verde: #005801;
  --fgbf-amarillo: #fded1f;
  --fgbf-texto: #303030;
  --fgbf-blanco: #fff;
  /* Figma usa Times New Roman MT Condensed (Monotype, de pago) y Montserrat.
     Se cargan si el equipo las tiene; si no, Times New Roman y la Manrope
     del tema. */
  --fgbf-serif: "Times New Roman MT Condensed", "Times New Roman", Times, serif;
  --fgbf-sans: "Montserrat", var(--font-family, "Manrope", sans-serif);
}

/* ---------- Franja superior ---------- */
.fgbf-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(34px, 2.97vw, 57px);
  padding: 6px 16px;
  background: var(--fgbf-amarillo);
  color: var(--fgbf-verde);
  font-family: var(--fgbf-sans);
  font-weight: 700;
  font-size: clamp(12px, 1.2vw, 22px);
  letter-spacing: .1em;
  line-height: 1.09;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
a.fgbf-strip:hover,
a.fgbf-strip:focus { color: var(--fgbf-verde); text-decoration: underline; }

/* ---------- Estructura de la página ---------- */
body.category-id-120 #content-wrapper {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding-left: 15px;
  padding-right: 15px;
}
body.category-id-120 #wrapper { background: var(--fgbf-blanco); }

.fgbf-landing {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 6.25vw, 120px);
  padding-bottom: clamp(56px, 6.25vw, 120px);
  color: var(--fgbf-texto);
}
.fgbf-landing a { text-decoration: none; }

/* Secciones a todo el ancho aunque estén dentro de .container */
.fgbf-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.fgbf-landing h1,
.fgbf-landing h2,
.fgbf-landing h3 { margin: 0; text-transform: none; }

/* ---------- Cabecera ---------- */
.fgbf-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 55.26vw, 1061px);
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
    repeating-linear-gradient(90deg, #1f5a1d 0 7.5%, #1a4f19 7.5% 7.8%, #22621f 7.8% 15.3%, #184a17 15.3% 15.6%),
    #1f5a1d;
}
.fgbf-hero.has-bg {
  background:
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
    var(--fgbf-hero-bg) center / cover no-repeat;
}
.fgbf-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 43.02%; /* 826 / 1920 */
}
.fgbf-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* en Figma la foto va volteada */
}
.fgbf-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.34vw, 45px);
  width: min(47.3vw, 909px);
  margin: clamp(48px, 5.57vw, 107px) 0 clamp(48px, 5.57vw, 107px) clamp(20px, 5vw, 96px);
  color: var(--fgbf-blanco);
}
.fgbf-hero__logo {
  /* El logo de la tienda mide 167 px: más grande se vería borroso. */
  width: clamp(140px, 11vw, 200px);
  height: auto;
}
.fgbf-hero__badge {
  margin: 0;
  padding: clamp(16px, 2.17vw, 41.7px);
  border-radius: clamp(4px, .35vw, 6.7px);
  background: var(--fgbf-amarillo);
  color: var(--fgbf-verde);
  font-family: var(--fgbf-sans);
  font-weight: 700;
  font-size: clamp(30px, 3.48vw, 66.8px);
  line-height: 1.09;
  text-transform: uppercase;
}
.fgbf-hero .fgbf-hero__title {
  color: var(--fgbf-blanco);
  font-family: var(--fgbf-serif);
  font-weight: 400;
  font-stretch: condensed;
  font-size: clamp(44px, 5.47vw, 105px);
  line-height: .9;
}
.fgbf-hero__text,
.fgbf-hero__dates {
  margin: 0;
  max-width: 780px;
  font-family: var(--fgbf-serif);
  font-stretch: condensed;
  font-size: clamp(22px, 2.32vw, 44.5px);
  line-height: 1;
}
.fgbf-hero__dates { text-transform: uppercase; }
.fgbf-landing .fgbf-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: clamp(14px, 1.29vw, 24.8px);
  border-radius: 4px;
  background: var(--fgbf-amarillo);
  color: var(--fgbf-verde);
  font-family: var(--fgbf-sans);
  font-weight: 700;
  font-size: clamp(18px, 2.07vw, 39.7px);
  line-height: 1.09;
  text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.fgbf-landing .fgbf-hero__cta:hover,
.fgbf-landing .fgbf-hero__cta:focus { background: var(--fgbf-blanco); color: var(--fgbf-verde); }
.fgbf-hero__down {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 2.5vw, 48px);
  z-index: 1;
  transform: translateX(-50%);
  color: var(--fgbf-blanco);
  line-height: 0;
}
.fgbf-hero__down:hover { color: var(--fgbf-amarillo); }

/* ---------- Mobiliario para jardín ---------- */
.fgbf-feature {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(32px, 5.2vw, 100px);
  width: 100%;
  max-width: 1510px;
  margin: 0 auto;
  padding: 0 clamp(0px, 3vw, 60px);
}
.fgbf-feature__media {
  flex: 0 1 700px;
  aspect-ratio: 700 / 459;
  overflow: hidden;
  border-radius: clamp(16px, 1.56vw, 30px);
}
.fgbf-feature__media img,
.fgbf-closing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.fgbf-feature__media:hover img { transform: scale(1.03); }
.fgbf-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.34vw, 45px);
  flex: 0 1 710px;
}
.fgbf-landing .fgbf-feature__title,
.fgbf-landing .fgbf-closing__title {
  color: var(--fgbf-verde);
  font-family: var(--fgbf-serif);
  font-weight: 400;
  font-stretch: condensed;
  line-height: .9;
}
.fgbf-landing .fgbf-feature__title { max-width: 575px; font-size: clamp(42px, 5.08vw, 97.4px); }
.fgbf-feature__text,
.fgbf-closing__text {
  margin: 0;
  color: var(--fgbf-texto);
  font-family: var(--fgbf-serif);
  font-stretch: condensed;
  line-height: 1;
}
.fgbf-feature__text { font-size: clamp(20px, 2.08vw, 40px); }
.fgbf-landing .fgbf-link {
  display: inline-flex;
  gap: .35em;
  min-width: min(360px, 100%);
  padding: clamp(10px, .92vw, 17.6px) 0;
  border-bottom: 2.7px solid var(--fgbf-verde);
  color: var(--fgbf-verde);
  font-family: var(--fgbf-sans);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 30.65px);
  line-height: 1.09;
}
.fgbf-landing .fgbf-link:hover { color: #4e9f4f; border-color: #4e9f4f; }

/* ---------- Selección Black Friday ---------- */
.fgbf-selection {
  padding: clamp(48px, 5.4vw, 104px) clamp(16px, 3.2vw, 62px) clamp(56px, 7.1vw, 137px);
  background:
    repeating-linear-gradient(90deg, #1f5a1d 0 7.5%, #1a4f19 7.5% 7.8%, #22621f 7.8% 15.3%, #184a17 15.3% 15.6%),
    #1f5a1d;
  scroll-margin-top: var(--altura-header, 0);
}
.fgbf-selection.has-bg { background: var(--fgbf-sel-bg) center top / cover no-repeat, #1f5a1d; }
.fgbf-selection__inner { max-width: 1796px; margin: 0 auto; }
.fgbf-selection__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.3vw, 25px);
  margin: 0 auto clamp(32px, 3.45vw, 66px);
  max-width: 1060px;
  color: var(--fgbf-blanco);
  font-family: var(--fgbf-serif);
  font-stretch: condensed;
  text-align: center;
}
.fgbf-landing .fgbf-selection__title {
  color: var(--fgbf-blanco);
  font-family: var(--fgbf-serif);
  font-weight: 400;
  font-size: clamp(42px, 5.01vw, 96.2px);
  line-height: .9;
}
.fgbf-selection__subtitle {
  margin: 0;
  font-size: clamp(20px, 2.32vw, 44.5px);
  line-height: 1;
}

.fgbf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.71vw, 52px) clamp(20px, 2.5vw, 48px);
}
.fgbf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.82vw, 35px);
  overflow: hidden;
  border-radius: clamp(12px, 1.04vw, 20px);
  background: var(--fgbf-blanco);
}
.fgbf-card__media {
  display: block;
  aspect-ratio: 490 / 321;
  overflow: hidden;
  border-radius: 10px;
  background: #f3f1ec;
}
.fgbf-card__media picture,
.fgbf-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.fgbf-card:hover .fgbf-card__media img { transform: scale(1.04); }
.fgbf-card__badge {
  position: absolute;
  top: clamp(14px, 1.51vw, 29px);
  left: clamp(14px, 1.35vw, 26px);
  padding: .43em .5em .4em;
  border-radius: 16px;
  background: var(--fgbf-amarillo);
  color: var(--fgbf-verde);
  font-family: var(--fgbf-sans);
  font-weight: 600;
  font-size: clamp(14px, 1.03vw, 19.85px);
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.fgbf-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: clamp(12px, 1.2vw, 23px);
  padding: 0 6.3% clamp(26px, 2.2vw, 42px);
}
.fgbf-landing .fgbf-card__title {
  font-family: var(--fgbf-serif);
  font-weight: 400;
  font-stretch: condensed;
  font-size: clamp(26px, 2.51vw, 48.2px);
  line-height: 1;
  /* Los nombres del catálogo están en mayúsculas: se pasan a tipo frase. */
  text-transform: lowercase;
}
.fgbf-landing .fgbf-card__title::first-letter { text-transform: uppercase; }
.fgbf-landing .fgbf-card__title a { color: var(--fgbf-verde); }
.fgbf-landing .fgbf-card__title a:hover { color: #4e9f4f; }
.fgbf-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  font-family: var(--fgbf-sans);
  line-height: 1.2;
}
.fgbf-card__old { color: #7a7a7a; font-size: clamp(14px, .94vw, 18px); }
.fgbf-card__now { color: var(--fgbf-verde); font-weight: 700; font-size: clamp(18px, 1.3vw, 25px); }
.fgbf-card__now small { font-weight: 500; font-size: .7em; }
.fgbf-landing .fgbf-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-height: clamp(44px, 2.92vw, 56px);
  margin-top: auto;
  padding: 8px 12px;
  border: 1.9px solid var(--fgbf-verde);
  border-radius: 4px;
  color: var(--fgbf-verde);
  font-family: var(--fgbf-sans);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 25px);
  line-height: 1.09;
  transition: background-color .2s, color .2s;
}
.fgbf-landing .fgbf-card__cta:hover,
.fgbf-landing .fgbf-card__cta:focus { background: var(--fgbf-verde); color: var(--fgbf-blanco); }
.fgbf-empty { grid-column: 1 / -1; color: var(--fgbf-blanco); font-size: 22px; text-align: center; }
.fgbf-selection .pagination { color: var(--fgbf-blanco); margin-top: 32px; }

/* ---------- Cierre ---------- */
.fgbf-closing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.02vw, 58px);
  width: 100%;
  max-width: 1696px;
  margin: 0 auto;
  padding: 0 clamp(0px, 3vw, 60px);
}
.fgbf-closing__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.72vw, 52px);
  flex: 0 1 825px;
}
.fgbf-landing .fgbf-closing__title { font-size: clamp(46px, 5.89vw, 113.2px); }
.fgbf-closing__text { max-width: 802px; font-size: clamp(21px, 2.42vw, 46.4px); }
.fgbf-landing .fgbf-closing__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-width: min(505px, 100%);
  padding: clamp(14px, 1.04vw, 20px) 24px;
  border: 2.5px solid var(--fgbf-verde);
  border-radius: 4px;
  background: var(--fgbf-verde);
  color: var(--fgbf-blanco);
  font-family: var(--fgbf-sans);
  font-weight: 600;
  font-size: clamp(16px, 1.48vw, 28.5px);
  line-height: 1.09;
  text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.fgbf-landing .fgbf-closing__cta:hover,
.fgbf-landing .fgbf-closing__cta:focus { background: var(--fgbf-blanco); color: var(--fgbf-verde); }
.fgbf-closing__media {
  flex: 0 1 813px;
  aspect-ratio: 813 / 533;
  overflow: hidden;
  border-radius: clamp(18px, 1.81vw, 35px);
}

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1399px) {
  .fgbf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .fgbf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fgbf-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .fgbf-hero__photo { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 60vh; }
  .fgbf-hero__content { width: auto; margin: 32px 20px 72px; }
  .fgbf-hero__down { bottom: 16px; }

  .fgbf-feature,
  .fgbf-closing { flex-direction: column; align-items: stretch; }
  .fgbf-feature__media,
  .fgbf-closing__media { flex: none; width: 100%; }
  .fgbf-feature__body,
  .fgbf-closing__body { flex: none; }
}

/* ---------- Móvil ---------- */
@media (max-width: 575px) {
  .fgbf-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fgbf-selection { padding-left: 16px; padding-right: 16px; }
  .fgbf-hero__content { margin: 28px 16px 64px; }
  .fgbf-hero__badge { padding: 14px 18px; }
  .fgbf-landing .fgbf-hero__cta,
  .fgbf-landing .fgbf-closing__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fgbf-landing *,
  .fgbf-landing *::before,
  .fgbf-landing *::after { transition: none !important; }
}