/* ==========================================================================
   site.css — capa propia sobre el CSS original del tema
   --------------------------------------------------------------------------
   El diseño base lo aportan los CSS recuperados del tema y de WPBakery
   (bootstrap.css, alone.css, js_composer.min.css, theme-options.css).
   Este fichero SOLO añade lo que el WordPress original resolvía con
   JavaScript, más los componentes nuevos. Debe cargarse en último lugar.

   Referencia de medidas: docs/capture/wayback-home-1440.json (captura del
   sitio original archivado en Wayback Machine).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Evita el desplazamiento horizontal por las secciones a sangre.
   `clip` (y no `hidden`) para no romper `position: sticky`. */
#page {
  overflow-x: clip;
}

/* Foco visible y consistente (accesibilidad). */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid #ec2127;
  outline-offset: 2px;
}

.b4g-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: #1f1f1f;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.b4g-skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   2. Emulación del "full width" de WPBakery
   --------------------------------------------------------------------------
   El WordPress original marcaba las filas y secciones con
   data-vc-full-width="true" y su JavaScript las expandía a todo el ancho
   dejando el contenido alineado con la rejilla de 1170 px. Aquí lo hacemos
   solo con CSS. Sin esto, la banda de 4 colores quedaría con 135 px de
   blanco a cada lado (que es lo que se ve hoy en la copia de Wayback, porque
   allí el JavaScript ya no se ejecuta).                                        */

#main > .container > [data-vc-full-width='true'] {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(15px, calc((100vw - 1170px) / 2));
  padding-right: max(15px, calc((100vw - 1170px) / 2));
}

/* "Stretch content": la fila se estira de borde a borde sin márgenes. */
#main > .container > [data-vc-full-width='true'][data-vc-stretch-content='true'] {
  padding-left: 0;
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   3. Portada (sustituye al slider de Revolution Slider)
   --------------------------------------------------------------------------
   El slider original se montaba con JavaScript y se quedaba en
   display:none si fallaba. Aquí se reconstruye el contenido de las 3
   diapositivas con un carrusel propio de fundido cruzado.                     */

.b4g-hero {
  position: relative;
  height: 768px;
  overflow: hidden;
  background-color: #1f1f1f;
}

.b4g-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

.b4g-hero__slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

/* Fondos de sustitución cuando la imagen original no se pudo recuperar. */
.b4g-hero__slide--gradient-green {
  background-image: linear-gradient(135deg, #4e7d2b 0%, #689f39 45%, #8bc34a 100%);
}

.b4g-hero__slide--gradient-blue {
  background-image: linear-gradient(135deg, #12314f 0%, #1f4e79 55%, #007aff 100%);
}

/* Oscurecido suave para garantizar el contraste del texto sobre las fotos. */
.b4g-hero__slide[data-has-image='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.45) 100%);
}

.b4g-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}

.b4g-hero__title {
  margin: 0 0 36px;
  color: #fff;
  font-family: Ubuntu, Poppins, 'Work Sans', sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 70px;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.b4g-hero__title--quote {
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 40px;
  font-style: italic;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 2px;
  text-transform: none;
}

.b4g-hero__title--bizum {
  margin-bottom: 30px;
  color: #00d824;
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 39px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 3px;
  white-space: pre-line;
}

.b4g-hero__subtitle {
  margin: 0 0 30px;
  color: #fff;
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 29px;
}

.b4g-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.b4g-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 35px;
  border: 0;
  border-radius: 30px;
  background-color: #007aff;
  color: #fff;
  font-family: Roboto, 'Work Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 20px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.b4g-btn:hover,
.b4g-btn:focus {
  background-color: #fff;
  color: #000;
}

.b4g-btn--blue {
  background-color: #007aff;
}

.b4g-btn--green {
  background-color: #4cd964;
}

.b4g-btn--green-strong {
  background-color: #60d106;
}

.b4g-btn--outline-light {
  padding: 12px 34px;
  border: 3px solid #fff;
  border-radius: 0;
  background-color: #007aff;
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
}

.b4g-btn--outline-light:hover,
.b4g-btn--outline-light:focus {
  border-color: #333;
  background-color: #333;
  color: #fff;
}

.b4g-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 4;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b4g-hero__dot {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.b4g-hero__dot[aria-current='true'] {
  background: #fff;
}

.b4g-hero__dot:hover {
  transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   4. Testimonios (sustituye a las pestañas de WPBakery)
   -------------------------------------------------------------------------- */

.b4g-testimonials {
  /* El panel de pestañas original reservaba 466 px de alto. Como aquí no hay
     panel con altura propia, se reserva una altura mínima equivalente para que
     el ritmo vertical de la página coincida con el original. */
  min-height: 424px;
}

.b4g-testimonial {
  display: none;
}

.b4g-testimonial.is-active {
  display: block;
}

.b4g-testimonial__avatar {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto 14px;
  border: 4px solid #689f39;
  border-radius: 50%;
  object-fit: cover;
}

/* Sustituto cuando el avatar no se pudo recuperar de Wayback. */
.b4g-testimonial__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #689f39;
  color: #fff;
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 1px;
}

.b4g-testimonial__stars {
  display: block;
  width: 150px;
  height: 18px;
  margin: 0 auto 18px;
}

.b4g-testimonial__name {
  margin: 0 0 12px;
  color: #1f1f1f;
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.b4g-testimonial__quote {
  color: #444;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
}

.b4g-testimonials__dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.b4g-testimonials__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #bfbfbf;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.b4g-testimonials__dot[aria-current='true'] {
  border-color: #ec2127;
  background-color: #ec2127;
}

/* --------------------------------------------------------------------------
   5. Colaboradores (sustituye al carrusel Owl Carousel)
   -------------------------------------------------------------------------- */

.b4g-marquee {
  position: relative;
  overflow: hidden;
  /* El original medía 220 px de alto (35 de relleno + 185 de contenido) con
     los logos a ~95 px. Se reproduce ese ritmo vertical. */
  padding: 45px 0;
}

.b4g-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: b4g-marquee-scroll 34s linear infinite;
}

.b4g-marquee:hover .b4g-marquee__track,
.b4g-marquee:focus-within .b4g-marquee__track {
  animation-play-state: paused;
}

/* Se mantienen las clases originales `item` / `item-inner slider-item-style`
   porque el tema las usa en sus reglas. */
.b4g-marquee .item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 70px;
}

.b4g-marquee .item img {
  display: block;
  width: auto;
  max-width: 230px;
  max-height: 95px;
}

/* Sustituto textual para los logos no recuperados. */
.b4g-marquee__fallback {
  color: #9a9a9a;
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}

@keyframes b4g-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   6. Aviso de cookies (sustituye al plugin adapta-rgpd)
   -------------------------------------------------------------------------- */

.b4g-cookie {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: none;
  padding: 16px 0;
  background: #1f1f1f;
  color: #fff;
}

.b4g-cookie.is-visible {
  display: block;
}

.b4g-cookie__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

.b4g-cookie__text {
  flex: 1 1 460px;
  margin: 0;
  font-size: 14px;
  line-height: 21px;
}

.b4g-cookie__text a {
  color: #fff;
  text-decoration: underline;
}

.b4g-cookie__actions {
  display: flex;
  gap: 10px;
}

.b4g-cookie__btn {
  padding: 10px 22px;
  border: 0;
  border-radius: 3px;
  background: #689f39;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
}

.b4g-cookie__btn:hover {
  background: #57862f;
}

.b4g-cookie__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
}

.b4g-cookie__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   6b. Sección "HAZTE 4GOODER Y COLABORA": fondo sustituto
   --------------------------------------------------------------------------
   El original tenía un parallax de WPBakery con la imagen `pebble-beach-1.png`
   que NO se pudo recuperar de Wayback Machine. La imagen de texto que va encima
   es de color menta claro y necesita un fondo oscuro para ser legible (sobre el
   #efefef original queda prácticamente invisible, que es lo que se ve hoy en la
   copia archivada). Se usa como fondo otra fotografía recuperada del propio
   sitio, oscurecida con un degradado.                                       */

.b4g-cta-video {
  background-color: #1f1f1f !important;
  background-image: linear-gradient(rgba(16, 22, 16, 0.58), rgba(16, 22, 16, 0.58)),
    url('/assets/uploads/2020/04/TGEmpresas_01.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Parallax "estático": el original lo movía con JavaScript. */
  background-attachment: fixed;
}

@media (max-width: 1024px) {
  /* `fixed` da problemas de rendimiento en móvil. */
  .b4g-cta-video {
    background-attachment: scroll;
  }
}

/* --------------------------------------------------------------------------
   6c. Menú móvil propio
   --------------------------------------------------------------------------
   El tema original abría un panel lateral con su propio JavaScript. Aquí se
   implementa uno mínimo y accesible con las mismas clases de contenedor.     */

.b4g-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  background: transparent;
  color: #1f1f1f;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.b4g-nav-toggle__bars,
.b4g-nav-toggle__bars::before,
.b4g-nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  content: '';
}

.b4g-nav-toggle__bars {
  position: relative;
}

.b4g-nav-toggle__bars::before {
  position: absolute;
  top: -6px;
}

.b4g-nav-toggle__bars::after {
  position: absolute;
  top: 6px;
}

.b4g-mobi-panel {
  padding: 8px 0 18px;
  background: #1f1f1f;
}

.b4g-mobi-panel[hidden] {
  display: none;
}

.b4g-mobi-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.b4g-mobi-panel__list a {
  display: block;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}

.b4g-mobi-panel__list a:hover,
.b4g-mobi-panel__list a:focus {
  background: rgba(255, 255, 255, 0.08);
}

.b4g-mobi-panel__donate {
  color: #8bc34a !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   6d. Utilidades
   -------------------------------------------------------------------------- */

.b4g-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Páginas en reconstrucción
   -------------------------------------------------------------------------- */

.b4g-reconstruction {
  padding: 80px 0 100px;
}

.b4g-reconstruction__notice {
  margin: 0 0 30px;
  padding: 18px 22px;
  border-left: 5px solid #ec2127;
  background: #fafafa;
  color: #444;
  font-size: 15px;
  line-height: 23px;
}

.b4g-reconstruction__notice strong {
  color: #1f1f1f;
}

.b4g-reconstruction h1 {
  margin: 0 0 22px;
  color: #1f1f1f;
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
}

.b4g-reconstruction h2 {
  margin: 36px 0 14px;
  color: #1f1f1f;
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.b4g-reconstruction p,
.b4g-reconstruction li {
  color: #444;
  font-size: 16px;
  line-height: 26px;
}

.b4g-reconstruction a {
  color: #0056b3;
}

/* --------------------------------------------------------------------------
   7b. Página 404
   -------------------------------------------------------------------------- */

.b4g-error404__code {
  margin: 0 0 6px;
  color: #ec2127;
  font-family: Poppins, 'Work Sans', sans-serif;
  font-size: 92px;
  font-weight: 700;
  line-height: 1;
}

.b4g-error404 ul {
  margin: 0 0 26px;
  padding-left: 20px;
}

.b4g-error404 ul li {
  margin-bottom: 8px;
}

.b4g-error404 ul a {
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .b4g-hero__title {
    font-size: 49px;
    line-height: 57px;
  }

  .b4g-hero__title--quote {
    font-size: 33px;
    line-height: 36px;
  }

  .b4g-hero__subtitle {
    font-size: 21px;
    line-height: 23px;
  }
}

@media (max-width: 1024px) {
  .b4g-hero {
    height: 660px;
  }
}

@media (max-width: 778px) {
  .b4g-testimonials {
    /* En móvil el panel original era más bajo (960 px de alto de rejilla). */
    min-height: 0;
  }

  .b4g-hero {
    height: 600px;
  }

  .b4g-hero__title {
    font-size: 37px;
    line-height: 43px;
  }

  .b4g-hero__title--quote {
    font-size: 25px;
    line-height: 27px;
  }

  .b4g-hero__title--bizum {
    font-size: 32px;
    line-height: 38px;
  }

  .b4g-hero__subtitle {
    font-size: 17px;
    line-height: 19px;
  }
}

@media (max-width: 480px) {
  .b4g-hero {
    height: 560px;
  }

  .b4g-hero__title {
    font-size: 28px;
    line-height: 33px;
  }

  .b4g-hero__title--quote {
    font-size: 20px;
    line-height: 23px;
  }

  .b4g-hero__title--bizum {
    font-size: 26px;
    line-height: 31px;
  }

  .b4g-hero__subtitle {
    font-size: 15px;
    line-height: 17px;
  }

  .b4g-btn {
    font-size: 16px;
    padding: 13px 26px;
  }

  .b4g-hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .b4g-hero__ctas .b4g-btn {
    justify-content: center;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   9. Accesibilidad: respeta la preferencia de movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .b4g-hero__slide {
    transition: none;
  }

  .b4g-marquee__track {
    animation: none;
  }

  .b4g-btn,
  .b4g-hero__dot,
  .b4g-testimonials__dot {
    transition: none;
  }
}