/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* Ocultar banner WPML "development site" (clave de desarrollo; en prod no aparece) - Websalia 2026-07-14 */
.otgs-development-site-front-end { display: none !important; }

/* Filtros sin negrita (feedback Valeria 24-ago via Eric, fila 61 del Sheet: tipografia muy fina).
   Se hace por CSS y no en los settings del elemento filter: editar la postmeta de un elemento
   filter desincroniza wpei_bricks_filters_element y el filtro deja de renderizar (medido 25-ago).
   Websalia 2026-08-25 */
.brxe-filter-select,
.brxe-filter-select select,
.brxe-filter-search input,
.bricks-choices,
.choices__inner,
.choices__list--dropdown .choices__item { font-weight: 400 !important; }

/* Reports: el titulo HTML pisaba el titulo impreso de la portada (arriba en las 5 portadas).
   El texto baja al pie de la tarjeta y el velo pasa de total a gradiente inferior: se ven
   la portada Y el titulo. Feedback Valeria 24-ago via Eric. Websalia 2026-08-25 */
.report-card-listing::before,
.report-card::before {
  background-image: linear-gradient(to top, var(--secondary-ultra-dark-trans-60) 0%, rgba(0,0,0,0) 55%) !important;
}
.report-card-listing__title,
.report-card__title { margin-top: auto; }
.report-card-listing__icon-download,
.report-card__icon-download { margin-top: 0 !important; }

/* Paginacion de News: el elemento cae DENTRO de la rejilla de noticias, asi que ocupaba
   una sola columna de tres y quedaba pegado a la izquierda (medido: 450 px descentrado en
   escritorio; en movil, con una columna, ya salia bien). Ocupa el ancho completo y se
   centra. Websalia 2026-08-25 */
.blog-list__block > .brxe-pagination { grid-column: 1 / -1; width: 100%; }
.brxe-pagination .bricks-pagination ul { justify-content: center; }

/* --- Ronda 26-ago (Eric/Valeria) --- */
/* We Impact: aire entre el texto y el READ MORE de los dos case studies */
.case-study__pane .brxe-button { margin-top: var(--space-s); }

/* We Impact movil: una sola bola (la activa, sincronizada con las flechas) encima del texto,
   en vez del anillo de seis, que no cabe (decision de la call del 26-ago) */
@media (max-width: 767px) {
  #brxe-ebxwbw { display: flex !important; flex-direction: column; }
  #brxe-ebxwbw > .impact-across__block { order: -1; }
  .impact-wheel { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; display: flex !important; justify-content: center; }
  .impact-wheel__ring { position: static !important; transform: none !important; width: auto !important; height: auto !important; border: 0 !important; background: none !important; }
  .impact-wheel__ring::before, .impact-wheel__ring::after { display: none !important; }
  .impact-wheel__ring { display: none !important; }
  .impact-wheel__item { display: none !important; }
  .impact-wheel { gap: 10px; align-items: center; }
  .impact-wheel__item.is-active { display: grid !important; position: static !important; transform: none !important; width: min(150px, 40vw) !important; height: min(150px, 40vw) !important; margin: 0 !important; order: 0; }
  /* Peek movil (27-ago): la bola anterior y la siguiente asoman apagadas a los lados,
     como las no enfocadas de escritorio, y son pulsables (ya son <button> con go()).
     Las clases is-prev/is-next las mantiene js/impact-wheel-movil.js. */
  .impact-wheel__item.is-prev, .impact-wheel__item.is-next {
    display: grid !important; position: static !important; transform: none !important;
    width: min(86px, 22vw) !important; height: min(86px, 22vw) !important; margin: 0 !important;
    opacity: 0.45;
  }
  .impact-wheel__item.is-prev { order: -1; }
  .impact-wheel__item.is-next { order: 1; }
  .impact-wheel__item.is-prev .impact-wheel__label, .impact-wheel__item.is-next .impact-wheel__label { font-size: 10px; }
  .impact-across__block > .brxe-image, .impact-across__block > .brxe-code:not(:first-child) { display: none !important; }
}

/* We Are movil: el Our Value Circle SE VE en movil desde el 24-sep (tanda de Valeria). Se oculto el 27-ago
   atribuyendolo a Valeria, pero su "lo podemos quitar de mobile" (call del 26-ago) hablaba de los circulitos
   numerados de otra seccion; el de We Are era entonces un dibujo fijo. Las palabras suben de tamano en movil
   dentro del propio code element (vcirc, pagina 42). Estado previo: estado-previo/2026-09-24-tanda/. */

/* Menu movil: el panel es columna flex con flex-wrap:wrap y altura fija; si el contenido
   no cabe (movil con la barra del navegador visible), la mitad salta a una SEGUNDA columna
   que el overflow-x:hidden recorta: menu "en blanco" hasta que el scroll agranda el viewport.
   Columna unica + scroll vertical. (Ronda 27-ago) */
.brxe-offcanvas .brx-offcanvas-inner {
  flex-wrap: nowrap !important;
  overflow-y: auto !important;
}

/* Popup de estrategias (146): aire alrededor, centrado, esquinas redondeadas de verdad y
   scroll propio cuando el contenido es mas alto que la pantalla (antes tocaba el borde
   superior y quedaba a sangre en movil). (Ronda 27-ago) */
.brxe-popup-146 { padding: clamp(16px, 3vw, 40px); overflow-y: auto; overscroll-behavior: contain; }
.brxe-popup-146 .brx-popup-content { margin: auto; border-radius: var(--radius-l); max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Al abrir el popup, Bricks enfoca el CLOSE durante la animacion y ese foco scrollea la
   tarjeta ~38px (el contenido arranca cortado). El scroll-margin hace que el foco pida
   sitio de sobra por arriba y la tarjeta se quede en 0. (Ronda 27-ago tarde) */
.brx-popup .brx-popup-content .buyouts-popup__close { scroll-margin-block-start: 200px; }

/* Our Approach movil (ap-movil, ronda 27-ago tarde): el numero de cada bola caia a la
   izquierda (text-align:start heredado de un reset y sin centrado vertical propio), el
   bloque no ocupaba el ancho entero (quedaba ~19px corto a la derecha y todo se percibia
   corrido a la izquierda) y las bolas pedian algo mas de presencia. La especificidad extra
   ([role]/.ap-movil anidado) hace falta porque el <style> del componente va en el body y
   gana a este fichero en empate. */
@media (max-width: 767px) {
  .ap-movil[role="group"] { width: 100%; }
  .ap-movil .ap-movil__fila { flex-wrap: nowrap; }
  .ap-movil .ap-movil__bola {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; text-align: center;
  }
}

/* Ficha de portfolio en movil (27-ago): la seccion anadia 25.6px de padding lateral sobre
   un contenido ya inset a 26px, y las tarjetas (foto, KEY DATA) quedaban a 51px mientras
   la tarjeta del footer va a 26: escalon visible. Sin ese padding extra, todo comparte la
   linea de 26px del footer. El logo movido tras KEY DATA (portfolio-logo-movil.js) cierra
   la ficha a la derecha, lejos del titulo. Solo movil; escritorio intacto. */
@media (max-width: 767px) {
  section.single-portfolio { padding-left: 0 !important; padding-right: 0 !important; }
  .logo-portfolio-movil { display: block; margin-left: auto; margin-top: 24px; }
}

/* Legales (Legal Notice, Privacy Policy): en movil fuera la vista previa incrustada del bloque Archivo
   de WordPress y queda solo el enlace, que abre el PDF en el visor del telefono. En Safari de iPhone
   el <object> sale vacio o solo con la primera pagina (medido con WebKit emulado el 24-sep: recuadro
   en blanco de 800 px). En escritorio la vista previa se queda. */
@media (max-width: 767px) {
  .wp-block-file .wp-block-file__embed { display: none !important; }
}