/* el código del sitio brndconsulting.com (Wix) para el blog: lo carga el código propio «BRND · ancho de los artículos del blog» */
/* BRND®: los artículos del blog al ancho de apple.com (medido el 22-oct-2026: 1260 px como máximo, el 87,5 % de la ventana), sin la caja
   de Wix (su línea y su fondo sumaban un segundo margen). El texto se queda en 740 px para leer; imágenes, galerías y bloques van al ancho completo */
[data-hook="post"] { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
@media (min-width: 1025px) {
  [data-hook="post-page"] { max-width: none !important; }
  [data-hook="post"] { --postPageWidth: min(1260px, 87.5vw) !important; }
  [data-hook="post-description"] [data-ricos-paragraph], [data-hook="post-description"] h2, [data-hook="post-description"] h3,
  [data-hook="post-description"] ul, [data-hook="post-description"] ol, [data-hook="post-description"] blockquote, [data-hook="post-title"] { max-width: 740px; }
}
/* en el teléfono y en pantallas angostas, el margen de apple.com: el 6,25 % de cada lado (23 px a 375). Es la variable que Wix usa para el
   título y para cada bloque del texto, así que los módulos quedan en el mismo margen, sin uno propio encima */
@media (max-width: 1024px) {
  [data-hook="post"] { --postPageHorizontalPadding: 6.25vw !important; }
}
/* en la vista móvil de Wix (la que sirve a los teléfonos) el contenedor de un HTML incrustado va a todo el ancho y sin margen: el
   probador y las cifras toman el mismo margen del texto. Los carretes de láminas siguen a todo el ancho */
body.device-mobile-responsive [data-hook="post"] [data-breakout]:has(iframe[src^="https://recursos.brndconsulting.com"]:not([src*="/modulo/laminas"])) {
  padding-inline: var(--postPageHorizontalPadding) !important; box-sizing: border-box;
}
/* el artículo de Recursos (el que lleva módulos de recursos.brndconsulting.com), con las medidas de apple.com y la letra que se regala:
   el título en BRND® ProType Bold a 80 (como el titular grande de Apple), «Grillas» a 64, y el párrafo de entrada a 21/29 en gris con las
   palabras clave en tinta */
@font-face { font-family: 'BRND ProType Web'; src: url(https://recursos.brndconsulting.com/fuentes/0.267/variable.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
[data-hook="post-page"]:has(iframe[src^="https://recursos.brndconsulting.com"]) [data-hook="post-title"],
[data-hook="post-page"]:has(iframe[src^="https://recursos.brndconsulting.com"]) [data-hook="post-title"] * {
  font-family: 'BRND ProType Web', system-ui, sans-serif !important; font-weight: 700 !important; font-variation-settings: "wght" 700, "wdth" 100 !important;
  font-size: clamp(40px, 5.6vw, 80px) !important; line-height: 1 !important; letter-spacing: -0.015em !important; }   /* el interlineado pegadito: 80 sobre 80 */
/* el título en dos renglones, «BRND® ProType» y «& Grid System»: en Bold, «BRND® ProType» mide 7,19 em y con el «&» 8,19; a 7,6 em de ancho
   el «&» baja con «Grid System», a cualquier tamaño */
[data-hook="post-page"]:has(iframe[src^="https://recursos.brndconsulting.com"]) [data-hook="post-title"] { max-width: 7.6em !important; }
[data-hook="post-page"]:has(iframe[src^="https://recursos.brndconsulting.com"]) [data-hook="post-description"] h2,
[data-hook="post-page"]:has(iframe[src^="https://recursos.brndconsulting.com"]) [data-hook="post-description"] h2 * {
  font-family: 'BRND ProType Web', system-ui, sans-serif !important; font-weight: 700 !important; font-variation-settings: "wght" 700, "wdth" 100 !important;
  font-size: clamp(34px, 4.5vw, 64px) !important; line-height: 1.06 !important; letter-spacing: -0.01em !important; color: #1D1D1F !important; }
[data-hook="post-page"]:has(iframe[src^="https://recursos.brndconsulting.com"]) [data-hook="post-description"] [data-ricos-paragraph] {
  font-family: 'BRND ProType Web', system-ui, sans-serif !important; font-variation-settings: "wght" 400, "wdth" 100; font-size: 21px !important; line-height: 29px !important;
  letter-spacing: 0.011em !important; color: #6E6E73 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[data-hook="post-page"]:has(iframe[src^="https://recursos.brndconsulting.com"]) [data-hook="post-description"] [data-ricos-paragraph] span {
  font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; }
/* la portada del artículo de Recursos: la galería de láminas (el primer bloque del texto, ?pantalla=1) se dibuja arriba de todo, sobre la
   fecha y el título, solo con CSS: así está en su lugar desde el primer cuadro y nada salta al cargar. En la computadora ocupa la pantalla
   debajo del menú (medido a varios anchos, más los 20 de la página); en el teléfono, todo el ancho con su alto natural (la lámina es horizontal) */
article[data-hook="post"]:has(iframe[src^="https://recursos.brndconsulting.com/modulo/laminas?serie=protype"]) { position: relative; --menu: calc(3vw + 29px); --pagina: 20px;   /* el menú de Wix crece con la pantalla: 62 a 1100, 72 a 1440, 87 a 1920, 106 a 2560 */
 
  --portada: calc(100svh - var(--menu)); --arriba: 0px; --debajo: 55px; --ancho-ventana: calc(100vw - var(--scrollbar-width, 0px)); }
@media (max-width: 1024px) { article[data-hook="post"]:has(iframe[src^="https://recursos.brndconsulting.com/modulo/laminas?serie=protype"]) {
  --menu: 95px; --pagina: 0px; --arriba: 34px; --portada: calc((var(--ancho-ventana) * 0.9375 - 29px) * 0.5625 + 49px); --debajo: 21px; } }
/* en el teléfono y la tableta: 34 de aire bajo el menú, la lámina (el 93,75 % de la ventana menos lo que asoma la siguiente: 8 entre ellas
   y 21 a la vista), los mandos a 13 y la fecha a 21 de ellos */
/* las cajas de Wix que están en medio no se posicionan, para que la galería se ubique respecto del artículo */
article[data-hook="post"] [data-hook="post-description"] :has([data-breakout] iframe[src^="https://recursos.brndconsulting.com/modulo/laminas?serie=protype"]) { position: static !important; }
[data-hook="post-description"] [data-breakout]:has(iframe[src^="https://recursos.brndconsulting.com/modulo/laminas?serie=protype"]) {
  position: absolute !important; top: calc(var(--arriba) - var(--pagina)); left: 50%; transform: translateX(-50%); width: var(--ancho-ventana) !important; max-width: none !important;
  height: var(--portada); margin: 0 !important; padding: 0 !important; }
[data-hook="post-description"] [data-breakout]:has(iframe[src^="https://recursos.brndconsulting.com/modulo/laminas?serie=protype"]) * {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; padding: 0 !important; margin: 0 !important; }
/* el encabezado (fecha y título) baja hasta después de la portada */
article[data-hook="post"]:has(iframe[src^="https://recursos.brndconsulting.com/modulo/laminas?serie=protype"]) > div:has([data-hook="post-title"]) {
  padding-top: calc(var(--arriba) + var(--portada) - var(--pagina) + var(--debajo)) !important; }
/* la galería de grillas, igual a la de arriba: a todo el ancho de la ventana y con su mismo alto (en la computadora, la pantalla debajo del
   menú; en el teléfono, el alto natural de la lámina). El alto se fija aquí, sin esperar al módulo, para que nada salte */
[data-hook="post-description"] [data-breakout]:has(iframe[src^="https://recursos.brndconsulting.com/modulo/laminas?serie=grillas"]) {
  width: var(--ancho-ventana, 100vw) !important; max-width: none !important; height: var(--portada) !important; margin-left: calc(50% - var(--ancho-ventana, 100vw) / 2) !important; padding: 0 !important; }
[data-hook="post-description"] [data-breakout]:has(iframe[src^="https://recursos.brndconsulting.com/modulo/laminas?serie=grillas"]) * {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; padding: 0 !important; margin: 0 !important; }
/* el visor de láminas a toda la ventana donde el navegador no tiene pantalla completa (iPhone) */
iframe.brnd-visor { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; z-index: 2147483000 !important; }