/*
 Theme Name: Bricks Child
 Theme URI: https://bricksbuilder.io/
 Description: Child Theme para Bricks
 Author: Javier De la Cuadra
 Template: bricks
 Version: 1.0.6
 Text Domain: bricks-child
*/

/* Evita franja blanca / doble scroll por overflow horizontal */
html,
body,
.brx-body {
  overflow-x: clip;
  max-width: 100%;
}

#brx-content,
#brx-footer,
.brxe-section {
  max-width: 100%;
  box-sizing: border-box;
}

/* =====================================================
   HEADER FENSUAGRO
   Verde: #086f34

   En Bricks (CSS class, sin punto):
   - Section              → fg-header
   - Container contenido  → fg-header-inner
   - Logo                 → fg-header-logo
   - Campesino            → fg-header-personaje

   Layout / background-position → preferible en Bricks.
   ===================================================== */

:root {
  --fg-green: #086f34;
  --fg-header-max: 1400px;
  --fg-header-height: 130px;
}

.fg-header.brxe-section,
section.fg-header,
.fg-header {
  position: relative;
  height: var(--fg-header-height);
  min-height: var(--fg-header-height);
  max-height: var(--fg-header-height);
  overflow: hidden;
  background-size: cover !important;
  background-position: center 95% !important;
  background-repeat: no-repeat !important;
}

/* Overlay verde sobre la imagen de fondo de la Section */
.fg-header.brxe-section::before,
section.fg-header::before,
.fg-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 111, 52, 0.85); /* #086f34 */
  z-index: 0;
  pointer-events: none;
}

.fg-header-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--fg-header-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.fg-header-logo img,
img.fg-header-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 110px;
  object-fit: contain;
}

.fg-header-personaje img,
img.fg-header-personaje {
  display: block;
  width: auto;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}

/* Bricks lazy a veces deja el header en opacity:0 / SVG vacío */
.fg-header.bricks-lazy-hidden,
.fg-header .bricks-lazy-hidden {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* =====================================================
   HEADER — móvil
   Escritorio: logo | CTA 50 años | redes+buscar | campesino
   Móvil: logo (+15%) + campesino a la derecha
   ===================================================== */
@media (max-width: 767px) {
  .fg-header.brxe-section,
  section.fg-header,
  .fg-header,
  #brxe-0240d5 {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    overflow: hidden !important;
  }

  .fg-header-inner,
  .fg-header > .brxe-container,
  #brxe-441303 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding-left: 16px !important;
    padding-right: 12px !important;
    column-gap: 12px !important;
  }

  /* Ocultar CTA y redes/buscar — dejar logo + campesino */
  .fg-header-inner > #brxe-4fb403,
  .fg-header-inner > #brxe-2ad8fe {
    display: none !important;
  }

  .fg-header-logo,
  .fg-header .fg-header-logo,
  .fg-header #brxe-111aed,
  .fg-header #brxe-6b68f5 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    z-index: 2 !important;
    flex: 0 1 auto !important;
  }

  .fg-header-logo img,
  img.fg-header-logo,
  .fg-header #brxe-6b68f5 img {
    display: block !important;
    max-height: 64px !important; /* ~56px + 15% */
    width: auto !important;
    height: auto !important;
    min-height: 40px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Respaldo si Bricks deja SVG vacío: el <a> muestra el PNG */
  .fg-header .fg-header-logo,
  .fg-header #brxe-6b68f5.fg-header-logo {
    min-width: 100px !important;
    min-height: 64px !important;
    background-image: url("https://fensuagrocut.org/wp-content/uploads/2026/07/fenuagro-50-anos.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
  }

  .fg-header .fg-header-logo img[src^="data:image/svg"],
  .fg-header #brxe-6b68f5 img[src^="data:image/svg"] {
    opacity: 0 !important;
  }

  .fg-header-inner > #brxe-1dc797,
  .fg-header #brxe-1dc797 {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 36px !important;
    max-width: 28vw !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  .fg-header-personaje img,
  img.fg-header-personaje,
  .fg-header #brxe-1dc797 img,
  .fg-header #senorbandera,
  #senorbandera {
    display: block !important;
    /* Bricks pone width:100% y el flex puede colapsar a 0 */
    width: auto !important;
    max-width: 52px !important;
    max-height: 76px !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* =====================================================
   NUESTRAS LUCHAS — nube de categorías
   En Bricks:
   - Section              → fg-luchas
   - Título               → fg-luchas-title
   - Container            → fg-luchas-cloud
   - Div del Query Loop   → (sin clase especial)
   - Link dentro          → fg-luchas-tag
   ===================================================== */

:root {
  --fg-luchas-bg: #eae0c8;
  --fg-c1: #1d5c2e;
  --fg-c2: #c9a227; /* amarillo oscurecido para leer sobre crema */
  --fg-c3: #b84a6b;
  --fg-c4: #718c4d;
  --fg-c5: #c96a2b;
  --fg-c6: #ed1c24;
  --fg-c7: #4d5358;
  --fg-c8: #8a9a20;
  --fg-c9: #754c28;
  --fg-c10: #7b2521;
  --fg-c11: #38646d;
  --fg-c12: #e8a811;
  --fg-c13: #b69269;
  --fg-c14: #5c3a82;
  --fg-c15: #3d7a9e;
  --fg-c16: #086f34;
}

.fg-luchas {
  background: var(--fg-luchas-bg);
  padding: 72px 24px 96px;
}

.fg-luchas-title {
  text-align: center;
  color: var(--fg-c1);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 auto 40px;
  position: relative;
  z-index: 2;
}

/* Escenario de la nube (posiciones las calcula JS) */
.fg-luchas-cloud {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  min-height: 380px;
  height: 380px;
  margin: 0 auto;
  padding: 0;
}

/* Cada repetición del Query Loop = un “globo” posicionado */
.fg-luchas-cloud > * {
  position: absolute !important;
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  left: 0;
  top: 0;
  transform: translate3d(var(--fg-parallax-x, 0), var(--fg-parallax-y, 0), 0);
  transition: transform 0.25s ease;
  will-change: transform;
}

.fg-luchas-tag,
.fg-luchas-cloud > * .fg-luchas-tag,
.fg-luchas-cloud > * a {
  display: inline-block;
  font-weight: 800;
  line-height: 1.05;
  text-decoration: none !important;
  white-space: nowrap;
  color: inherit;
  transition: transform 0.25s ease, filter 0.25s ease;
  cursor: pointer;
}

.fg-luchas-tag:hover,
.fg-luchas-tag:focus-visible,
.fg-luchas-cloud > * a:hover,
.fg-luchas-cloud > * a:focus-visible {
  transform: scale(1.12);
  filter: brightness(0.92);
  z-index: 3;
}

/* Tamaños + colores de marca (cíclicos) — sin posiciones fijas */
.fg-luchas-cloud > *:nth-child(16n + 1)  { font-size: clamp(1.9rem, 3vw, 3rem);     color: var(--fg-c10); }
.fg-luchas-cloud > *:nth-child(16n + 2)  { font-size: clamp(1.55rem, 2.3vw, 2.15rem); color: var(--fg-c4); }
.fg-luchas-cloud > *:nth-child(16n + 3)  { font-size: clamp(1.75rem, 2.7vw, 2.6rem);  color: var(--fg-c5); }
.fg-luchas-cloud > *:nth-child(16n + 4)  { font-size: clamp(1.5rem, 2.2vw, 2.05rem);  color: var(--fg-c11); }
.fg-luchas-cloud > *:nth-child(16n + 5)  { font-size: clamp(2rem, 3.2vw, 3.15rem);    color: var(--fg-c1); }
.fg-luchas-cloud > *:nth-child(16n + 6)  { font-size: clamp(1.6rem, 2.4vw, 2.25rem);  color: var(--fg-c6); }
.fg-luchas-cloud > *:nth-child(16n + 7)  { font-size: clamp(1.5rem, 2.25vw, 2.1rem);  color: var(--fg-c14); }
.fg-luchas-cloud > *:nth-child(16n + 8)  { font-size: clamp(2.05rem, 3.3vw, 3.25rem); color: var(--fg-c12); }
.fg-luchas-cloud > *:nth-child(16n + 9)  { font-size: clamp(1.7rem, 2.55vw, 2.4rem);  color: var(--fg-c3); }
.fg-luchas-cloud > *:nth-child(16n + 10) { font-size: clamp(1.5rem, 2.2vw, 2rem);     color: var(--fg-c8); }
.fg-luchas-cloud > *:nth-child(16n + 11) { font-size: clamp(1.8rem, 2.8vw, 2.7rem);   color: var(--fg-c7); }
.fg-luchas-cloud > *:nth-child(16n + 12) { font-size: clamp(1.55rem, 2.35vw, 2.2rem); color: var(--fg-c9); }
.fg-luchas-cloud > *:nth-child(16n + 13) { font-size: clamp(1.95rem, 3.1vw, 3.05rem); color: var(--fg-c16); }
.fg-luchas-cloud > *:nth-child(16n + 14) { font-size: clamp(1.5rem, 2.25vw, 2.1rem);  color: var(--fg-c15); }
.fg-luchas-cloud > *:nth-child(16n + 15) { font-size: clamp(1.7rem, 2.6vw, 2.45rem);  color: var(--fg-c2); }
.fg-luchas-cloud > *:nth-child(16n + 16) { font-size: clamp(1.55rem, 2.35vw, 2.15rem); color: var(--fg-c13); }

/* Hereda color/tamaño del wrapper al link */
.fg-luchas-cloud > * .fg-luchas-tag,
.fg-luchas-cloud > * a {
  font-size: inherit;
  color: inherit;
}

@media (max-width: 767px) {
  .fg-luchas {
    padding: 48px 20px 64px !important;
    overflow-x: clip !important;
  }

  /* Título centrado (Bricks a veces lo empuja a la derecha) */
  .fg-luchas-title,
  h3.fg-luchas-title,
  .fg-luchas .fg-luchas-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 28px !important;
    padding: 0 4px !important;
    text-align: center !important;
    align-self: stretch !important;
    justify-self: center !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none !important;
    font-size: clamp(1.5rem, 7vw, 1.9rem) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  /* En móvil: nube → chips que envuelven (legible), no posiciones absolutas */
  .fg-luchas-cloud {
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    gap: 16px 18px !important;
    padding: 8px 0 20px !important;
    box-sizing: border-box !important;
  }

  .fg-luchas-cloud > * {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    visibility: visible !important;
    will-change: auto !important;
    /* tamaños más uniformes y legibles */
    font-size: 1.3rem !important;
  }

  .fg-luchas-cloud > *:nth-child(odd) {
    font-size: 1.25rem !important;
  }

  .fg-luchas-cloud > *:nth-child(3n) {
    font-size: 1.4rem !important;
  }

  .fg-luchas-cloud > *:nth-child(5n) {
    font-size: 1.5rem !important;
  }

  .fg-luchas-cloud > * a,
  .fg-luchas-tag {
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }
}

/* =====================================================
   NOTICIAS — grilla 2×3 + Ver todas
   En Bricks:
   - Section                 → fg-noticias
   - Heading "NOTICIAS"      → fg-noticias-title
   - Container               → fg-noticias-grid
       (además en Bricks: Display=Grid, 3 columnas)
   - Cada card (Div)         → fg-noticias-card  (Query Loop)
       · Image
       · Título              → fg-noticias-card-title
       · Excerpt             → fg-noticias-card-excerpt  ← importante
   - Botón                   → fg-noticias-more
   ===================================================== */

.fg-noticias {
  background: #ffffff;
  padding: 72px 24px 80px;
  font-family: "Poppins", sans-serif;
}

.fg-noticias-title {
  text-align: center;
  color: var(--fg-green, #086f34);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 auto 36px;
}

.fg-noticias-grid {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 36px 24px !important;
}

/* Cada ítem del Query Loop */
.fg-noticias-grid > .fg-noticias-card,
.fg-noticias-grid > *,
.fg-noticias-card {
  --fg-card-media: 100%;
  --fg-card-media-max: 100%;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

.fg-noticias-card a,
.fg-noticias-grid a {
  text-decoration: none !important;
}

/* Link-imagen de Bricks: ocupar todo el ancho de la card */
.fg-noticias-card > a.brxe-image,
.fg-noticias-card a.brxe-image.tag,
.fg-noticias-grid a.brxe-image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 14px !important;
  line-height: 0 !important;
}

/* Imagen unificada (mismo recorte en todas) */
.fg-noticias-card img,
.fg-noticias-grid img,
.fg-noticias-card a.brxe-image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
}

/* Título */
.fg-noticias .fg-noticias-card-title,
.fg-noticias .fg-noticias-card-title a,
.fg-noticias .fg-noticias-card-title *,
.fg-noticias-card-title,
.fg-noticias-card-title a,
.fg-noticias-card h3,
.fg-noticias-card h3 a,
.fg-noticias-card .brxe-heading.fg-noticias-card-title,
.fg-noticias-grid .fg-noticias-card-title {
  width: var(--fg-card-media) !important;
  max-width: var(--fg-card-media-max) !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(1.35rem, 1.89vw, 1.71rem) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  color: #1a1a1a !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Excerpt / abstract */
.fg-noticias .fg-noticias-card-excerpt,
.fg-noticias .fg-noticias-card-excerpt *,
.fg-noticias-card-excerpt,
.fg-noticias-card-excerpt *,
.fg-noticias-grid .fg-noticias-card-excerpt,
.fg-noticias-grid .fg-noticias-card-excerpt * {
  width: var(--fg-card-media) !important;
  max-width: var(--fg-card-media-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(1.2rem, 1.55vw, 1.4rem) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #444444 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  box-sizing: border-box !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

.fg-noticias-more-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-top: 40px !important;
}

.fg-noticias-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 28px !important;
  background: var(--fg-green, #086f34) !important;
  color: #fff !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-radius: 2px !important;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.fg-noticias-more:hover,
.fg-noticias-more:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (max-width: 991px) {
  .fg-noticias,
  .fg-noticias-title:has(.fg-noticias-grid) {
    padding: 56px 20px 64px !important;
  }

  .fg-noticias-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 18px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .fg-noticias-grid > .fg-noticias-card,
  .fg-noticias-grid > *,
  .fg-noticias-card {
    --fg-card-media: 100%;
    --fg-card-media-max: 100%;
  }

  .fg-noticias-card > a.brxe-image,
  .fg-noticias-grid a.brxe-image {
    width: 100% !important;
  }

  .fg-noticias-card img,
  .fg-noticias-grid img,
  .fg-noticias-card a.brxe-image img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  .fg-noticias .fg-noticias-card-title,
  .fg-noticias .fg-noticias-card-title a,
  .fg-noticias .fg-noticias-card-title *,
  .fg-noticias-card-title,
  .fg-noticias-card-title a,
  .fg-noticias-card h3,
  .fg-noticias-card h3 a,
  .fg-noticias-grid .fg-noticias-card-title,
  .fg-noticias-grid .fg-noticias-card-title a {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }

  .fg-noticias .fg-noticias-card-excerpt,
  .fg-noticias .fg-noticias-card-excerpt *,
  .fg-noticias-card-excerpt,
  .fg-noticias-card-excerpt *,
  .fg-noticias-grid .fg-noticias-card-excerpt,
  .fg-noticias-grid .fg-noticias-card-excerpt * {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 767px) {
  .fg-noticias,
  .fg-noticias-title:has(.fg-noticias-grid) {
    padding: 44px 20px 52px !important;
  }

  .fg-noticias-title {
    font-size: clamp(1.5rem, 6vw, 1.85rem) !important;
    margin-bottom: 28px !important;
  }

  .fg-noticias-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .fg-noticias-grid > .fg-noticias-card,
  .fg-noticias-grid > *,
  .fg-noticias-card {
    --fg-card-media: 100%;
    --fg-card-media-max: 100%;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .fg-noticias-card > a.brxe-image,
  .fg-noticias-grid a.brxe-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fg-noticias-card img,
  .fg-noticias-grid img,
  .fg-noticias-card a.brxe-image img {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .fg-noticias .fg-noticias-card-title,
  .fg-noticias .fg-noticias-card-title a,
  .fg-noticias .fg-noticias-card-title *,
  .fg-noticias-card-title,
  .fg-noticias-card-title a,
  .fg-noticias-card h3,
  .fg-noticias-card h3 a,
  .fg-noticias-grid .fg-noticias-card-title,
  .fg-noticias-grid .fg-noticias-card-title a {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .fg-noticias .fg-noticias-card-excerpt,
  .fg-noticias .fg-noticias-card-excerpt *,
  .fg-noticias-card-excerpt,
  .fg-noticias-card-excerpt *,
  .fg-noticias-grid .fg-noticias-card-excerpt,
  .fg-noticias-grid .fg-noticias-card-excerpt * {
    font-size: 1.25rem !important;
    line-height: 1.55 !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-line-clamp: 4 !important;
  }
}


/* =====================================================
   PARALLAX DE FONDO
   En Bricks:
   - Section → clase fg-parallax
   - Background → tu imagen .webp (cover / center)
   - Opcional atributo: data-parallax-speed = 0.35
   ===================================================== */

.fg-parallax {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

/* Fallback CSS (desktop) por si el JS aún no carga */
.fg-parallax:not(.fg-parallax--ready) {
  background-attachment: fixed !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.fg-parallax-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -25%;
  bottom: -25%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transform: translate3d(0, 0, 0);
}

/* Overlay de Bricks (::before) encima de la imagen, debajo del contenido */
.fg-parallax.fg-parallax--ready::before,
.fg-parallax.fg-parallax--ready::after {
  z-index: 1 !important;
}

/* Copia del overlay si el JS la genera */
.fg-parallax-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Contenido de la sección por encima de imagen + overlay */
.fg-parallax > :not(.fg-parallax-layer):not(.fg-parallax-overlay) {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  /* iOS rompe background-attachment:fixed */
  .fg-parallax:not(.fg-parallax--ready) {
    background-attachment: scroll !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fg-parallax:not(.fg-parallax--ready) {
    background-attachment: scroll !important;
  }

  .fg-parallax-layer {
    top: 0;
    bottom: 0;
    transform: none !important;
  }
}

/* =====================================================
   SIDE ART — dibujos laterales aleatorios
   En Bricks:
   - Section → clase fg-side-art
   - Archivos → assets/images/side-art/*.{webp,png,svg,jpg}
   - Opcional: data-side-art-count="4"
               data-side-art-opacity="0.2"
   ===================================================== */

.fg-side-art {
  position: relative !important;
}

/* Si no es parallax, deja que se salgan del borde de la sección */
.fg-side-art:not(.fg-parallax) {
  overflow: visible !important;
}

.fg-side-art__item {
  position: absolute;
  top: var(--fg-side-top, 40%);
  z-index: 0;
  width: clamp(140px, 22vw, 320px);
  height: auto;
  max-width: none;
  opacity: var(--fg-side-opacity, 0.2);
  pointer-events: none;
  user-select: none;
  transform: var(--fg-side-transform, translate(0, -50%));
  object-fit: contain;
}

.fg-side-art__item--left {
  left: 0;
}

.fg-side-art__item--right {
  right: 0;
}

/* Contenido por encima de los dibujos */
.fg-side-art > :not(.fg-side-art__item):not(.fg-parallax-layer):not(.fg-parallax-overlay) {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .fg-side-art__item {
    width: clamp(100px, 38vw, 180px);
    opacity: calc(var(--fg-side-opacity, 0.2) * 0.85);
  }
}

/* =====================================================
   BANNERS (IALA, Manos Soberanas, etc.)
   En Bricks — uno encima del otro (como antes):
   - Section                 → fg-banner  (+ fg-parallax si aplica)
   - Container (fila)        → fg-banner-inner
   - Div del logo            → fg-banner-logo
   - Div del texto           → fg-banner-copy

   En Bricks — los dos al lado (más corto en scroll):
   - Section padre           → fg-banners-row   (SIN fg-banner)
   - Cada hijo (Section o Container) → fg-banner (+ fg-parallax)
   - Dentro de cada uno      → fg-banner-inner / logo / copy (igual)
   - En cada hijo, en Bricks: quita Align self / Height si los tienes
     (Bricks deja align-self:center y rompe la altura igual).

   En Bricks deja Width del Image en vacío / auto:
   el tamaño lo controla esta CSS.
   ===================================================== */

/* Fila: dos banners lado a lado = ancho de Noticias (1280) */
.fg-banners-row.brxe-section,
section.fg-banners-row,
.fg-banners-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  column-gap: 28px !important;
  row-gap: 28px !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 40px 16px !important;
  box-sizing: border-box !important;
  background-image: none !important;
  background-color: transparent !important;
}

/*
  Hijos: sections anidadas (como en el HTML actual).
  Incluye #brxe-… para ganar a align-self:center !important de Bricks.
*/
.fg-banners-row > .fg-banner,
.fg-banners-row > .brxe-section.fg-banner,
.fg-banners-row > .brxe-container,
.fg-banners-row > .brxe-block,
.fg-banners-row > .brxe-div,
.fg-banners-row > #brxe-dzpxuz,
.fg-banners-row > #brxe-pdlvju {
  flex: 1 1 0 !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  align-self: stretch !important;
  align-items: stretch !important;
  justify-content: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  height: auto !important;
  min-height: 100% !important;
}

.fg-banners-row .fg-banner-inner,
.fg-banners-row > .fg-banner > .brxe-container,
.fg-banners-row > #brxe-dzpxuz > .brxe-container,
.fg-banners-row > #brxe-pdlvju > .brxe-container,
.fg-banners-row #brxe-xisttl,
.fg-banners-row #brxe-berevg {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  min-height: 100% !important;
  height: auto !important;
  padding: 36px 22px !important;
  gap: 18px !important;
  box-sizing: border-box !important;
}

.fg-banners-row .fg-banner-logo,
.fg-banners-row .fg-banner-logo.brxe-div,
.fg-banners-row #brxe-aixddb.fg-banner-logo,
.fg-banners-row #brxe-hehscq.fg-banner-logo {
  flex-basis: clamp(120px, 12vw, 200px) !important;
  width: clamp(120px, 12vw, 200px) !important;
  min-width: 0 !important;
  max-width: 200px !important;
}

.fg-banners-row .fg-banner-copy {
  max-width: none !important;
}

.fg-banners-row .fg-banner-copy .brxe-heading,
.fg-banners-row .fg-banner-copy h2,
.fg-banners-row .fg-banner-copy h3 {
  font-size: clamp(22px, 2.1vw, 30px) !important;
  line-height: 1.15 !important;
}

@media (max-width: 991px) {
  .fg-banners-row.brxe-section,
  section.fg-banners-row,
  .fg-banners-row {
    flex-direction: column !important;
    max-width: 1280px !important;
    padding: 28px 16px !important;
  }

  .fg-banners-row > .fg-banner,
  .fg-banners-row > #brxe-dzpxuz,
  .fg-banners-row > #brxe-pdlvju {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .fg-banners-row .fg-banner-logo,
  .fg-banners-row .fg-banner-logo.brxe-div,
  .fg-banners-row #brxe-aixddb.fg-banner-logo,
  .fg-banners-row #brxe-hehscq.fg-banner-logo {
    flex-basis: clamp(150px, 40vw, 220px) !important;
    width: clamp(150px, 40vw, 220px) !important;
    max-width: 220px !important;
  }
}

.fg-banner-inner,
.fg-banner > .brxe-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(28px, 4vw, 56px) !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 56px 32px !important;
  box-sizing: border-box !important;
}

.fg-banner-logo,
.fg-banner-logo.brxe-div,
div.brxe-div.fg-banner-logo {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: clamp(210px, 28.5vw, 360px) !important;
  width: clamp(210px, 28.5vw, 360px) !important;
  min-width: clamp(210px, 28.5vw, 360px) !important;
  max-width: 360px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Gana a width: 70%/90% que Bricks deja en el Div del logo */
#brxe-aixddb.fg-banner-logo,
#brxe-hehscq.fg-banner-logo {
  width: clamp(210px, 28.5vw, 360px) !important;
  max-width: 360px !important;
  flex-basis: clamp(210px, 28.5vw, 360px) !important;
}

.fg-banner-logo img,
.fg-banner-logo .brxe-image,
.fg-banner-logo img.brxe-image,
img.fg-banner-logo {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

.fg-banner-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 640px !important;
  /* block (no flex): si es flex, el Basic Text se “blockifica”
     y el highlight se vuelve un rectángulo completo */
  display: block !important;
  text-align: left !important;
}

.fg-banner-copy .brxe-heading,
.fg-banner-copy h2,
.fg-banner-copy h3 {
  display: block !important;
  margin: 0 0 12px !important;
  max-width: 100% !important;
}

.fg-banner-copy .brxe-text-basic:not(.fg-text-select),
.fg-banner-copy .brxe-text:not(.fg-text-select) {
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  .fg-banner-inner,
  .fg-banner > .brxe-container {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
    padding: 40px 20px !important;
  }

  .fg-banner-logo,
  .fg-banner-logo.brxe-div,
  #brxe-aixddb.fg-banner-logo,
  #brxe-hehscq.fg-banner-logo {
    width: clamp(150px, 43.5vw, 225px) !important;
    min-width: 0 !important;
    max-width: 225px !important;
    flex-basis: clamp(150px, 43.5vw, 225px) !important;
  }

  .fg-banner-copy {
    text-align: center !important;
    max-width: 520px !important;
  }

  /* Botón / social: fit-content no respeta text-align → márgenes auto */
  .fg-banner-copy .brxe-button,
  .fg-banner-copy [class*="brxe-button"],
  .fg-banner-copy .bricks-button,
  .fg-banner-copy > *:not(.brxe-heading):not(h2):not(h3):not(.brxe-text-basic):not(.brxe-text):not(.fg-text-select),
  .fg-banner-copy .fg-banner-social,
  .fg-banner-social {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =====================================================
   TEXTO TIPO “SELECCIÓN” (highlight por línea)
   La columna .fg-banner-copy debe ser display:block (no flex).

   En Bricks (Basic Text de la descripción):
   - Clase: fg-text-select
   - Atributo: data-select-bg → #75451f  (o el color que quieras)
   ===================================================== */

.fg-text-select {
  display: inline !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.12em 0.32em !important;
  background-color: var(--fg-select-bg, #2563eb) !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.7 !important;
}

/*
  Botón / ícono / imagen debajo del highlight.
  Bricks los pone inline(-flex) y se montan al lado del texto.
  Excluimos heading y el Basic Text del highlight.
*/
.fg-banner-copy > *:not(.brxe-heading):not(h2):not(h3):not(.brxe-text-basic):not(.brxe-text):not(.fg-text-select) {
  display: flex !important;
  width: fit-content !important;
  margin-top: 18px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  z-index: 2 !important;
}

.fg-banner-copy .brxe-button,
.fg-banner-copy [class*="brxe-button"],
.fg-banner-copy .bricks-button {
  display: flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 18px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =====================================================
   Ícono social bajo el texto del banner (Instagram, etc.)
   En Bricks → Image o Icon → clase: fg-banner-social
   ===================================================== */

.fg-banner-social,
.fg-banner-copy .fg-banner-social,
a.fg-banner-social,
.fg-banner-copy > a.fg-banner-social {
  display: flex !important;
  width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  margin-top: 18px !important;
  align-items: center !important;
  justify-content: center !important;
}

.fg-banner-social img,
.fg-banner-social .brxe-image,
.fg-banner-copy .fg-banner-social img,
.fg-banner-copy img.fg-banner-social,
img.fg-banner-social {
  display: block !important;
  width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.fg-banner-social svg,
.fg-banner-copy .fg-banner-social svg {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
}


/*
  Fallback Manos Soberanas:
  En la web el nodo #brxe-vtiuoo se publica SIN la clase fg-text-select
  (Bricks no está persistiendo ese campo en ese elemento).
  Cuando en el inspector ya veas la clase, este bloque se puede quitar.
*/
#brxe-vtiuoo {
  display: inline !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.12em 0.32em !important;
  background-color: #75451f !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.7 !important;
}

/* =====================================================
   RIDE — bici (u otros) cruzan L→R
   En Bricks (estructura correcta):

   Section  → fg-bici   (fondo + overlay)
     ├─ Container → fg-flight-area fg-ride-area
     │    ├─ Button → fg-ride-cta     ← MISMO container que la bici
     │    └─ Image  → fg-sprite fg-ride  (Ciclista)
     └─ Image mariposa → fg-sprite fg-fly  (opcional, hermana)

   NO pongas el botón en un Container aparte: ese container
   solo mide lo alto del botón y “centrar” no se nota.
   ===================================================== */

.fg-flight-area {
  position: relative !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.fg-sprite.fg-fly {
  max-width: min(260px, 28vw) !important;
  height: auto !important;
  pointer-events: none !important;
}

/* Alto del banner: compacto (sin el clamp alto que sumaba ~80px) */
.fg-bici.brxe-section,
section.fg-bici,
.fg-bici {
  position: relative !important;
  min-height: 260px !important;
  overflow: hidden !important;
}

.fg-bici > .fg-ride-area,
.fg-ride-area {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 260px !important;
  height: auto !important;
  inset: auto !important;
  display: block !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/*
  Botón al centro, DETRÁS de la ciclista.
  La bici sigue absolute vía ride.js (z-index 2).
*/
.fg-ride-area > .fg-ride-cta,
.fg-ride-area > .brxe-button.fg-ride-cta,
.fg-ride-area > a.fg-ride-cta,
.fg-ride-cta.brxe-button,
a.fg-ride-cta {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 1 !important;
}

.fg-ride-area .fg-ride,
img.fg-ride {
  max-width: min(420px, 55vw) !important;
  width: min(420px, 55vw) !important;
  height: auto !important;
  pointer-events: none;
  z-index: 2 !important;
}

/* Pájaro (u otros rtl): más pequeño que la bici */
.fg-ride-area .fg-ride.fg-ride-rtl,
img.fg-ride.fg-ride-rtl {
  max-width: min(160px, 22vw) !important;
  width: min(160px, 22vw) !important;
}

/* =====================================================
   50 AÑOS — mosaico + logo
   En Bricks:
   - Section → fg-50 fg-parallax   (Background = mosaico)
   - Logo    → fg-50-logo
   Mosaico: 2160×1080 (2:1)

   Con fg-parallax el mosaico vive en .fg-parallax-layer
   sobre fondo blanco: bajar opacity aclara la imagen.
   ===================================================== */

.fg-50 {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  width: 100% !important;
  max-width: 100% !important;
  /* 2:1 hasta un tope: en 4K 50vw era ~1920px de alto (demasiado) */
  aspect-ratio: auto !important;
  height: min(50vw, 820px) !important;
  min-height: min(50vw, 820px) !important;
  max-height: 820px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 72px 24px !important;
  box-sizing: border-box !important;
  /* Blanco detrás: al bajar opacity el mosaico se aclara, no se ennegrece */
  background-color: #fff !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 112% 112% !important;
  transition: background-size 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fg-50.fg-50--inview {
  background-size: 100% 100% !important;
}

.fg-50.fg-50--reset,
.fg-50.fg-50--reset .fg-50-logo,
.fg-50.fg-50--reset img.fg-50-logo {
  transition: none !important;
}

/* Sin velo negro: oscurecía el mosaico al contrario de lo buscado */
.fg-50::before {
  content: none;
}

/* Capa parallax: mosaico al 82% sobre fondo blanco */
.fg-50 .fg-parallax-layer {
  opacity: 0.82 !important;
  background-size: cover !important;
  background-position: center center !important;
  top: -8% !important;
  bottom: -8% !important;
  z-index: 0 !important;
}

/* En 4K suaviza un poco el upscale residual */
@media (min-width: 2560px) {
  .fg-50 .fg-parallax-layer {
    filter: blur(0.45px);
    transform: translate3d(0, 0, 0) scale(1.01);
  }
}

.fg-50.fg-parallax {
  background-image: none !important;
  background-color: #fff !important;
  transition: none !important;
}

.fg-50.fg-parallax:not(.fg-parallax--ready) {
  background-color: #fff !important;
}

.fg-50-logo,
.fg-50 .fg-50-logo,
img.fg-50-logo {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: min(520px, 78vw) !important;
  max-width: 520px !important;
  height: auto !important;
  margin: 0 auto !important;
  filter:
    drop-shadow(0 4px 6px rgba(0, 0, 0, 1))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 1));
  opacity: 0;
  transform: scale(1.12);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.fg-50--inview .fg-50-logo,
.fg-50--inview img.fg-50-logo {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 1920px) {
  .fg-50,
  .fg-50.fg-parallax,
  .fg-50.brxe-section {
    aspect-ratio: auto !important;
    height: min(50vw, 820px) !important;
    min-height: min(50vw, 820px) !important;
    max-height: 820px !important;
  }
}

@media (max-width: 767px) {
  .fg-50 {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: min(70vh, 520px) !important;
    padding: 48px 16px !important;
    background-size: cover !important;
  }

  .fg-50.fg-50--inview {
    background-size: cover !important;
  }

  .fg-50-logo,
  .fg-50 .fg-50-logo,
  img.fg-50-logo {
    width: min(360px, 86vw) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fg-50 {
    background-size: 100% 100% !important;
    transition: none !important;
  }

  .fg-50 .fg-parallax-layer {
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    opacity: 0.82 !important;
  }

  .fg-50-logo,
  .fg-50 .fg-50-logo,
  img.fg-50-logo {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* =====================================================
   ACCESOS — Galería / Podcast / Boletines / Biblioteca
   En Bricks:
   - Section     → fg-accesos
   - Container   → fg-accesos-grid
   - Cada Div    → fg-accesos-item   (NO repitas fg-accesos aquí)
     ├─ Image
     └─ Heading / Text  → estilo del texto en Bricks (fuente, color, size)

   Opcional: convierte el Div en Link, o envuelve Image+título en un Link.
   ===================================================== */

.fg-accesos {
  position: relative !important;
  isolation: isolate;
  padding: 48px 24px 56px;
  box-sizing: border-box;
  /* Fondo claro; las barras las pinta el JS (no uses imagen de fondo) */
  background-color: #ffffff !important;
  overflow: hidden !important;
}

.fg-waveform {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.fg-waveform__canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.fg-accesos > :not(.fg-waveform) {
  position: relative !important;
  z-index: 1 !important;
}

.fg-accesos-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px 20px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-items: start !important;
  justify-items: center !important;
}

/* Cada bloque: foto + título centrados */
.fg-accesos-grid > .fg-accesos-item,
.fg-accesos-grid > .brxe-div,
.fg-accesos-grid > a.fg-accesos-item,
.fg-accesos-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 260px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  text-decoration: none !important;
  line-height: normal !important;
  min-width: 0 !important;
  gap: 10px !important;
}

/* Fotos más pequeñas; contain para no recortar ilustraciones */
.fg-accesos-item img,
.fg-accesos-item .brxe-image,
.fg-accesos-grid img,
.fg-accesos-grid .brxe-image {
  display: block !important;
  width: min(240px, 92%) !important;
  max-width: 240px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

.fg-accesos-item:hover img,
.fg-accesos-item:focus-visible img,
.fg-accesos-grid > .brxe-div:hover img,
.fg-accesos-grid > a:hover img {
  transform: scale(1.05);
  filter: brightness(1.04);
}

/* Solo layout del título — tipografía la controlas en Bricks */
.fg-accesos-item .brxe-heading,
.fg-accesos-item h2,
.fg-accesos-item h3,
.fg-accesos-item h4,
.fg-accesos-item .brxe-text-basic,
.fg-accesos-grid .brxe-heading,
.fg-accesos-grid h3 {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

.fg-accesos-item:focus-visible {
  outline: 2px solid var(--fg-green, #086f34);
  outline-offset: 3px;
}

@media (max-width: 991px) {
  .fg-accesos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 16px !important;
    max-width: 560px !important;
  }
}

@media (max-width: 520px) {
  .fg-accesos {
    padding: 36px 16px 44px;
  }

  .fg-accesos-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 12px !important;
  }

  .fg-accesos-item img,
  .fg-accesos-grid img {
    width: min(200px, 85%) !important;
    max-width: 200px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fg-accesos-item img,
  .fg-accesos-grid img {
    transition: none !important;
  }

  .fg-accesos-item:hover img,
  .fg-accesos-grid > .brxe-div:hover img {
    transform: none !important;
  }
}

/* =====================================================
   ORGANIZACIONES AMIGAS — logos (fijo; slider después)
   En Bricks:
   - Section              → fg-amigos
   - Container            → fg-amigos-grid
   - Cada logo            → Image (o Link+Image)
                          → clase: fg-amigos-logo
   Por ahora 3; si sumas más, la grilla se adapta.
   ===================================================== */

.fg-amigos {
  padding: 56px 24px 64px;
  box-sizing: border-box;
  background-color: #fff;
  overflow-x: clip;
  max-width: 100%;
}

.fg-amigos-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 40px 56px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.fg-amigos-logo,
.fg-amigos-grid > .fg-amigos-logo,
.fg-amigos-grid > a.fg-amigos-logo,
.fg-amigos-grid > .brxe-image,
.fg-amigos-grid > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  line-height: 0 !important;
  max-width: 100% !important;
}

/* ~2.3× el tamaño anterior (200×88 → ~460×200) */
.fg-amigos-logo img,
.fg-amigos-grid img,
.fg-amigos-grid .brxe-image,
img.fg-amigos-logo,
img.fg-amigos-logo.brxe-image,
a.fg-amigos-logo img {
  display: block !important;
  width: auto !important;
  max-width: min(460px, 46vw) !important;
  max-height: 200px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  opacity: 0.92;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fg-amigos-logo:hover img,
.fg-amigos-grid > a:hover img,
.fg-amigos-grid > .brxe-image:hover,
img.fg-amigos-logo:hover {
  opacity: 1;
  transform: scale(1.03);
}

@media (max-width: 767px) {
  .fg-amigos {
    padding: 40px 16px 48px;
  }

  .fg-amigos-grid {
    gap: 32px 28px !important;
  }

  .fg-amigos-logo img,
  .fg-amigos-grid img,
  img.fg-amigos-logo {
    max-width: min(280px, 70vw) !important;
    max-height: 140px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fg-amigos-logo img,
  .fg-amigos-grid img {
    transition: none !important;
  }

  .fg-amigos-logo:hover img,
  .fg-amigos-grid > a:hover img {
    transform: none !important;
  }
}

/* =====================================================
   FOOTER
   En Bricks (Templates → Footer → Entire website):

   Section → fg-footer
   Container → fg-footer-cols
     ├─ Div → fg-footer-col
     │    Heading MAPA DEL SITIO + Nav Menu
     │    Heading MULTIMEDIA + Nav Menu   ← debajo del mapa
     ├─ Div → fg-footer-col
     │    Heading NUESTRAS LUCHAS + Nav Menu (1 columna)
     └─ Div → fg-footer-col fg-footer-contact
          Div/Image → fg-footer-logo
          Div → fg-footer-social
          Div → (contacto: tel/mail; alineación en Bricks)
   ===================================================== */

.fg-footer {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background-color: var(--fg-green, #086f34) !important;
  color: #fff !important;
  padding: 56px 24px 48px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.fg-footer > .fg-footer-inner,
.fg-footer > .fg-footer-cols {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.fg-footer-inner:empty,
.fg-footer-mascot {
  display: none !important;
}

.fg-footer-cols,
.fg-footer > .fg-footer-cols {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 36px 48px !important;
  width: 100% !important;
  max-width: 1280px !important;
  align-items: start !important;
  box-sizing: border-box !important;
  padding: 0 8px !important;
}

.fg-footer-col,
.fg-footer-cols > .fg-footer-col,
.fg-footer-cols > .brxe-div,
.fg-footer-cols > .brxe-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

/* Espacio entre Mapa y Multimedia dentro de la misma col */
.fg-footer-col > .brxe-heading {
  margin-top: 18px !important;
}

.fg-footer-col > .brxe-heading:first-child {
  margin-top: 0 !important;
}

.fg-footer-col .brxe-heading,
.fg-footer-col h3,
.fg-footer-col h4,
.fg-footer .brxe-heading,
.fg-footer h3.brxe-heading {
  margin-bottom: 8px !important;
  color: #fff !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.15rem, 1.35vw, 1.4rem) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.fg-footer .bricks-nav-menu,
.fg-footer .brxe-nav-menu ul,
.fg-footer-col ul,
.fg-footer ul.bricks-nav-menu,
.fg-footer #menu-nuestras-luchas {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  grid-template-columns: none !important;
}

.fg-footer .bricks-nav-menu a,
.fg-footer .brxe-nav-menu a,
.fg-footer-col a,
.fg-footer .bricks-menu-item a,
.fg-footer li.menu-item a {
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(1.05rem, 1.15vw, 1.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.fg-footer .bricks-nav-menu a:hover,
.fg-footer .brxe-nav-menu a:hover,
.fg-footer-col a:hover,
.fg-footer li.menu-item a:hover {
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Columna contacto: logo / redes / datos (3 Divs en Bricks)
   Tipografía la fija CSS; alineación y apilado → Bricks. */
.fg-footer-contact,
.fg-footer-col.fg-footer-contact {
  gap: 22px !important;
}

.fg-footer-logo,
.fg-footer-contact .fg-footer-logo {
  display: block !important;
  line-height: 0 !important;
}

.fg-footer-logo img,
.fg-footer-logo .brxe-image,
img.fg-footer-logo,
.fg-footer-contact > img.brxe-image,
.fg-footer-contact > img.fg-footer-logo {
  display: block !important;
  width: auto !important;
  max-width: min(220px, 56vw) !important;
  max-height: 175px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.fg-footer-social,
.fg-footer-contact .fg-footer-social {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 18px !important;
}

.fg-footer-social > .brxe-block,
.fg-footer-social > .brxe-div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 18px !important;
}

.fg-footer-social a,
.fg-footer-social .bricks-link-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.fg-footer-social .brxe-icon,
.fg-footer-social i,
.fg-footer-social .ti-facebook,
.fg-footer-social .ti-instagram,
.fg-footer-social .ti-twitter,
.fg-footer-social .ti-youtube {
  color: #fff !important;
  font-size: 1.85rem !important;
  width: 1em !important;
  height: 1em !important;
  line-height: 1 !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.fg-footer-social a:hover .brxe-icon,
.fg-footer-social a:hover i {
  opacity: 0.85;
  transform: scale(1.1);
}

/* Solo tamaño de tipografía; alineación la decides en Bricks */
.fg-footer-contact .brxe-text-link,
.fg-footer-contact .brxe-text-basic,
.fg-footer-contact .brxe-text,
.fg-footer-contact p,
.fg-footer-contact a[href^="mailto:"],
.fg-footer-contact a[href^="tel:"] {
  color: #fff !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(1.2rem, 1.35vw, 1.4rem) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

.fg-footer-contact a[href^="mailto:"]:hover,
.fg-footer-contact a[href^="tel:"]:hover,
.fg-footer-contact .brxe-text-link:hover {
  text-decoration: underline !important;
}

.fg-footer .bricks-mobile-menu-toggle,
.fg-footer .bricks-mobile-menu-wrapper,
.fg-footer .bricks-mobile-menu-overlay {
  display: none !important;
}

@media (max-width: 991px) {
  .fg-footer-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 28px !important;
  }

  .fg-footer-contact {
    grid-column: 1 / -1 !important;
    align-items: center !important;
  }
}

@media (max-width: 767px) {
  .fg-footer {
    padding: 40px 20px 36px !important;
  }

  .fg-footer-cols,
  .fg-footer > .fg-footer-cols {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 !important;
    justify-items: center !important;
  }

  /* En móvil: solo logo / redes / contacto (el mapa está en el menú) */
  .fg-footer-cols > .fg-footer-col:not(.fg-footer-contact),
  .fg-footer-cols > .brxe-div:not(.fg-footer-contact),
  .fg-footer-cols > .brxe-block:not(.fg-footer-contact) {
    display: none !important;
  }

  .fg-footer-col,
  .fg-footer-cols > .fg-footer-col,
  .fg-footer-cols > .brxe-div,
  .fg-footer-cols > .brxe-block,
  .fg-footer-contact,
  .fg-footer-col.fg-footer-contact {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .fg-footer-contact {
    grid-column: 1 / -1 !important;
  }

  .fg-footer-social,
  .fg-footer-contact .fg-footer-social,
  .fg-footer-social > .brxe-block,
  .fg-footer-social > .brxe-div {
    justify-content: center !important;
  }

  .fg-footer-logo img,
  img.fg-footer-logo,
  .fg-footer-contact img {
    max-width: min(180px, 55vw) !important;
    max-height: 140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .fg-footer-contact .brxe-text-link,
  .fg-footer-contact .brxe-text-basic,
  .fg-footer-contact .brxe-text,
  .fg-footer-contact p,
  .fg-footer-contact a[href^="mailto:"],
  .fg-footer-contact a[href^="tel:"] {
    text-align: center !important;
  }
}