/* Fancy Bricks web 3.0 — brand layer (classes fbw-, never fbk-).
   Tokens: Fancy Framework variables with the brand values (recipe web/wp/ff-recipe-brand.json).
   Only the brand's additions are declared here. Design System: claude.ai/artifact/1p7UmVgCCLTX9iJ3R66E7S */

@font-face { font-family: "Borna"; src: url("/wp-content/uploads/2024/04/borna-regular-webfont.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Borna"; src: url("/wp-content/uploads/2024/04/borna-medium-webfont.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Borna"; src: url("/wp-content/uploads/2024/04/borna-semibold-webfont.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Borna"; src: url("/wp-content/uploads/2024/04/borna-bold-webfont.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* The old site sets the root to 62.5 %; the web's recipe (root 100) and this sheet count on 16 px. */
html:has(> body.fbw) { font-size: 100%; }

body.fbw {
  /* the brand arrow (Design System icon «arrow-right»), drawn as a mask so it takes the text color */
  --fbw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  /* brand additions to the Fancy Framework vocabulary */
  --font-sans: Borna, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  /* the one exception to «Borna only» (owner, 2026-10-19): code — variables, snippets, code blocks. Never UI text */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --border-color-strong: #616161;
  --fbw-line: #d6d6d6;
  --fbw-line-soft: #e6e6e6;
  --danger: #f44336;
  --ease-brand: cubic-bezier(0.2, 0.8, 0.2, 1);
  --content-width-text: 42.5rem;
  --fbw-radius-btn: 0.75rem;
  --fbw-radius-l: 1.75rem;
  --fbw-bracket-on-dark: #424242;
  --fbw-surface: #ffffff;
  /* Shadows (owner, 2026-10-20: «unificar todos los box shadow o eliminarlos»): nothing static casts one, its border
     draws it. --fbw-shadow-m = what floats over the page (dropdowns, the phone menu, dialogs, the toast, a stuck bar);
     --fbw-shadow-s = a small control or badge over a picture, and the chosen option of the segmented control.
     The style-families demo's «Elevated» look and «Lift» hover keep theirs: they are the option shown, not the UI. */
  --fbw-shadow-s: 0 1px 2px rgba(33, 34, 36, 0.06);
  --fbw-shadow-m: 0 1px 2px rgba(33, 34, 36, 0.05), 0 12px 32px rgba(33, 34, 36, 0.08);
  --fbw-shadow-l: 0 2px 4px rgba(33, 34, 36, 0.05), 0 24px 64px rgba(33, 34, 36, 0.12);
  --fbw-t-s: 350ms; /* every color/border/shadow swap on hover (owner: 300 jumped, 450 felt slow) */
  --fbw-ease-color: cubic-bezier(0.4, 0, 0.2, 1);
  --fbw-t-m: 300ms;
  --fbw-t-l: 450ms;
  /* the H1 sizes of the web (SISTEMA-UI.md «Portadas»): top pages 72, child pages 56; account --h2, compact intros --h3 */
  --fbw-h1-top: clamp(2.75rem, 1.7rem + 3.4vw, 4.5rem);
  --fbw-h1-child: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --fbw-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);

  margin: 0;
  background: var(--white);
  color: var(--text-color);
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.fbw *, .fbw *::before, .fbw *::after { box-sizing: border-box; }
.fbw :focus-visible { outline: 2px solid var(--base-ultra-dark); outline-offset: 2px; }
/* the web's base type stays out of the component demos; the font and the ink reach them (the library's base heading
   color is the framework's, which fb-30 loads and the web doesn't) */
.fbw h1, .fbw h2, .fbw h3, .fbw h4, .fbw h5, .fbw h6 { font-family: var(--font-sans); color: var(--heading-color); }
.fbw :is(h1, h2, h3, h4, h5, h6):where(:not(.fbw-demo-palette *)) { margin: 0; text-wrap: balance; }
.fbw h1:where(:not(.fbw-demo-palette *)) { font-size: var(--h1); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.fbw h2:where(:not(.fbw-demo-palette *)) { font-size: var(--h2); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.fbw h3:where(:not(.fbw-demo-palette *)) { font-size: var(--h3); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.fbw h4:where(:not(.fbw-demo-palette *)) { font-size: var(--h4); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.fbw h5:where(:not(.fbw-demo-palette *)) { font-size: var(--h5); font-weight: 600; line-height: 1.3; }
.fbw h6:where(:not(.fbw-demo-palette *)) { font-size: var(--h6); font-weight: 600; line-height: 1.35; }
.fbw p:where(:not(.fbw-demo-palette *)) { margin: 0; }
.fbw a:where(:not(.fbw-demo-palette *)) { color: inherit; }
.fbw img:where(:not(.fbw-demo-palette *)) { max-width: 100%; height: auto; display: block; }

/* ---------- Layout ---------- */
.fbw .fbw-section { padding-block: var(--space-section); padding-inline: var(--fbw-gutter); position: relative; }
.fbw .fbw-section--soft { background: var(--base-ultra-light); }
.fbw .fbw-section--tight { padding-block: var(--space-xl); }
.fbw .fbw-section--flush-top { padding-top: 0; }
/* Component demos (owner, 2026-10-23): every rule that restyles or lays out a library piece (.fbk-…) carries
   :where(:not(.fbw-demo-palette, .fbw-demo-palette *)) on the piece it targets, so the showcases pasted on
   /components/fbk-<slug>/ look exactly as on fb-30; zero specificity, so nothing changes elsewhere. A new .fbk- rule
   takes it too (SISTEMA-UI.md «Índice y páginas de componente»). */
/* the pasted 3.0 sections (fbk-section__container, 1280) line up with the web's own containers (1240) */
.fbw .fbk-section__container:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { max-inline-size: min(100%, var(--content-width, 77.5rem)); }
.fbw .fbw-container { width: 100%; max-width: var(--content-width, 77.5rem); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-xl); align-items: stretch; }
.fbw .fbw-grid { display: grid; gap: var(--space-m); }
.fbw .fbw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fbw .fbw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fbw .fbw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fbw .fbw-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xxl); align-items: center; }
.fbw .fbw-stack { display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-start; }
.fbw .fbw-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.fbw .fbw-lead { font-size: var(--text-xl); line-height: 1.45; color: var(--text-color); max-width: var(--content-width-text); }
.fbw .fbw-small { font-size: var(--text-s); color: var(--text-color); }
.fbw .fbw-muted { color: var(--text-color); }
.fbw .fbw-nowrap { white-space: nowrap; }
.fbw blockquote, .fbw blockquote p, .fbw cite, .fbw button, .fbw input, .fbw summary { font-family: var(--font-sans); }

/* ---------- Section heading ---------- */
.fbw .fbw-heading { display: flex; flex-direction: column; gap: var(--space-s); max-width: var(--content-width-text); align-items: flex-start; }
.fbw .fbw-heading > p:not(.fbw-eyebrow) { font-size: var(--text-l); line-height: 1.55; }
.fbw .fbw-heading--row { max-width: none; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--space-l); flex-wrap: wrap; }
.fbw .fbw-heading--row > .fbw-stack { max-width: var(--content-width-text); }

/* ---------- Eyebrow + mini brick ---------- */
.fbw .fbw-eyebrow { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-s); font-weight: 500; line-height: 1.2; color: var(--text-color); }
.fbw .fbw-eyebrow::before, .fbw .fbw-mini-brick { content: ""; display: inline-block; width: 6px; height: 10px; border-radius: 2px; background: var(--primary); flex: none; }

/* ---------- Bracket (the brand motif) ---------- */
.fbw .fbw-bracket { position: relative; display: inline-block; padding: 0 .3em; margin: 0 .08em; }
.fbw .fbw-bracket::before, .fbw .fbw-bracket::after {
  content: ""; position: absolute; top: .11em; bottom: .02em; width: .2em;
  border: .055em solid var(--text-color); pointer-events: none;
}
.fbw .fbw-bracket::before { left: 0; border-right: 0; border-radius: .11em 0 0 .11em; }
.fbw .fbw-bracket::after { right: 0; border-left: 0; border-radius: 0 .11em .11em 0; }

/* ---------- Icons ---------- */
.fbw .fbw-icon { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.fbw .fbw-icon--sm { width: 18px; height: 18px; }
.fbw .fbw-icon--lg { width: 32px; height: 32px; }
.fbw .fbw-icon__accent { fill: var(--primary); stroke: none; }
.fbw .fbw-icon__knock { fill: var(--white); }
.fbw .fbw-tile { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: var(--fbw-radius-btn); background: var(--base-ultra-light); color: var(--heading-color); }
.fbw .fbw-section--soft .fbw-tile { background: var(--white); }
.fbw .fbw-section--soft .fbw-feature .fbw-tile { background: var(--base-ultra-light); }
.fbw .fbw-tile--lg { width: 56px; height: 56px; }

/* ---------- Buttons and links ----------
   .fbw-btn is the FBK Button in plain CSS for PHP-rendered pieces (account panel, support): same 48 px (M) / 35 px (S),
   1 px border, --fbw-radius-btn, the same 350 ms color swap (ink ↔ yellow). SISTEMA-UI.md «Botones». */
.fbw .fbw-btn {
  --_bg: var(--base-ultra-dark); --_fg: var(--white); --_bd: var(--base-ultra-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0.75rem 1.5rem; font: 500 var(--text-s)/1.2 var(--font-sans);
  color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--fbw-radius-btn);
  text-decoration: none; cursor: pointer; position: relative; white-space: nowrap;
  transition: background-color var(--fbw-t-s) var(--fbw-ease-color), color var(--fbw-t-s) var(--fbw-ease-color), border-color var(--fbw-t-s) var(--fbw-ease-color), scale 150ms ease;
}
.fbw .fbw-btn:hover, .fbw .fbw-btn:focus-visible { --_bg: var(--primary); --_fg: var(--base-ultra-dark); --_bd: var(--primary); }
.fbw .fbw-btn:active { scale: 0.98; }
.fbw .fbw-btn--accent { --_bg: var(--primary); --_fg: var(--base-ultra-dark); --_bd: var(--primary); }
.fbw .fbw-btn--accent:hover, .fbw .fbw-btn--accent:focus-visible { --_bg: var(--base-ultra-dark); --_fg: var(--white); --_bd: var(--base-ultra-dark); }
.fbw .fbw-btn--secondary, .fbw .fbw-btn--outline { --_bg: transparent; --_fg: var(--heading-color); --_bd: var(--border-color-strong); }
.fbw .fbw-btn--sm { min-height: 35px; padding: 0.4rem 0.9rem; }
.fbw .fbw-btn svg { width: 18px; height: 18px; flex: none; }
.fbw .fbw-btn:disabled, .fbw .fbw-btn:disabled:hover { --_bg: var(--base-ultra-light); --_fg: var(--text-color); --_bd: var(--fbw-line); cursor: not-allowed; scale: none; }
.fbw .fbw-btn[aria-busy="true"] { cursor: progress; }
.fbw .fbw-link { color: var(--heading-color); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-color-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-link:hover { text-decoration-color: var(--heading-color); }
.fbw .fbw-link--arrow { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.fbw .fbw-link--arrow::after, .fbw .fbw-card__title::after { content: ""; flex: none; width: 1.125em; height: 1.125em; background: currentColor; -webkit-mask: var(--fbw-arrow) center / contain no-repeat; mask: var(--fbw-arrow) center / contain no-repeat; transition: translate var(--fbw-t-m) var(--ease-brand); }
.fbw .fbw-link--arrow:hover::after { translate: 3px 0; }

/* ---------- Badge / chips ---------- */
.fbw .fbw-badge, .fbw .fbw-acct-badge { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; padding: 4px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 500; line-height: 1.3; background: var(--primary-ultra-light); color: var(--heading-color); }
.fbw .fbw-badge--outline { background: transparent; border: 1px solid var(--border-color-strong); color: var(--text-color); }
.fbw .fbw-acct-badge { background: var(--white); border: 1px solid var(--fbw-line); }
.fbw .fbw-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.fbw .fbw-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--fbw-line); background: var(--white); color: var(--heading-color); font-size: var(--text-s); font-weight: 500; line-height: 1.2; }
/* a chip that does something (link or button): soft hover, active = ink edge + inset line, never filled (SISTEMA-UI.md «Chips») */
.fbw :is(a, button).fbw-chip { font-family: inherit; font-size: var(--text-s); font-weight: 500; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background-color var(--fbw-t-s) var(--fbw-ease-color), border-color var(--fbw-t-s) var(--fbw-ease-color), color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw :is(a, button).fbw-chip:hover { background: var(--base-ultra-light); border-color: var(--border-color-strong); }
.fbw :is(a, button).fbw-chip:is([aria-current], [aria-pressed="true"]) { background: var(--white); border-color: var(--base-ultra-dark); box-shadow: inset 0 0 0 1px var(--base-ultra-dark); color: var(--heading-color); }
.fbw .fbw-chip small { font-size: var(--text-xs); font-weight: 400; color: var(--text-color); }
.fbw .fbw-chip .fbw-icon { inline-size: 1rem; block-size: 1rem; }


/* ---------- Search field (canonical: the library's; SISTEMA-UI.md «Buscador») ----------
   52 px, 1 px --fbw-line, --fbw-radius-btn, icon 22 px, hint with the / key. Used by /templates/, the collections,
   the components index and the FAQ search (faq-search's .fbk-faqsearch__box is dressed the same below). */
.fbw .fbw-lib-search { position: relative; display: flex; align-items: center; }
.fbw .fbw-lib-search > .fbw-icon { position: absolute; inset-inline-start: 1.125rem; width: 1.375rem; height: 1.375rem; color: var(--heading-color); pointer-events: none; }
.fbw .fbw-lib-search__input {
  inline-size: 100%; min-block-size: 3.25rem; padding: 0 9.5rem 0 3.25rem; border: 1px solid var(--fbw-line); border-radius: var(--fbw-radius-btn);
  background: var(--white); color: var(--heading-color); font: inherit; font-size: var(--text-l); line-height: 1.2;
  transition: border-color var(--fbw-t-s) var(--fbw-ease-color), box-shadow var(--fbw-t-s) var(--fbw-ease-color); -webkit-appearance: none; appearance: none;
}
.fbw .fbw-lib-search__input::placeholder { color: var(--text-color); opacity: 1; }
.fbw .fbw-lib-search__input:hover { border-color: var(--border-color-strong); }
.fbw .fbw-lib-search__input:focus { outline: none; border-color: var(--base-ultra-dark); box-shadow: 0 0 0 1px var(--base-ultra-dark); }
.fbw .fbw-lib-search__input::-webkit-search-cancel-button { cursor: pointer; }
.fbw .fbw-lib-search__hint { position: absolute; inset-inline-end: 1.125rem; font-size: var(--text-s); color: var(--text-color); pointer-events: none; display: inline-flex; align-items: center; gap: 0.35em; }
.fbw .fbw-lib-search__hint kbd { font: inherit; font-weight: 600; color: var(--heading-color); min-inline-size: 1.6em; text-align: center; padding: 1px 6px; border: 1px solid var(--fbw-line); border-radius: 6px; background: var(--base-ultra-light); }
.fbw .fbw-lib-search:focus-within .fbw-lib-search__hint { opacity: 0; transition: opacity var(--fbw-t-s) var(--fbw-ease-color); }

@media (max-width: 767px) {
  .fbw .fbw-lib-search__input { padding-inline-end: 1rem; min-block-size: 3.25rem; font-size: var(--text-m); }
  .fbw .fbw-lib-search__hint { display: none; }
}
/* the FAQ search box (3.0 template faq-search, home and pricing) = the same field */
.fbw .fbk-faqsearch__box.brxe-block:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { min-block-size: 3.25rem; padding-block: 0; padding-inline: 1.125rem; gap: 0.75rem; border: 1px solid var(--fbw-line); border-radius: var(--fbw-radius-btn); background: var(--white); color: var(--heading-color); transition: border-color var(--fbw-t-s) var(--fbw-ease-color), box-shadow var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbk-faqsearch__box.brxe-block:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):hover { border-color: var(--border-color-strong); }
.fbw .fbk-faqsearch__box.brxe-block:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):focus-within { outline: none; border-color: var(--base-ultra-dark); box-shadow: 0 0 0 1px var(--base-ultra-dark); }
.fbw .fbk-faqsearch__box:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) > input { font-size: var(--text-l); line-height: 1.2; color: var(--heading-color); }
.fbw .fbk-faqsearch__box:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) > input::placeholder { color: var(--text-color); opacity: 1; }
.fbw .fbk-faqsearch__glyph.brxe-icon:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { font-size: 1.375rem; color: var(--heading-color); }
.fbw .fbk-faqsearch__hint.brxe-text-basic:where(:not(.fbw-demo-palette, .fbw-demo-palette *)), .fbw .fbk-faqsearch__status.brxe-text-basic:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { opacity: 1; font-size: var(--text-s); color: var(--text-color); }
.fbw .fbk-faqsearch__label.brxe-text-basic:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { font-size: var(--text-xs); font-weight: 600; color: var(--heading-color); }
@media (max-width: 767px) { .fbw .fbk-faqsearch__box:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) > input { font-size: var(--text-m); } }

/* ---------- Header ---------- */
.fbw .fbw-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-header[data-scrolled] { border-bottom-color: var(--fbw-line-soft); }
.fbw .fbw-header__bar { max-width: var(--content-width, 77.5rem); margin-inline: auto; padding: 0.875rem var(--fbw-gutter); display: flex; align-items: center; gap: var(--space-l); }
.fbw .fbw-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--heading-color); }
.fbw .fbw-logo img { width: auto; height: 36px; }
.fbw .fbw-logo span { font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1; }
.fbw .fbw-nav { margin-inline-start: auto; }
.fbw .fbw-nav ul { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.fbw .fbw-nav a { display: inline-flex; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: var(--text-s); font-weight: 500; color: var(--heading-color); text-decoration: none; transition: background-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-nav a:hover { background: var(--base-ultra-light); }
.fbw .fbw-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.fbw .fbw-header__actions { display: flex; align-items: center; gap: var(--space-xs); }
.fbw .fbw-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--fbw-line); border-radius: var(--fbw-radius-btn); background: var(--white); color: var(--heading-color); place-items: center; cursor: pointer; padding: 0; }

/* ---------- Hero ---------- */
.fbw .fbw-hero { padding-block: var(--space-xxl) var(--space-section); }
.fbw .fbw-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-xxl); align-items: center; }
.fbw .fbw-hero__text { display: flex; flex-direction: column; gap: var(--space-m); align-items: flex-start; }
.fbw .fbw-hero h1 { font-size: var(--fbw-h1-top); line-height: 1; letter-spacing: -0.035em; }
.fbw .fbw-hero__note { font-size: var(--text-s); color: var(--text-color); }

/* the mosaic: 4–6 bricks, one dominant, one yellow, an empty slot (manual, «Universo gráfico») */
.fbw .fbw-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: var(--space-s); aspect-ratio: 1 / 0.92; }
.fbw .fbw-mosaic > * { border-radius: var(--radius); overflow: hidden; min-width: 0; min-height: 0; }
.fbw .fbw-mosaic img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.fbw .fbw-mosaic img.brxe-image, .fbw .fbw-mosaic > div > img { width: 100%; height: 100%; max-width: none; }
.fbw .fbw-mosaic__a img { object-position: left center; }
.fbw .fbw-mosaic__c img, .fbw .fbw-mosaic__d img { object-position: center; }
.fbw .fbw-mosaic__a { grid-area: 1 / 1 / 5 / 5; }
.fbw .fbw-mosaic__b { grid-area: 1 / 5 / 3 / 7; background: var(--primary); }
.fbw .fbw-mosaic__c { grid-area: 3 / 5 / 6 / 7; }
.fbw .fbw-mosaic__d { grid-area: 5 / 1 / 7 / 3; }
.fbw .fbw-mosaic__e { grid-area: 5 / 3 / 7 / 5; background: var(--base-ultra-dark); color: var(--white); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: var(--space-s); }
.fbw .fbw-mosaic__e { container-type: inline-size; }
.fbw .fbw-mosaic__e p { font-size: clamp(0.6875rem, 5cqi, 0.8125rem); color: #bfbfbf; }
.fbw .fbw-mosaic__e ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: clamp(0.6875rem, 6.4cqi, 0.9375rem); font-weight: 500; line-height: 1.25; white-space: nowrap; }
.fbw .fbw-mosaic__e li { display: flex; align-items: center; gap: 0.5rem; }
.fbw .fbw-mosaic__e li::before { content: ""; width: 5px; height: 8px; border-radius: 1.5px; background: #5a5b5e; }
.fbw .fbw-mosaic__e li:first-child::before { background: var(--primary); }
.fbw .fbw-mosaic__b { display: grid; place-items: center; color: var(--base-ultra-dark); }
.fbw .fbw-mosaic__b svg { width: 40%; height: auto; }

/* live mosaic: no screenshots; the dominant brick is a small template that reads three variables */
/* live template 4×4, variables 2×4 beside it, yellow brick under them, the dark framework brick, one empty slot */
.fbw .fbw-mosaic--live .fbw-mosaic__a { grid-area: 1 / 1 / 5 / 5; overflow: visible; container-type: size; }
.fbw .fbw-mosaic--live .fbw-mosaic__c { grid-area: 1 / 5 / 5 / 7; }
.fbw .fbw-mosaic--live .fbw-mosaic__b { grid-area: 5 / 5 / 7 / 7; }
.fbw .fbw-mosaic--live .fbw-mosaic__e { grid-area: 5 / 1 / 7 / 5; }  /* the whole bottom row to the yellow brick: no hole in the middle (owner, 2026-10-22) */
/* the variables column a little wider, so its swatches, corners and line breathe */
.fbw .fbw-mosaic.fbw-mosaic--live { grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(2, minmax(0, 1.45fr)); }
.fbw .fbw-live {
  --live-accent: #ffd64f; --live-on: #212224; --live-radius: 0.875rem;
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  gap: 2.6cqi; padding: 7cqi; background: var(--white); border: 1px solid var(--fbw-line-soft);
  border-radius: var(--radius);
}
.fbw .fbw-live > * { margin: 0; }
.fbw .fbw-live__eyebrow { display: inline-flex; align-items: center; gap: 1.6cqi; font-size: 3.3cqi; font-weight: 500; color: var(--text-color); }
.fbw .fbw-live__eyebrow::before { content: ""; width: 1.4cqi; height: 2.3cqi; border-radius: 0.5cqi; background: var(--live-accent); transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.fbw .fbw-live__title { font-size: 7.6cqi; font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; color: var(--heading-color); text-wrap: balance; }
.fbw .fbw-live__text { font-size: 3.7cqi; line-height: 1.45; color: var(--text-color); }
.fbw .fbw-live__actions { display: flex; flex-wrap: wrap; gap: 2cqi; margin-top: 1cqi; }
.fbw .fbw-live__btn { display: inline-flex; align-items: center; padding: 2.3cqi 4.2cqi; font-size: 3.4cqi; font-weight: 500;
  background: var(--live-accent); color: var(--live-on); border: 1.5px solid var(--live-accent); border-radius: var(--live-radius); }
.fbw .fbw-live__btn--ghost { background: transparent; color: var(--heading-color); border-color: var(--border-color-strong); }
.fbw .fbw-live__cards { list-style: none; padding: 0; margin: 2.5cqi 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqi; }
.fbw .fbw-live__card { display: grid; gap: 2cqi; align-content: start; padding: 3.2cqi; border: 1px solid var(--fbw-line-soft); border-radius: min(var(--live-radius), 1.25rem); background: var(--white); }
.fbw .fbw-live__card b { font-size: 3.2cqi; font-weight: 600; line-height: 1.2; color: var(--heading-color); }
.fbw .fbw-live__card .fbw-icon { width: 7cqi; height: 7cqi; }
.fbw .fbw-live .fbw-icon__accent { fill: var(--live-accent); transition: fill 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.fbw .fbw-live :is(.fbw-live__btn, .fbw-live__card) { transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1), border-color 350ms cubic-bezier(0.4, 0, 0.2, 1), color 350ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.fbw .fbw-live__card:has(+ *):nth-child(n) { min-width: 0; }
/* the variables brick */
.fbw .fbw-vars { background: var(--base-ultra-light); padding: 0.9rem; display: flex; flex-direction: column; justify-content: center; gap: 0.45rem; }
.fbw .fbw-vars > p { margin: 0; }
.fbw .fbw-vars__title { font-size: var(--text-s); font-weight: 600; color: var(--heading-color); }
.fbw .fbw-vars__label { font-size: var(--text-xs); color: var(--text-color); margin-top: 0.2rem !important; }
.fbw .fbw-vars__swatches { display: flex; flex-wrap: nowrap; gap: 0.35rem; }
.fbw .fbw-swatch { width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 8px; background: var(--sw); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(33, 34, 36, 0.12); transition: scale 150ms ease; }
.fbw .fbw-swatch:hover { scale: 1.08; }
.fbw .fbw-swatch[aria-pressed="true"] { outline: 2px solid var(--base-ultra-dark); outline-offset: 2px; }
.fbw .fbw-vars__corners { padding: 3px; gap: 2px; background: var(--white); display: grid; grid-template-columns: minmax(0, 1fr); justify-self: stretch; }
.fbw .fbw-vars .fbw-vars__corners button { padding: 0.3rem 0.6rem; font-size: var(--text-xs); min-height: 30px; text-align: start; }
.fbw .fbw-vars__corners button[aria-pressed="true"]::before { display: none; }
.fbw .fbw-vars__corners button[aria-pressed="true"] { background: var(--base-ultra-dark); color: var(--white); }
.fbw .fbw-vars__note { font-size: var(--text-xs); line-height: 1.35; color: var(--text-color); margin-top: 0.2rem !important; }
.fbw .fbw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
  .fbw .fbw-mosaic.fbw-mosaic--live { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; aspect-ratio: auto; }
  .fbw .fbw-mosaic--live .fbw-mosaic__a { grid-area: 1 / 1 / 2 / -1; aspect-ratio: 1 / 0.95; }
  .fbw .fbw-mosaic--live .fbw-mosaic__c { grid-area: 2 / 1 / 3 / -1; }
  .fbw .fbw-mosaic--live .fbw-mosaic__b { grid-area: 3 / 1 / 4 / 2; aspect-ratio: 1; }
  .fbw .fbw-mosaic--live .fbw-mosaic__e { grid-area: 3 / 2 / 4 / 3; aspect-ratio: 1; }
  .fbw .fbw-vars__corners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* «the pieces fit»: once, on load (brand manual, sheet 15) */
@media (prefers-reduced-motion: no-preference) {
  .fbw .fbw-mosaic > * { animation: fbw-fit var(--fbw-t-l) var(--ease-brand) backwards; }
  .fbw .fbw-mosaic__a { animation-name: fbw-fit-x; }
  .fbw .fbw-mosaic__c.fbw-vars { animation-delay: 120ms; }
  .fbw .fbw-mosaic__b { animation-delay: 60ms; }
  .fbw .fbw-mosaic__c { animation-delay: 120ms; }
  .fbw .fbw-mosaic__d { animation-delay: 180ms; animation-name: fbw-fit-x; }
  .fbw .fbw-mosaic__e { animation-delay: 240ms; }
  .fbw .fbw-hero .fbw-bracket::before { animation: fbw-close-l var(--fbw-t-m) var(--ease-brand) 300ms backwards; }
  .fbw .fbw-hero .fbw-bracket::after { animation: fbw-close-r var(--fbw-t-m) var(--ease-brand) 300ms backwards; }
}
@keyframes fbw-fit { from { opacity: 0; translate: 0 var(--space-l); } }
@keyframes fbw-fit-x { from { opacity: 0; translate: calc(var(--space-l) * -1) 0; } }
@keyframes fbw-close-l { from { opacity: 0; translate: -0.35em 0; } }
@keyframes fbw-close-r { from { opacity: 0; translate: 0.35em 0; } }

/* ---------- Framework strip ---------- */
.fbw .fbw-strip { padding-block: var(--space-m); padding-inline: var(--fbw-gutter); border-block: 1px solid var(--fbw-line-soft); }
.fbw .fbw-strip ul { max-width: var(--content-width, 77.5rem); margin: 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s) var(--space-l); font-size: var(--text-s); color: var(--text-color); }
.fbw .fbw-strip li { display: inline-flex; align-items: center; gap: 0.6rem; }
.fbw .fbw-strip b { color: var(--heading-color); font-weight: 600; }

/* ---------- Template / collection card ---------- */
.fbw .fbw-card { display: flex; flex-direction: column; gap: var(--space-s); color: inherit; text-decoration: none; }
.fbw .fbw-card__frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--base-ultra-light); outline: 1px solid var(--fbw-line-soft); outline-offset: -1px; transition: outline-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-card__frame img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.fbw .fbw-card__title { font-size: var(--h5); font-weight: 600; line-height: 1.3; color: var(--heading-color); display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.fbw .fbw-card__title::after { background: var(--text-color); }
.fbw .fbw-card:hover .fbw-card__title::after { translate: 4px 0; background: var(--heading-color); }
.fbw .fbw-card__meta { font-size: var(--text-s); color: var(--text-color); margin-top: -0.5rem; }

/* ---------- Style families demo ---------- */
.fbw .fbw-demo { border-radius: var(--fbw-radius-l); background: var(--white); border: 1px solid var(--fbw-line-soft); padding: var(--space-l); display: grid; gap: var(--space-l); }
.fbw .fbw-demo__stage { border-radius: var(--radius); background: var(--white); border: 1px solid var(--fbw-line-soft); padding: var(--space-xl) var(--space-l); display: grid; gap: var(--space-m); justify-items: center; }
.fbw .fbw-demo__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.fbw .fbw-demo__controls { display: grid; gap: var(--space-s); }
.fbw .fbw-demo__group { display: grid; grid-template-columns: 3.75rem 1fr; gap: var(--space-s); align-items: center; }
.fbw .fbw-demo__group > span { font-size: var(--text-s); font-weight: 600; color: var(--heading-color); }
.fbw .fbw-switch { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 4px; border-radius: var(--fbw-radius-btn); background: var(--base-ultra-light); border: 1px solid var(--fbw-line-soft); justify-self: start; }
.fbw .fbw-switch button { position: relative; border: 0; background: transparent; color: var(--text-color); font: 500 var(--text-s)/1.2 var(--font-sans); padding: 0.55rem 0.85rem; border-radius: 0.5rem; cursor: pointer; min-height: 36px; transition: background-color var(--fbw-t-s) var(--fbw-ease-color), color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-switch button:hover { color: var(--heading-color); }
.fbw .fbw-switch button:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: var(--fbk-disabled, 0.45); }
.fbw .fbw-switch button:is(:disabled, [aria-disabled="true"]):hover { color: var(--text-color); }
.fbw .fbw-demo__group:has(.fbw-switch[data-disabled]) > span { opacity: 0.55; }
/* compact demo (owner, 2026-10-19): groups flow in rows with the label above, smaller switches, a lower stage; the
   live status line is for screen readers only */
.fbw .fbw-demo { padding: var(--space-m); gap: var(--space-m); }
.fbw .fbw-demo__stage { padding: var(--space-l) var(--space-m); gap: var(--space-s); }
.fbw .fbw-demo__controls { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); }
.fbw .fbw-demo__group { display: grid; grid-template-columns: none; gap: 0.35rem; align-content: start; }
.fbw .fbw-demo__group > span { font-size: var(--text-xs); }
.fbw .fbw-switch { padding: 3px; gap: 2px; }
.fbw .fbw-switch button { font-size: var(--text-xs); padding: 0.4rem 0.65rem; min-height: 32px; }
.fbw .fbw-demo [data-fbw-demo-live] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

.fbw .fbw-switch button[aria-pressed="true"] { background: var(--white); color: var(--heading-color); box-shadow: var(--fbw-shadow-s); }
.fbw .fbw-switch button[aria-pressed="true"]::before { content: ""; display: inline-block; width: 5px; height: 8px; margin-right: 7px; border-radius: 1.5px; background: var(--primary); vertical-align: 1px; }

/* the demo pieces: the FBK style families 1:1 (fbk-ui, fbk/patterns.py; owner, 2026-10-22): the same tokens per tone,
   the same rest and hover per look, the same sizes and the same hover effects. Inside the stage only, --primary is
   the templates' demo purple (fb-30's Fancy Framework), so Tone Brand looks like the library; the rest of the web
   keeps its yellow. The combinations the library doesn't have are switched off in fbw.js (SISTEMA-UI.md) */
.fbw .fbw-demo__stage {
  --primary: #7c3aed; --primary-dark: #632ebe; --primary-ultra-light: #f8f5fe; --text-on-primary: var(--white);
  --_t: 350ms; --_ease: cubic-bezier(0.22, 1, 0.36, 1); --_ink-ease: var(--_ease); --_press-t: var(--_t);
  /* Tone Brand: fill, ink on the fill, ink without a box, tint (Soft), ink on the tint, edge (Outline) */
  --_fill: var(--primary); --_on: var(--text-on-primary); --_ink: var(--primary);
  --_ink-hover: color-mix(in srgb, var(--_ink) 70%, var(--heading-color));
  --_tint: var(--primary-ultra-light); --_tint-ink: var(--primary-dark);
  --_line: color-mix(in srgb, var(--primary) 55%, transparent);
  --_fill-hover: color-mix(in srgb, var(--_fill) 84%, var(--base-ultra-dark));
  /* Look Plain: no box, no padding; on hover only the ink changes */
  --_fg: var(--_ink); --_bg: transparent; --_border: transparent; --_shadow: none;
  --_fg-h: var(--_ink-hover); --_bg-h: transparent; --_border-h: transparent;
  --_size: var(--_icon); --_pad: 0em;
  /* Size M, Shape Rounded (half the site radius) */
  --_box: 2.5em; --_icon: 1.125em; --_text: var(--text-s); --_pad-text: 0.875em; --_gap: 0.5em;
  --_radius: calc(var(--radius, 0.75rem) / 2);
  font-size: var(--text-m); color: var(--text-color);
}
.fbw .fbw-demo__stage[data-tone="neutral"] { --_fill: var(--heading-color); --_on: var(--white); --_ink: currentColor; --_ink-hover: var(--primary);
  --_tint: color-mix(in srgb, currentColor 8%, transparent); --_tint-ink: currentColor;
  --_line: var(--border-color, color-mix(in srgb, currentColor 25%, transparent)); }
/* Tone White is for controls over photos (slider arrows, play, tags on a photo): the stage shows one, so White ink
   (Plain, Outline) can be seen. A dark edge at 14 % for Solid, like the library */
.fbw .fbw-demo__stage[data-tone="white"] { --_fill: var(--white); --_on: var(--base-ultra-dark); --_ink: var(--white);
  --_ink-hover: color-mix(in srgb, var(--white) 75%, transparent); --_tint: color-mix(in srgb, var(--white) 85%, transparent);
  --_tint-ink: var(--base-ultra-dark); --_line: color-mix(in srgb, var(--base-ultra-dark) 14%, transparent);
  --_fill-hover: color-mix(in srgb, var(--white) 82%, var(--base-ultra-dark));
  border-color: transparent; background: linear-gradient(rgba(20, 22, 26, 0.38), rgba(20, 22, 26, 0.38)), var(--base-ultra-dark) url("/wp-content/uploads/2026/10/cocora.webp") center / cover; }
/* Looks. Soft, Outline and Elevated end in the same filled hover (Elevated keeps its shadow); they differ at rest.
   Their ink crosses fast while the box is half filled (the library's ink curve) */
.fbw .fbw-demo__stage[data-look="soft"] { --_ink-ease: linear(0, 0.02 20%, 0.5 30%, 0.98 40%, 1); --_fg: var(--_tint-ink); --_bg: var(--_tint);
  --_fg-h: var(--_on); --_bg-h: var(--_fill); --_size: var(--_box); --_pad: var(--_pad-text); }
.fbw .fbw-demo__stage[data-look="outline"] { --_ink-ease: linear(0, 0.02 20%, 0.5 30%, 0.98 40%, 1); --_border: var(--_line);
  --_fg-h: var(--_on); --_bg-h: var(--_fill); --_border-h: var(--_fill); --_size: var(--_box); --_pad: var(--_pad-text); }
.fbw .fbw-demo__stage[data-look="solid"] { --_fg: var(--_on); --_bg: var(--_fill); --_fg-h: var(--_on); --_bg-h: var(--_fill-hover);
  --_size: var(--_box); --_pad: var(--_pad-text); }
.fbw .fbw-demo__stage[data-look="solid"][data-tone="white"] { --_border: var(--_line); --_border-h: var(--_line); }
/* Outline + White: a white edge at 70 % (library, 2026-10-22: 6.8:1 on a veiled photo; it was the dark 14 % line and
   vanished, so Outline looked Plain). Solid + White keeps the dark line */
.fbw .fbw-demo__stage[data-look="outline"][data-tone="white"] { --_border: color-mix(in srgb, var(--white) 70%, transparent); }
.fbw .fbw-demo__stage[data-look="elevated"] { --_ink-ease: linear(0, 0.02 20%, 0.5 30%, 0.98 40%, 1); --_bg: var(--white);
  --_shadow: 0 0.25em 0.75em color-mix(in srgb, var(--black, #000) 18%, transparent);
  --_fg-h: var(--_on); --_bg-h: var(--_fill); --_size: var(--_box); --_pad: var(--_pad-text); }
.fbw .fbw-demo__stage[data-shape="round"] { --_radius: 999em; }
.fbw .fbw-demo__stage[data-shape="square"] { --_radius: 0em; }
/* Sizes: S and M share the text size (S only tightens padding and gap); L goes to --text-m */
.fbw .fbw-demo__stage[data-size="s"] { --_box: 2em; --_icon: 1em; --_pad-text: 0.625em; --_gap: 0.375em; }
.fbw .fbw-demo__stage[data-size="l"] { --_box: 3em; --_icon: 1.375em; --_text: var(--text-m); --_pad-text: 1.125em; --_gap: 0.75em; }
/* the space between pieces grows by what the box no longer takes (Plain), like FBK Social */
.fbw .fbw-demo__stage .fbw-demo__row { gap: calc(var(--_gap) + var(--_box) - var(--_size)); align-items: center; }
.fbw .fbw-piece-wrap { display: inline-flex; }
.fbw .fbw-piece { --_s-fg: var(--_fg); --_s-bg: var(--_bg); --_s-border: var(--_border);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-width: var(--_size); min-height: var(--_size); padding: 0;
  color: var(--_s-fg); background: var(--_s-bg); border: 1px solid var(--_s-border); border-radius: var(--_radius); box-shadow: var(--_shadow);
  transition: color var(--_t) var(--_ink-ease), background-color var(--_t) var(--_ease), border-color var(--_t) var(--_ease),
    border-radius var(--_t) var(--_ease), scale var(--_press-t) var(--_ease), translate var(--_t) var(--_ease), opacity var(--_t) var(--_ease); }
.fbw .fbw-piece:hover { --_s-fg: var(--_fg-h); --_s-bg: var(--_bg-h); --_s-border: var(--_border-h); }
.fbw .fbw-piece:not(.fbw-piece--icon) { min-width: 0; min-height: 0; padding: 0.35em var(--_pad); font-size: var(--_text); font-weight: 500; line-height: 1.2; }
.fbw .fbw-piece .fbw-icon { width: var(--_icon); height: var(--_icon); }
/* hover family. Grow and Spin move only the icon (text pieces stay still); Pop grows the piece and presses from the
   grown size; Lift raises the piece on its wrapper's hover (the wrapper doesn't move, so a pointer on the bottom edge
   can't make it jump). Reduced motion: nothing moves and colors change at once */
@media (prefers-reduced-motion: no-preference) {
  .fbw :is([data-hover="grow"], [data-hover="spin"]) .fbw-piece .fbw-icon { transition: scale var(--_t) var(--_ease), rotate calc(var(--_t) * 1.5) var(--_ease); will-change: scale, rotate; }
  .fbw :is([data-hover="pop"], [data-hover="lift"]) .fbw-piece { will-change: scale, translate; }
  .fbw [data-hover="grow"] .fbw-piece:hover .fbw-icon { scale: 1.2; }
  .fbw [data-hover="spin"] .fbw-piece:hover .fbw-icon { rotate: y 360deg; }
  .fbw [data-hover="pop"] .fbw-piece:hover { scale: 1.12; }
  .fbw [data-hover="lift"] .fbw-piece-wrap:hover > .fbw-piece { translate: 0 -0.25em; }
  .fbw .fbw-demo__stage .fbw-piece:active { --_press-t: calc(var(--_t) / 4); scale: 0.97; }
  .fbw .fbw-demo__stage[data-hover="pop"] .fbw-piece:active { scale: calc(1.12 * 0.97); }
}
@media (prefers-reduced-motion: reduce) { .fbw .fbw-demo__stage { --_t: 0s; } }
/* Spin only turns an icon (owner, 2026-10-22: «si seleccionan spin deshabilita todos los botones menos los que tienen
   iconos»): with Spin, the pieces with no icon are switched off, like a disabled piece (--fbk-disabled). Not with
   Grow: it is the default, so the tags looked disabled from the first screen (owner: «quedaron desactivados todo el
   tiempo») */
.fbw .fbw-demo__stage[data-hover="spin"] .fbw-piece:not(:has(.fbw-icon)) { opacity: var(--fbk-disabled, 0.45); pointer-events: none; }

/* ---------- Feature cards ---------- */
.fbw .fbw-feature { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-l); border-radius: var(--radius); background: var(--white); border: 1px solid var(--fbw-line-soft); }
.fbw .fbw-section--soft .fbw-feature { border-color: transparent; }
.fbw .fbw-feature h3 { font-size: var(--h5); }
.fbw .fbw-feature p { font-size: var(--text-s); line-height: 1.55; }
.fbw .fbw-feature--plain { padding: 0; border: 0; background: none; }
.fbw .fbw-quality { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fbw .fbw-feature--intro { background: none; border: 0; padding: 0 var(--space-m) 0 0; justify-content: center; }
.fbw .fbw-feature--intro h2 { font-size: var(--h3); }
.fbw .fbw-feature--intro p { font-size: var(--text-l); }

/* plugin + WooCommerce cards */
.fbw .fbw-pw { padding: var(--space-l); gap: var(--space-s); }
.fbw .fbw-pw .fbw-card__frame { margin-top: var(--space-s); }
.fbw .fbw-pw__list { list-style: none; margin: var(--space-s) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
.fbw .fbw-pw__list li { display: flex; align-items: center; gap: 0.75rem; font-size: var(--text-s); font-weight: 500; color: var(--heading-color); }
@media (max-width: 767px) { .fbw .fbw-pw__list { grid-template-columns: minmax(0, 1fr); } }

/* expandable wall (testimonials): a wrapper clips it with a fade while collapsed */
.fbw .fbw-expand__clip { width: 100%; }
.fbw .fbw-expand__clip.is-collapsible:not(.is-open) { max-height: 38rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent); mask-image: linear-gradient(to bottom, #000 68%, transparent); }
.fbw .fbw-expand__row { display: flex; justify-content: center; width: 100%; margin-top: var(--space-m); }
/* a filled brand-tone card (yellow): ink text and stars, never white on yellow */
.fbw .fbk-quote.fbk-ui--solid:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):not(.fbk-ui--neutral), .fbw .fbk-quote.fbk-ui--solid:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):not(.fbk-ui--neutral) * { color: var(--base-ultra-dark); }
.fbw .fbk-quote.fbk-ui--solid:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):not(.fbk-ui--neutral) .fbk-quote__rating :is(svg, path, i) { fill: var(--base-ultra-dark); color: var(--base-ultra-dark); }

/* steps */
.fbw .fbw-steps { counter-reset: fbw-step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
.fbw .fbw-step { counter-increment: fbw-step; display: grid; gap: var(--space-s); align-content: start; padding-top: var(--space-m); border-top: 1px solid var(--fbw-line); }
.fbw .fbw-step::before { content: counter(fbw-step); font-size: var(--h4); font-weight: 700; color: var(--heading-color); line-height: 1; display: inline-flex; align-items: center; gap: 0.6rem; }
.fbw .fbw-step h3 { font-size: var(--h5); }
.fbw .fbw-step p { font-size: var(--text-s); }

/* ---------- Before / after ---------- */
.fbw .fbw-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.fbw .fbw-ba figure { margin: 0; display: grid; gap: var(--space-xs); }
.fbw .fbw-ba img { border-radius: var(--radius); outline: 1px solid var(--fbw-line-soft); outline-offset: -1px; aspect-ratio: 1200 / 567; object-fit: cover; object-position: top; width: 100%; }
.fbw .fbw-ba figcaption { font-size: var(--text-s); color: var(--text-color); display: inline-flex; align-items: center; gap: 0.5rem; }
.fbw .fbw-ba figure:last-child figcaption { color: var(--heading-color); font-weight: 600; }
.fbw .fbw-ba figure:last-child figcaption::before { content: ""; width: 6px; height: 10px; border-radius: 2px; background: var(--primary); }

/* ---------- Testimonials ---------- */
.fbw .fbw-quote { border: 0; quotes: none; margin: 0; display: flex; flex-direction: column; gap: var(--space-m); padding: var(--space-l); border-radius: var(--radius); background: var(--white); justify-content: space-between; }
.fbw .fbw-quote p { font-size: var(--text-l); line-height: 1.5; color: var(--heading-color); }
.fbw .fbw-quote__by { font-size: var(--text-s); }
.fbw .fbw-quote__by { color: var(--text-color); }
.fbw .fbw-quote cite { opacity: 1; text-transform: none; letter-spacing: normal; font-size: var(--text-s); font-style: normal; font-weight: 600; color: var(--heading-color); display: block; }

/* ---------- Pricing ---------- */
.fbw .fbw-price { display: flex; flex-direction: column; gap: var(--space-m); padding: var(--space-l); border-radius: var(--fbw-radius-l); background: var(--white); border: 1px solid var(--fbw-line); }
.fbw .fbw-price--featured { border: 2px solid var(--base-ultra-dark); }
.fbw .fbw-price__name { font-size: var(--h5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.fbw .fbw-price__amount { display: flex; align-items: baseline; gap: var(--space-xs); color: var(--text-color); font-size: var(--text-s); }
.fbw .fbw-price__amount b { font-size: clamp(2.75rem, 2.3rem + 1.6vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; color: var(--heading-color); line-height: 1; }
.fbw .fbw-price ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; flex: 1; }
.fbw .fbw-price li { display: grid; grid-template-columns: 20px 1fr; gap: 0.75rem; font-size: var(--text-s); line-height: 1.5; color: var(--heading-color); }
.fbw .fbw-price li::before { content: ""; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px; background: var(--primary-ultra-light) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' fill='none' stroke='%23212224' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fbw .fbw-price .fbw-btn { align-self: stretch; }
.fbw .fbw-price__note { font-size: var(--text-s); text-align: center; }
.fbw .fbw-price__later { min-height: 48px; display: grid; place-items: center; border-radius: var(--fbw-radius-btn); background: var(--base-ultra-light); font-size: var(--text-s); color: var(--text-color); }

/* FAQ: every FAQ of the web is a 3.0 template (faq-search on home and pricing, faq-lines elsewhere; R2, 2026-10-19) */

/* ---------- Dark frame (closing) ---------- */
.fbw .fbw-frame-dark { position: relative; isolation: isolate; background: var(--base-ultra-dark); color: #bfbfbf; border-radius: var(--fbw-radius-l); padding: clamp(3.5rem, 2rem + 5vw, 6rem) clamp(2.5rem, 0.5rem + 8vw, 8rem); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-m); }
.fbw .fbw-frame-dark h2 { color: var(--white); max-width: 18ch; }
.fbw .fbw-frame-dark p { max-width: 36rem; font-size: var(--text-l); }
.fbw .fbw-frame-dark::before, .fbw .fbw-frame-dark::after { content: ""; position: absolute; z-index: -1; inset-block: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); width: clamp(2rem, 1rem + 2.5vw, 3.5rem); border: 6px solid var(--fbw-bracket-on-dark); pointer-events: none; }
.fbw .fbw-frame-dark::before { left: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); border-right: 0; border-radius: 32px 0 0 32px; }
.fbw .fbw-frame-dark::after { right: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); border-left: 0; border-radius: 0 32px 32px 0; }
.fbw .fbw-frame-dark small { font-size: var(--text-s); color: #9e9e9e; }


/* ---------- Dialogs, icon buttons and the toast (shared: library, template page, account; SISTEMA-UI.md) ---------- */
.fbw .fbw-lib-dialog { inline-size: min(32rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--fbw-radius-l); background: var(--white); color: var(--text-color); box-shadow: var(--fbw-shadow-m); overflow: auto; }
.fbw .fbw-lib-dialog::backdrop { background: rgba(33, 34, 36, 0.55); }
.fbw .fbw-lib-dialog[open] { animation: fbw-lib-in var(--fbw-t-m) var(--ease-brand); }
@keyframes fbw-lib-in { from { opacity: 0; translate: 0 12px; } }
.fbw .fbw-lib-dialog__inner { position: relative; display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-l); }
.fbw .fbw-lib-dialog__title { font-size: var(--h5); line-height: 1.25; padding-inline-end: 2.75rem; }
.fbw .fbw-lib-dialog__close, .fbw .fbw-lib-iconbtn { display: grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border: 1px solid var(--fbw-line); border-radius: var(--fbw-radius-btn); background: var(--white); color: var(--heading-color); cursor: pointer; transition: border-color var(--fbw-t-s) var(--fbw-ease-color), background-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-lib-dialog__close { position: absolute; inset-block-start: var(--space-s); inset-inline-end: var(--space-s); }
.fbw .fbw-lib-dialog__close:hover, .fbw .fbw-lib-iconbtn:hover:not(:disabled) { border-color: var(--border-color-strong); background: var(--base-ultra-light); }
.fbw .fbw-lib-iconbtn:disabled { opacity: 0.4; cursor: default; }
.fbw .fbw-lib-dialog .fbw-icon { inline-size: 1.25rem; block-size: 1.25rem; }
/* buttons with the «Brackets» hover draw their brackets 9px outside the box: at --space-xs the focused button's bracket
   sat on its neighbour (owner, 2026-10-24); --space-m leaves room for both brackets at once */
.fbw .fbw-lib-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-m); row-gap: var(--space-xs); margin-block-start: var(--space-xs); }
.fbw .fbw-lib-dialog__note { font-size: var(--text-s); }
.fbw .fbw-lib-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.fbw .fbw-lib-checks li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--heading-color); }
.fbw .fbw-lib-checks .fbw-icon { flex: none; margin-block-start: 0.1em; }
.fbw .fbw-lib-code { inline-size: 100%; min-block-size: 8rem; padding: 0.75rem; border: 1px solid var(--fbw-line); border-radius: var(--fbw-radius-btn); font: inherit; font-size: var(--text-xs); color: var(--heading-color); resize: vertical; }

/* the quick preview is as wide as the page's container plus the dialog's padding (owner, 2026-10-23: «muy angosto») */
.fbw .fbw-lib-preview { inline-size: min(calc(var(--content-width, 77.5rem) + 2 * var(--space-l)), calc(100vw - 2rem)); }
.fbw .fbw-lib-preview .fbw-lib-dialog__title { padding-inline-end: 8rem; }
.fbw .fbw-lib-preview__meta { margin-block-start: -0.5rem; font-size: var(--text-s); }
.fbw .fbw-lib-preview__nav { position: absolute; inset-block-start: var(--space-s); inset-inline-end: calc(var(--space-s) + 48px); display: flex; gap: 6px; }
.fbw .fbw-lib-preview__media { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--base-ultra-light); outline: 1px solid var(--fbw-line-soft); outline-offset: -1px; }
.fbw .fbw-lib-preview__media img, .fbw .fbw-lib-preview__frame { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: left top; border: 0; }
.fbw .fbw-lib-preview__foot { display: flex; flex-direction: column; gap: var(--space-xs); }
.fbw .fbw-lib-preview__desc { font-size: var(--text-s); line-height: 1.55; }   /* no width on text (owner): the dialog sets it */
/* the media gives way so Copy stays on screen on a laptop */
.fbw .fbw-lib-preview .fbw-lib-preview__media { aspect-ratio: auto; block-size: clamp(12rem, 100dvh - 25rem, 34rem); }
.fbw .fbw-lib-preview .fbw-lib-dialog__actions .fbw-lib-fav { margin-inline-start: auto; }

/* ---------- Live preview — .fbw-pv (one piece: the template page, its full-screen dialog and the library's quick
   preview; copy.js fbwCopy.preview, markup fbw_pv_bar() in fbw-library.php; SISTEMA-UI.md «Vista previa en vivo»).
   The demo is an iframe at the real device width (1440 / 768 / 390) scaled down to the stage, over the thumbnail,
   which stays the page's LCP and shows «Loading demo…» until the frame has loaded. Width and background use the one
   segmented control; «Open full screen» is a bar control (40 px, like Filters). ---------- */
.fbw .fbw-pv { display: flex; flex-direction: column; gap: var(--space-s); min-inline-size: 0; }
.fbw .fbw-pv [hidden] { display: none !important; }
.fbw .fbw-pv__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-xs) var(--space-m); }
.fbw .fbw-pv__group { display: flex; flex-direction: column; gap: 0.375rem; min-inline-size: 0; }
.fbw .fbw-pv__label { font-size: var(--text-xs); font-weight: 600; line-height: 1.3; color: var(--heading-color); }
/* Site mode (the framework's dark mode, fbw_pv_bar): an «i» beside the label opens a short note under the bar */
.fbw .fbw-pv__group--mode { position: relative; }
.fbw .fbw-pv__group--mode .fbw-pv__label { display: inline-flex; align-items: center; gap: 6px; }
.fbw .fbw-pv__info {
  inline-size: 18px; block-size: 18px; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  font: 600 11px/1 var(--font-sans); font-style: italic; color: var(--heading-color); background: transparent;
  border: 1px solid var(--border-color-strong); border-radius: 50%;
  transition: background-color var(--fbw-t-s) var(--fbw-ease-color), border-color var(--fbw-t-s) var(--fbw-ease-color);
}
.fbw .fbw-pv__info:hover, .fbw .fbw-pv__info[aria-expanded="true"] { background: var(--base-ultra-light); border-color: var(--heading-color); }
.fbw .fbw-pv__note {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; z-index: 5; inline-size: min(320px, 80vw);
  margin: 0; padding: var(--space-s); font-size: var(--text-s); line-height: 1.5; color: var(--text-color);
  background: var(--white); border: 1px solid var(--fbw-line); border-radius: var(--fbw-radius-btn);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--base-ultra-dark) 12%, transparent);
}
.fbw .fbw-pv__note[hidden] { display: none; }
.fbw .fbw-pv .fbw-single-seg__btn { gap: 0.4rem; }
.fbw .fbw-pv .fbw-single-seg__btn .fbw-icon { inline-size: 18px; block-size: 18px; flex: none; }
.fbw .fbw-pv__full { margin-inline-start: auto; }
.fbw .fbw-barbtn { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 40px; padding: 8px 16px; border: 1px solid var(--fbw-line); border-radius: var(--fbw-radius-btn); background: var(--white); color: var(--heading-color); font: inherit; font-size: var(--text-s); font-weight: 500; line-height: 1.2; cursor: pointer; transition: border-color var(--fbw-t-s) var(--fbw-ease-color), background-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-barbtn:hover { border-color: var(--border-color-strong); background: var(--base-ultra-light); }
.fbw .fbw-barbtn .fbw-icon { inline-size: 18px; block-size: 18px; flex: none; }
.fbw .fbw-pv__stage { position: relative; isolation: isolate; inline-size: 100%; aspect-ratio: 16 / 10; max-block-size: 80vh; border-radius: var(--radius); overflow: hidden; background: var(--base-ultra-light); outline: 1px solid var(--fbw-line-soft); outline-offset: -1px; }
.fbw .fbw-pv__thumb { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: left top; transition: opacity var(--fbw-t-m) var(--fbw-ease-color); }
.fbw .fbw-pv__loading { position: absolute; z-index: 2; inset-block-end: var(--space-m); inset-inline-start: 50%; translate: -50% 0; margin: 0; padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--white); box-shadow: var(--fbw-shadow-s); font-size: var(--text-xs); font-weight: 500; line-height: 1.3; color: var(--heading-color); white-space: nowrap; }
.fbw .fbw-pv__frame { position: absolute; z-index: 1; inset-block-start: 0; inset-inline-start: 50%; translate: -50% 0; transform-origin: top center; max-inline-size: none; max-block-size: none; border: 0; background: var(--white); opacity: 0; transition: opacity var(--fbw-t-m) var(--fbw-ease-color); }
.fbw .fbw-pv__stage.is-loaded .fbw-pv__frame { opacity: 1; }
/* Desktop ↔ Tablet ↔ Mobile (owner, 2026-10-22: «no es suave», then «salta, se siente bugueado» when the width was
   animated: the page inside reflowed through its breakpoints on every frame). The frame fades out, takes its new size
   in one step while hidden, and fades back in: the template changes layout once, unseen (copy.js Preview.fit) */
.fbw .fbw-pv__stage.is-loaded.is-resizing .fbw-pv__frame { opacity: 0; transition-duration: var(--fbw-t-s); }
.fbw .fbw-pv__stage.is-loaded .fbw-pv__thumb { opacity: 0; }
.fbw .fbw-pv__stage.is-loaded .fbw-pv__loading { display: none; }
.fbw .fbw-pv__stage:not([data-width="desktop"]) .fbw-pv__frame { box-shadow: 0 0 0 1px var(--fbw-line-soft); }
/* full screen: the dialog takes the window, the stage takes what the bar leaves */
.fbw .fbw-pv-dialog { inline-size: calc(100vw - 2rem); max-inline-size: none; block-size: calc(100dvh - 2rem); }
.fbw .fbw-pv-dialog .fbw-lib-dialog__inner { block-size: 100%; padding: var(--space-m); }
.fbw .fbw-pv-dialog .fbw-pv { flex: 1 1 auto; min-block-size: 0; }
.fbw .fbw-pv-dialog .fbw-pv__stage { flex: 1 1 auto; aspect-ratio: auto; max-block-size: none; min-block-size: 0; }
/* quick preview: the media box gives its frame to the piece; the stage keeps Copy on screen on a laptop */
.fbw .fbw-lib-preview .fbw-lib-preview__media:has(.fbw-pv) { aspect-ratio: auto; block-size: auto; border-radius: 0; overflow: visible; background: none; outline: 0; }
.fbw .fbw-lib-preview .fbw-pv__stage { aspect-ratio: auto; block-size: clamp(12rem, 100dvh - 30rem, 32rem); }
@media (max-width: 767px) {
  .fbw .fbw-pv__stage { aspect-ratio: 3 / 4; max-block-size: 75vh; }
  .fbw .fbw-pv__full { margin-inline-start: 0; }
  .fbw .fbw-pv__loading { inset-block-end: var(--space-s); }
}
@media (prefers-reduced-motion: reduce) { .fbw .fbw-pv__frame, .fbw .fbw-pv__stage.is-loaded .fbw-pv__frame, .fbw .fbw-pv__thumb { transition: none; } }

.fbw-lib-toast { position: fixed; z-index: 100000; inset-block-end: 1.5rem; inset-inline: 1rem; margin-inline: auto; inline-size: fit-content; max-inline-size: min(36rem, calc(100vw - 2rem)); padding: 0.85rem 1.15rem; border-radius: var(--fbw-radius-btn); background: var(--base-ultra-dark); color: var(--white); font-size: var(--text-s); line-height: 1.5; box-shadow: var(--fbw-shadow-m); opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity var(--fbw-t-m) var(--ease-brand), translate var(--fbw-t-m) var(--ease-brand); }
.fbw-lib-toast.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.fbw-lib-toast:empty { display: none; }
.fbw-lib-toast a { color: var(--white); text-decoration: underline; text-decoration-color: #9e9e9e; text-underline-offset: 3px; }
.fbw-lib-toast a:hover { text-decoration-color: var(--white); }

@media (max-width: 767px) {
  .fbw .fbw-lib-dialog__inner { padding: var(--space-m); }
  .fbw .fbw-lib-preview .fbw-lib-dialog__title { padding-inline-end: 0; margin-block-start: 3rem; }
  .fbw .fbw-lib-preview__nav { inset-inline-start: var(--space-s); inset-inline-end: auto; }
}
@media (prefers-reduced-motion: reduce) { .fbw-lib-toast, .fbw .fbw-lib-dialog[open] { transition: none; animation: none; } }

/* ---------- Footer ---------- */
.fbw .fbw-footer { background: var(--base-ultra-light); padding: var(--space-xxl) var(--fbw-gutter) var(--space-l); }
.fbw .fbw-footer__grid { max-width: var(--content-width, 77.5rem); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
.fbw .fbw-footer__col-title { font-size: var(--text-s); font-weight: 600; margin-bottom: var(--space-s); }
.fbw .fbw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fbw .fbw-footer a:not(.fbw-logo) { display: inline-block; padding-block: 0.15rem; font-size: var(--text-s); color: var(--text-color); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color var(--fbw-t-s) var(--fbw-ease-color), text-decoration-color var(--fbw-t-s) var(--fbw-ease-color); }   /* hover audit 2026-10-24: the swap jumped */
.fbw .fbw-footer a:not(.fbw-logo):hover { color: var(--heading-color); text-decoration-color: currentColor; }
.fbw .fbw-footer__about { display: grid; gap: var(--space-s); align-content: start; max-width: 22rem; }
.fbw .fbw-footer__about p { font-size: var(--text-s); }
.fbw .fbw-footer__legal { max-width: var(--content-width, 77.5rem); margin: var(--space-xl) auto 0; padding-top: var(--space-m); border-top: 1px solid var(--fbw-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s); font-size: var(--text-xs); }
.fbw .fbw-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-m); }

/* ---------- The header is the 3.0 template header-mega, adapted by variables only ---------- */
/* same width as the page content; the old theme style sets Bricks containers to 1280 px */
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-section__container.brxe-container { width: 100%; max-width: var(--content-width, 77.5rem); }
/* the brand never puts yellow text on white: links turn ink, yellow stays in the brackets and the card icons' box */
.fbw .fbk-nav:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { --fbk-nav-accent: var(--primary); }
/* every link in the header, in every state: ink text (the yellow lives in the underline and the icon bricks) */
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) :is(a, .brx-submenu-toggle, .brx-submenu-toggle > *):not(.fbk-btn, .fbk-btn *):is(:hover, :focus-visible, [aria-current="page"], .open),
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-nav__dropdown:is(:hover, .open) > .brx-submenu-toggle,
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-nav__dropdown:is(:hover, .open) > .brx-submenu-toggle > * { color: var(--heading-color); }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) svg .fbw-icon__accent { fill: var(--primary); }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard .fbk-mcard__badge,
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard:is(:hover, :focus-visible) .fbk-mcard__badge { color: var(--heading-color); background: var(--primary-ultra-light); }
.fbw .fbk-nav__sublink.brxe-text-link:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):hover { background-color: var(--base-ultra-light); }
.fbw .fbk-mcard:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { --fbk-mcard-accent: var(--base-ultra-dark); }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-nav__logo { display: inline-flex; inline-size: auto; flex: none; }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-nav__logo img { block-size: 32px; inline-size: auto; max-inline-size: none; }

/* ---------- FBK Button on the web ----------
   Hover = the brand's brackets closing in from outside (manual, sheet 15 «Movimiento»): thin, rounded like the
   logo, in text-color (never yellow lines), the house curve. Only the template's own «Brackets» effect is restyled.
   Never inside a live demo of the component (:not(.fbw-demo-palette *): the FBK Button page's playground and
   showcase, 2026-10-22): there it is the library's button 1:1, or the demo would show the web's restyle as FBK's. */
.fbw .fbk-btn:not(.fbw-demo-palette *) { --fbk-btn-mark: var(--text-color); --_fbw-br: 0.45em; --_fbw-gap: 0.55em; }
.fbw :where(.fbk-scheme--dark, .fbk-section--dark, .fbk-card--solid, .fbk-nav__mega .fbk-card, .fbw-frame-dark) .fbk-btn:not(.fbw-demo-palette *) { --fbk-btn-mark: #9e9e9e; }
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets::before,
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets::after,
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets:is(:hover, :focus-visible)::before,
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets:is(:hover, :focus-visible)::after {
  inset-block: 6%; inline-size: var(--_fbw-br); border: 1.75px solid var(--fbk-btn-mark);
  transition: translate var(--fbw-t-m) var(--ease-brand), opacity var(--fbw-t-s) var(--fbw-ease-color);
}
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets::before,
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets:is(:hover, :focus-visible)::before {
  inset-inline-end: calc(var(--_fbw-gap) * -1); border-inline-start-width: 0; border-radius: 0 0.4em 0.4em 0;
}
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets::after,
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets:is(:hover, :focus-visible)::after {
  inset-inline-start: calc(var(--_fbw-gap) * -1); border-inline-end-width: 0; border-radius: 0.4em 0 0 0.4em;
}
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets::before { opacity: 0; translate: 0.55em 0; }
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets::after { opacity: 0; translate: -0.55em 0; }
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets:is(:hover, :focus-visible)::before,
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--brackets:is(:hover, :focus-visible)::after { opacity: 1; translate: 0 0; }

/* hover = the brand's two colors swap (owner: the old tint change was barely visible), plus the closing brackets */
/* color swap: the brand's long duration on an even curve (ease-brand front-loads the change and the color jumped);
   the brackets keep ease-brand, it is their gesture */
.fbw .fbk-btn:not(.fbw-demo-palette *) {
  transition-property: background-color, border-color, color, scale;
  transition-duration: 350ms, 350ms, 350ms, 150ms; /* 300 + ease-brand jumped, 450 felt slow (owner) */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--primary.fbk-btn--neutral:is(:hover, :focus-visible) { background-color: var(--primary); border-color: var(--primary); color: var(--base-ultra-dark); }
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--primary:not(.fbk-btn--neutral):is(:hover, :focus-visible) { background-color: var(--base-ultra-dark); border-color: var(--base-ultra-dark); color: var(--white); }
/* one line weight on the web: buttons take the same 1 px edge as chips, fields and the favorite button (owner); and the
   same corner as every control (--fbw-radius-btn, 12 px: the component's 0.55em gave 9 px) — SISTEMA-UI.md «Botones» */
.fbw .fbk-btn:not(.fbw-demo-palette *) { border-width: 1px; border-radius: var(--fbw-radius-btn); }
.fbw .fbk-form:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) button[type="submit"] { border-width: 1px; border-radius: var(--fbw-radius-btn); }
/* outline hover fills yellow, so it never looks like the ink primary button (owner, 2026-10-19) */
/* one outline button on the web (audit 2, A2): the pasted FBK Button's edge was ink at 25 % */
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--outline { border-color: var(--border-color-strong); }
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--outline:is(:hover, :focus-visible) { background-color: var(--primary); border-color: var(--primary); color: var(--base-ultra-dark); }
.fbw .fbk-btn:not(.fbw-demo-palette *):is(.fbk-btn--ghost, .fbk-btn--secondary):is(:hover, :focus-visible) { color: var(--heading-color); }
/* on dark, the yellow accent turns white instead of disappearing into the background */
.fbw :where(.fbk-scheme--dark, .fbk-section--dark, .fbw-frame-dark, .fbk-nav__mega .fbk-card) .fbk-btn:not(.fbw-demo-palette *).fbk-btn--primary:not(.fbk-btn--neutral):is(:hover, :focus-visible) { background-color: var(--white); border-color: var(--white); color: var(--base-ultra-dark); }

/* open/active states of reused components: ink text, the yellow stays in the marker (never yellow text on white) */
.fbw .fbk-accordion:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) :is(.brx-open, [aria-expanded="true"]) .fbk-accordion__title,
.fbw .fbk-accordion:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .brx-open > .fbk-accordion__header .fbk-accordion__title { color: var(--heading-color); }

/* FBK Intro (templates reused on the web) speaks the brand: eyebrow = text + mini brick, like .fbw-eyebrow */
/* …never inside a component demo (.fbw-demo-palette): the FBK Intro page shows its five eyebrow styles as the library
   draws them (owner, 2026-10-22: «todos se ven igual») */
.fbw .fbk-intro:not(.fbw-demo-palette *) .fbk-intro__eyebrow.fbk-intro__eyebrow--pill-outline,
.fbw .fbk-intro:not(.fbw-demo-palette *) .fbk-intro__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0; border: 0; background: none;
  border-radius: 0; font-size: var(--text-s); font-weight: 500; line-height: 1.2; color: var(--text-color);
}
.fbw .fbk-intro:not(.fbw-demo-palette *) .fbk-intro__eyebrow::before { content: ""; width: 6px; height: 10px; border-radius: 2px; background: var(--primary); flex: none; }

/* Bricks wraps every element: keep its wrappers out of the layout */
.fbw .fbw-section > .brxe-container, .fbw .fbw-container { padding: 0; }
.fbw .brxe-code:where(:not(.fbw-demo-palette *)) { display: contents; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .fbw .fbw-hero__grid, .fbw .fbw-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .fbw .fbw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbw .fbw-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fbw .fbw-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .fbw .fbw-nav, .fbw .fbw-header__login { display: none; }
  .fbw .fbw-burger { display: inline-grid; }
  .fbw .fbw-header__actions { margin-inline-start: auto; }
  .fbw .fbw-header[data-open] .fbw-nav { display: block; position: absolute; inset: 100% 0 auto 0; background: var(--white); border-bottom: 1px solid var(--fbw-line-soft); padding: var(--space-s) var(--fbw-gutter) var(--space-m); box-shadow: var(--fbw-shadow-m); }
  .fbw .fbw-header[data-open] .fbw-nav ul { flex-direction: column; }
  .fbw .fbw-header[data-open] .fbw-nav a { padding: 0.8rem 0.5rem; font-size: var(--text-m); }
  .fbw .fbw-grid--3, .fbw .fbw-steps { grid-template-columns: minmax(0, 1fr); }
  .fbw .fbw-quality { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbw .fbw-feature--intro { grid-column: 1 / -1; padding: 0 0 var(--space-s); }
}
@media (max-width: 767px) {
  .fbw .fbw-grid--2, .fbw .fbw-grid--4, .fbw .fbw-ba, .fbw .fbw-quality { grid-template-columns: minmax(0, 1fr); }
  .fbw .fbw-mosaic { gap: 0.6rem; }
  .fbw .fbw-mosaic__e { padding: 0.75rem; }
  .fbw .fbw-mosaic__e p { display: none; }
  .fbw .fbw-strip ul { justify-content: flex-start; }
  .fbw .fbw-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbw .fbw-demo { padding: var(--space-s); }
  .fbw .fbw-header__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fbw *, .fbw *::before, .fbw *::after { transition-duration: 0s !important; animation: none !important; }
}

/* ---------- Revisión de diseño (2026-10-19), defectos medidos ----------
   1 · Bricks' `body.bricks-is-frontend :focus { outline: none }` (0,2,1) beat `.fbw :focus-visible` (0,2,0): no
   visible keyboard focus on 29/29 tabbed elements. 2 · pasted 3.0 sections used the framework gutter (20 px at 390,
   22.4 at 1024) while the web's own sections use --fbw-gutter (16 / 26): 4 px steps at every joint. 3 · a pasted
   FBK Intro lead ran the full 1240 px (home «How it works»); the web's leads cap at --content-width-text.
   4 · the mobile menu's close icon was yellow on white (UI icons stay ink). 5 · the plugin hero kept a full section
   padding below AND the next section a full padding above (243 px of white; the plain heroes leave 64).
   6 · mega-menu link lists collapsed into the mobile menu were 20 px tall (tap targets ≥ 24). */
body.fbw.bricks-is-frontend :focus-visible, .fbw :focus-visible { outline: 2px solid var(--base-ultra-dark); outline-offset: 2px; }
.fbw .fbk-section:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { padding-inline: var(--fbw-gutter); }
.fbw .fbk-intro__lead:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { max-inline-size: var(--content-width-text); }
.fbw .fbk-intro:where(:not(.fbw-demo-palette, .fbw-demo-palette *))[class*="--center"] .fbk-intro__lead { margin-inline: auto; }
.fbw .fbk-nav__close:where(:not(.fbw-demo-palette, .fbw-demo-palette *)), .fbw .fbk-nav__close:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) svg { color: var(--heading-color); }
.fbw .fbw-hero--plugin { padding-block-end: var(--space-xl); }
.fbw .fbw-hero--plugin + section { padding-block-start: 0; }

/* ---------- Recomendaciones aplicadas (OK del dueño, 2026-10-19) ----------
   R6/R12 · the plain hero of every child page (was duplicated in components.css and frameworks.css): H1 56 px at 1440.
   R13 · the dark closing frame gets space-xl above it when it follows a soft section, so its corners never touch the gray.
   R1 · header actions by login state: plain wrappers (a component instance ignores _conditions) that add no box.
   R10 · the mobile menu panel starts under the logo bar instead of covering it; the bar's burger closes it, so the
   panel's own X is redundant and hidden. */
.fbw .fbw-hero--plain { padding-block: var(--space-xxl) var(--space-xl); }
.fbw .fbw-hero--plain .fbw-hero__text { max-width: 46rem; gap: var(--space-m); }
.fbw .fbw-hero--plain h1 { font-size: var(--fbw-h1-child); }
.fbw :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))) + .fbw-section--flush-top:has(.fbw-frame-dark) { padding-block-start: var(--space-xl); }
/* two soft sections in a row read as one block: the second starts flush (no 243 px of gray; SISTEMA-UI.md «Ritmo») */
.fbw :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))) + :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))) { padding-block-start: 0; }
/* …but a pasted template section the web paints white (it keeps the template's soft class: /pricing/'s table and FAQ)
   is not gray: the sections next to it keep their padding (owner, 2026-10-22: «revisa secciones pegadas»;
   web/build/section-gap-audit.mjs) */
.fbw :is(.fbw-pricing-top, .fbw-pricing-faq) + :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))),
.fbw :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))) + :is(.fbw-pricing-top, .fbw-pricing-faq) { padding-block-start: var(--space-section); }
.fbw .fbw-header__auth { display: contents; }
@media (max-width: 767px) {
  /* the template hides every action but the last on phones (`.fbk-nav__actions > :not(:last-child)`); with the
     wrappers in between that rule no longer reached the buttons: keep only the last button of the wrapper */
  .fbw .fbk-nav__actions:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) > .fbw-header__auth > :not(:last-child) { display: none; }
}
.fbw .fbk-nav.fbk-nav--panel-full:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { --fbk-nav-panel-inset: calc(var(--wp-admin--admin-bar--height, 0px) + var(--fbw-header-h, 0px)) 0 0 0; --fbk-nav-panel-top: var(--space-l); }
.fbw .fbk-nav.fbk-nav--panel-full:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-nav__close { display: none; }
@media (max-width: 1023px) {
  .fbw .fbk-nav__list:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-nav__mega li > a:not(.fbk-btn, .fbk-mcard) { display: inline-flex; align-items: center; min-block-size: 1.75rem; }
}

/* mega menus: column titles read as labels, not as links (owner, 2026-10-19): small, muted, the brand mini brick,
   and the same 16 px to the first item in every column (links lists had 8, text columns 16) */
.fbw #brx-header :is(.fbk-links__title, .fbk-nav__label) {
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-color);
}
.fbw #brx-header :is(.fbk-links__title, .fbk-nav__label)::before { content: ""; flex: none; width: 5px; height: 8px; border-radius: 1.5px; background: var(--primary); }
.fbw #brx-header .fbk-links__title { margin-block-end: 0.375rem; }

/* ONE segmented control on the whole web (owner: «debemos unificar diseños», 2026-10-19): the style families demo,
   My account «How you copy» and the copy bar share it. Gray track with a thin edge, the chosen option white with a
   small shadow and the brand mini brick (the manual's active marker: never color alone). Labels above, small and
   bold. `:root .fbw` outranks the page stylesheets that load after this one. */
:root .fbw :is(.fbw-switch, .fbw-acct-seg, .fbw-seg, .fbw-lib-view, .fbw-single-seg) {
  display: inline-flex; flex-wrap: wrap; align-content: flex-start; gap: 2px; padding: 3px;
  border-radius: calc(var(--fbw-radius-btn) - 2px); background: var(--base-ultra-light); border: 1px solid var(--fbw-line-soft);
}
:root .fbw .fbw-lib-copybar :is(.fbw-seg) { background: color-mix(in srgb, var(--base-ultra-dark) 9%, var(--base-ultra-light)); border-color: var(--fbw-line); }  /* the gray-surface track (2026-10-22) */
:root .fbw :is(.fbw-switch button, .fbw-acct-seg button, .fbw-seg .fbw-lib-radio span, .fbw-lib-view__btn, .fbw-single-seg__btn) {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 34px; padding: 0.4rem 0.75rem;
  border: 0; border-radius: 0.5rem; background: transparent; box-shadow: none;
  font: 500 var(--text-xs)/1.2 var(--font-sans); color: var(--text-color); cursor: pointer;
  transition: background-color var(--fbw-t-s) var(--fbw-ease-color), color var(--fbw-t-s) var(--fbw-ease-color), box-shadow var(--fbw-t-s) var(--fbw-ease-color);
}
:root .fbw :is(.fbw-switch button, .fbw-acct-seg button, .fbw-seg .fbw-lib-radio):hover :is(span),
:root .fbw :is(.fbw-switch button, .fbw-acct-seg button, .fbw-lib-view__btn, .fbw-single-seg__btn):hover { color: var(--heading-color); background: transparent; }
:root .fbw :is(.fbw-switch button[aria-pressed="true"], .fbw-acct-seg button[aria-pressed="true"], .fbw-seg .fbw-lib-radio input:checked + span, .fbw-lib-view__btn[aria-pressed="true"], .fbw-single-seg__btn[aria-pressed="true"]) {
  background: var(--white); color: var(--heading-color); box-shadow: var(--fbw-shadow-s);
}
:root .fbw :is(.fbw-switch button, .fbw-acct-seg button, .fbw-seg .fbw-lib-radio span, .fbw-lib-view__btn, .fbw-single-seg__btn)::before {
  content: ""; inline-size: 0; block-size: 8px; margin-inline-end: 0; border-radius: 1.5px; background: var(--primary);
  transition: inline-size var(--fbw-t-s) var(--fbw-ease-color), margin var(--fbw-t-s) var(--fbw-ease-color);
}
:root .fbw :is(.fbw-switch button[aria-pressed="true"], .fbw-acct-seg button[aria-pressed="true"], .fbw-seg .fbw-lib-radio input:checked + span, .fbw-lib-view__btn[aria-pressed="true"], .fbw-single-seg__btn[aria-pressed="true"])::before { inline-size: 5px; margin-inline-end: 7px; }
:root .fbw .fbw-lib-view__btn { padding-inline: 0.5rem; gap: 0; }
:root .fbw .fbw-lib-view__btn .fbw-icon { inline-size: 1.25rem; block-size: 1.25rem; }
:root .fbw .fbw-seg .fbw-lib-radio input:focus-visible + span { outline: 2px solid var(--base-ultra-dark); outline-offset: 1px; }
:root .fbw :is(.fbw-demo__group > span, .fbw-acct-pref__l, .fbw-lib-copybar__panel legend) { font-size: var(--text-xs); font-weight: 600; color: var(--heading-color); }
:root .fbw .fbw-lib-copybar__needs { font-size: var(--text-xs); } /* same note size as the template page */

/* style demo controls as a tidy grid (owner: «se sigue viendo desorganizado»): two columns, every switch as wide as
   its column so left and right edges line up — Look · Tone / Shape · Size / Hover; one column on phones */
:root .fbw .fbw-demo__controls { display: grid; grid-template-columns: max-content max-content; justify-content: start; gap: var(--space-s) var(--space-l); }
:root .fbw .fbw-demo__group { min-inline-size: 0; }
:root .fbw .fbw-demo__group .fbw-switch { display: flex; flex-wrap: nowrap; inline-size: 100%; }
:root .fbw .fbw-demo__group .fbw-switch button { flex: 1 1 auto; }
@media (max-width: 767px) {
  :root .fbw .fbw-demo__controls { grid-template-columns: minmax(0, 1fr); }
  :root .fbw .fbw-demo__group .fbw-switch { flex-wrap: wrap; }
}

/* two full rows, no empty corner (owner): Look · Tone / Shape · Size · Hover. Each group grows so both rows end at the
   same right edge; the switches fill their group. Phones: one group per row. */
:root .fbw .fbw-demo__controls { display: flex; flex-wrap: wrap; gap: var(--space-s); }
:root .fbw .fbw-demo__group { flex: 1 1 auto; }
@media (max-width: 767px) { :root .fbw .fbw-demo__group { flex-basis: 100%; } }
:root .fbw .fbw-demo__controls { column-gap: 0.75rem; }
:root .fbw .fbw-demo .fbw-switch button { padding-inline: 0.6rem; }
/* home: WooCommerce and plugin cards share one layout — icon, title, text, chips, image at the bottom */
.fbw .fbw-pw { display: flex; flex-direction: column; }
.fbw .fbw-pw .fbw-pw__chips { margin-block-start: var(--space-xs); }
.fbw .fbw-pw .fbw-card__frame { margin-block-start: auto; }
.fbw .fbw-pw > p { margin-block-end: 0; }

/* sticky header with a thin line under it (owner, 2026-10-19). --fbw-header-h (fbw.js) now stays at the header's
   height, so the library's sticky copy bar and the mobile menu sit right under it. */
.fbw #brx-header { position: sticky; top: 0; z-index: 900; background: var(--white); border-block-end: 1px solid var(--fbw-line-soft); }
.admin-bar.fbw #brx-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* the burger stays ink when the mobile menu is open (it turned yellow: never yellow on white) */
.fbw #brx-header .fbk-nav__toggle, .fbw #brx-header .fbk-nav__toggle:is(:hover, [aria-expanded="true"]) { color: var(--heading-color); }
.fbw #brx-header .fbk-nav__toggle svg :is(path, line, rect) { stroke: currentColor; }

/* icon audit (2026-10-19): the submenu toggles use the brand chevron (24 grid, 1.75) instead of Bricks' 12-grid arrow;
   mega menu card icons at 24, like every icon of their size class */
/* !! From here the WEB paints these icons (button::after with the brand masks) and hides the component's svg: any icon
   logic FBK Nav adds to its own svg (rotations, the open/close X…) does NOT reach fancybricks.co. Repeat it on the
   ::after below (as done for the mobile «sub-slide» arrows and the burger X, 2026-10-24) — and keep these rules when the
   component changes. To revisit in the move of the web to native Bricks styling (propuestas/lanzamiento-web.md). */
.fbw #brx-header .brx-submenu-toggle button > svg { display: none; }
.fbw #brx-header .brx-submenu-toggle button::after {
  content: ""; display: block; inline-size: 18px; block-size: 18px; background: currentColor;
  -webkit-mask: url("/wp-content/uploads/2026/10/ui-chevron-down.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/10/ui-chevron-down.svg") center / contain no-repeat;
  transition: rotate 350ms var(--fbw-ease-color, cubic-bezier(0.4, 0, 0.2, 1));
}
.fbw #brx-header .brx-submenu-toggle button[aria-expanded="true"]::after { rotate: 180deg; }
/* mobile menu (owner, 2026-10-24): with FBK Nav «sub-slide» the submenus slide in, so the brand chevron points forward
   (right) and, once a submenu is open, back (left) — what the component does to its own arrow, which the rule above
   hides. The burger becomes an X while the menu is open (.fbk-nav__toggle keeps aria-expanded). */
.fbw #brx-header .fbk-nav--sub-slide .brx-open .brx-submenu-toggle button::after { rotate: -90deg; }
.fbw #brx-header .fbk-nav--sub-slide .brx-open .brxe-dropdown.open > .brx-submenu-toggle button::after { rotate: 90deg; }
/* the burger itself (.fbk-nav__toggle) is NOT repainted any more (dropped 2026-10-24, templates session): the
   component's menu-button toggle now uses Bricks' own native "Bar" animation (two spans it morphs into an X on its
   own), not a static svg + our ::after. header_mega.py stopped forcing an icon on it (EDITS['k8co57']) to match. */
:root .fbw #brx-header .fbk-mcard__icon-box :is(svg, img) { inline-size: 24px !important; block-size: 24px !important; font-size: 24px; }

/* ---------- Mosaic intro (the canvases' intro; SISTEMA-UI «Mosaico de marca», variantes de lienzo) ----------
   ONE shared block: text 7 / mosaic 5 in `.fbw-intro`; inside it the mosaic stretches to the text's height and its
   bricks hold small UI pieces instead of photos: a label with the mini brick (__k), a short line (__t), chips, a live
   element filling the dominant brick (__a--fill), the yellow brick with an icon and a name (__pad--b), a dark dominant
   brick (__a--dark). The home keeps `.fbw-hero__grid` + `.fbw-mosaic--live`. First user: the plugin pages
   (web/build/page_plugin.py, 2026-10-19). */
/* text 1 : mosaic 1 (was 7 : 5; owner 2026-10-22: «que no hayan elementos muy estrechos»: at 5/12 the small bricks were
   148 px at 1440 and 114 px at 1024, too narrow for their line of text; web/build/mosaic-audit.mjs) */
.fbw .fbw-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xxl); align-items: stretch; }
.fbw .fbw-intro > .fbw-hero__text { justify-content: center; max-width: none; }
.fbw .fbw-intro .fbw-mosaic { aspect-ratio: auto; block-size: 100%; min-block-size: 25rem; }
.fbw .fbw-intro .fbw-mosaic__a { background: var(--base-ultra-light); display: grid; place-items: center; padding: var(--space-m); }
.fbw .fbw-intro .fbw-mosaic__a > * { min-inline-size: 0; }
.fbw .fbw-intro .fbw-mosaic__c { background: var(--base-ultra-light); }
.fbw .fbw-intro .fbw-mosaic__d { background: var(--primary-ultra-light); }
.fbw .fbw-intro .fbw-mosaic__e { display: block; padding: 0; }
.fbw .fbw-mosaic__a--fill { padding: 0 !important; display: block !important; position: relative; }
.fbw .fbw-mosaic__a--dark { background: var(--base-ultra-dark) !important; color: var(--white); }
.fbw .fbw-mosaic__pad { block-size: 100%; inline-size: 100%; padding: 0.875rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.375rem; }
.fbw .fbw-mosaic__pad--b { justify-content: flex-end; gap: var(--space-xs); color: var(--text-on-primary); }
.fbw .fbw-mosaic__bi { inline-size: 30px; block-size: 30px; flex: none; }
.fbw .fbw-mosaic__bl { font-size: var(--text-xs); font-weight: 600; line-height: 1.25; color: var(--text-on-primary); }
.fbw .fbw-mosaic__k { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); font-weight: 500; line-height: 1.3; color: var(--text-color); }
.fbw .fbw-mosaic__k::before { content: ""; flex: none; width: 5px; height: 8px; border-radius: 1.5px; background: var(--primary); }
.fbw .fbw-mosaic__t { font-size: var(--text-s); font-weight: 600; line-height: 1.3; color: var(--heading-color); }
.fbw :is(.fbw-mosaic__e, .fbw-mosaic__a--dark) .fbw-mosaic__k { color: #bfbfbf; }
.fbw :is(.fbw-mosaic__e, .fbw-mosaic__a--dark) .fbw-mosaic__t { color: var(--white); }
.fbw .fbw-mosaic__chips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.fbw .fbw-mosaic__chips li { font-size: var(--text-xs); font-weight: 500; line-height: 1.2; color: var(--heading-color); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--fbw-line); background: var(--white); white-space: nowrap; }
.fbw .fbw-mosaic__cd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.75rem; }
.fbw .fbw-mosaic__cd b { display: block; font-size: 1.375rem; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--heading-color); font-variant-numeric: tabular-nums; }
.fbw .fbw-mosaic__cd small { display: block; margin-block-start: 3px; font-size: 0.6875rem; font-weight: 500; color: var(--text-color); }
.fbw .fbw-mosaic__cd--big { gap: var(--space-s) var(--space-l); }
.fbw .fbw-mosaic__cd--big b { font-size: var(--h3); }
.fbw .fbw-mosaic__btn { inline-size: 44px; block-size: 44px; flex: none; padding: 0; border-radius: 50%; border: 0; background: var(--white); box-shadow: var(--fbw-shadow-s); display: grid; place-items: center; color: var(--heading-color); cursor: pointer; transition: background-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-mosaic__btn svg { inline-size: 20px; block-size: 20px; }
.fbw .fbw-mosaic__btn:hover { background: var(--primary); }
/* below 1280 the intro stacks: side by side the bricks fell under 140 px (audit) */
@media (max-width: 1279px) {
  .fbw .fbw-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  /* rows that grow with their content: a fixed ratio cut the dominant brick's live element (audit, 1024) */
  .fbw .fbw-intro .fbw-mosaic { block-size: auto; min-block-size: 0; aspect-ratio: auto; grid-template-rows: repeat(6, minmax(4.5rem, auto)); }
  /* …but a brick holding a photo or a live element doesn't push its rows with the image's own height (a wishlist
     photo made the brick 825 px tall): it takes a fixed height and the photo fills it */
  .fbw .fbw-intro .fbw-mosaic > .fbw-mosaic__a:has(img, iframe, video) { contain: size; min-block-size: 24rem; }
  /* the brick is now wider than tall: its photo shrinks into the height left by its caption instead of keeping a
     portrait ratio and spilling out (wishlist 4:5 card, framework screenshots) */
  .fbw .fbw-intro .fbw-mosaic > .fbw-mosaic__a > div:has(> img) { block-size: 100%; display: flex; flex-direction: column; min-block-size: 0; }
  .fbw .fbw-intro .fbw-mosaic > .fbw-mosaic__a > div:has(> img) > img { flex: 1 1 0; min-block-size: 0; block-size: auto; aspect-ratio: auto; object-fit: cover; }
}
@media (max-width: 767px) {
  /* phones: no fixed rows. The dominant brick first, then the two text bricks side by side, then yellow + chips */
  .fbw .fbw-intro .fbw-mosaic { aspect-ratio: auto; grid-template-rows: auto; grid-auto-rows: auto; gap: var(--space-xs); }
  .fbw .fbw-intro .fbw-mosaic > .fbw-mosaic__a { grid-area: auto; grid-row: 1; grid-column: 1 / -1; padding: var(--space-s); }
  .fbw .fbw-intro .fbw-mosaic > .fbw-mosaic__a--fill { aspect-ratio: 16 / 10; }
  .fbw .fbw-intro .fbw-mosaic > .fbw-mosaic__d { grid-area: auto; grid-row: 2; grid-column: 1 / 4; }
  .fbw .fbw-intro .fbw-mosaic > .fbw-mosaic__e { grid-area: auto; grid-row: 2; grid-column: 4 / -1; }
  .fbw .fbw-intro .fbw-mosaic > .fbw-mosaic__b { grid-area: auto; grid-row: 3; grid-column: 1 / 4; min-block-size: 4.75rem; }
  .fbw .fbw-intro .fbw-mosaic > .fbw-mosaic__c { grid-area: auto; grid-row: 3; grid-column: 4 / -1; }
  .fbw .fbw-mosaic__pad--b { justify-content: center; }
  .fbw .fbw-mosaic__chips { flex-direction: row; flex-wrap: wrap; }
}

/* Fancy Breadcrumb (the plugin's element) on the blog posts. Owner 2026-10-20. A level with siblings = its link, then
   a native <details> whose summary is the arrow alone (plugin patch 1.5.2: no link inside <summary>) */
.fbw .fbw-bcl { font-size: var(--text-s); line-height: 1.4; }
.fbw .fbw-bcl .fb-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.fbw .fbw-bcl .fb-breadcrumb__link { color: var(--text-color); text-decoration: none; transition: color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-bcl .fb-breadcrumb__link:hover { color: var(--heading-color); }
.fbw .fbw-bcl .fb-breadcrumb__separator { color: var(--fbw-line); }
.fbw .fbw-bcl .fb-breadcrumb__current { color: var(--heading-color); font-weight: 600; }
.fbw .fbw-bcl .fb-breadcrumb__dropdown { position: relative; gap: 2px; }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-details { position: static; }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-summary { display: inline-flex; align-items: center; gap: 4px; min-block-size: 24px; min-inline-size: 24px; justify-content: center; border-radius: 6px; cursor: pointer; list-style: none; transition: background-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-summary:has(> .fb-breadcrumb__dropdown-arrow:only-child):hover { background: var(--base-ultra-light); }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-summary::-webkit-details-marker { display: none; }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-summary:focus-visible { outline: 2px solid var(--base-ultra-dark); outline-offset: 2px; }
.fbw .fbw-bcl .fb-breadcrumb__dropdown:has(details[open]) > .fb-breadcrumb__link, .fbw .fbw-bcl details[open] > .fb-breadcrumb__dropdown-summary { color: var(--heading-color); }
/* the plugin draws the arrow in a gray circle: here it is a plain chevron (it still turns when open) */
.fbw .fbw-bcl .fb-breadcrumb__dropdown-arrow { display: inline-flex; padding: 0; aspect-ratio: auto; background: none; border-radius: 0; transition: transform var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-arrow svg { display: block; }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-arrow svg path { stroke: currentColor; }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-list { position: absolute; z-index: 5; inset-inline-start: 0; inset-block-start: calc(100% + 6px); inline-size: max-content; max-inline-size: min(300px, calc(100vw - 32px)); margin: 0; padding: 6px; list-style: none; border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); background: var(--white); box-shadow: var(--fbw-shadow-m); }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-link { display: block; padding: 6px 10px; border-radius: 8px; color: var(--heading-color); text-decoration: none; transition: background-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-bcl .fb-breadcrumb__dropdown-link:hover { background: var(--base-ultra-light); }

/* ---------- The ONE hover of every card that is a link (owner, 2026-10-20: «aplica ese mismo concepto a todas las
   tarjetas que tienen efecto hover y enlace… unificar todo bajo el mismo concepto»). Nothing lifts, nothing casts a
   shadow. The logo's brackets close in on both sides (3 px, radius 12) and:
   - a card with an icon or only text (feature cards, the mega menu's cards, the plugin's mini cards, a blog card
     without a picture): its edge darkens, the icon's
     tile fills yellow (its brick turns white) and the brackets sit inside the card in ink at 12 %;
   - a card with a picture (template, library and blog cards): the frame's edge darkens and the brackets sit inside
     the picture in yellow, the only color that reads on any screenshot.
   The arrow moves as before. One duration, the house curve; reduced motion drops the travel, keeps the fade. */
/* the bracket's defaults at the lowest specificity (0,1,0), so every size override below wins whatever the list holds */
.fbw :where(a.fbw-feature, a.fbw-cmp-row, a.fbw-plugin-mini, .fbk-header .fbk-mcard, .fbw-blog-card, .fbw-card__frame, .fbw-lib-card__frame, .fbw-blog-card__frame) {
  --fbw-hb-color: rgba(33, 34, 36, 0.12); --fbw-hb-inset: 12px; --fbw-hb-w: 18px; --fbw-hb-r: 12px; --fbw-hb-b: 3px;
}
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card:not(:has(.fbw-blog-card__frame)), .fbw .fbw-card__frame, .fbw .fbw-lib-card__frame, .fbw .fbw-blog-card__frame) {
  position: relative; overflow: hidden; isolation: isolate;
}
:is(.fbw .fbw-card .fbw-card__frame, .fbw .fbw-lib-card .fbw-lib-card__frame, .fbw .fbw-blog-card .fbw-blog-card__frame) { --fbw-hb-color: var(--primary); }  /* (0,3,0): beats the list's a.fbw-feature (0,2,1) */
:is(.fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard) { --fbw-hb-inset: 5px; --fbw-hb-w: 8px; --fbw-hb-r: 6px; --fbw-hb-b: 2px; }  /* small cards: a thinner bracket (owner, 2026-10-20) */
/* small cards take the framework's inner radius (owner, 2026-10-20: «las tarjetas pequeñas… un border radius menor, puede
   ser el inside»); Fancy Framework's --radius-inside = --radius × 0.5, the same formula as the fallback */
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard { --fbk-ui-radius: var(--radius-inside, calc(var(--radius) * 0.5)); }
.fbw a.fbw-plugin-mini { border-radius: var(--radius-inside, calc(var(--radius) * 0.5)); }
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card:not(:has(.fbw-blog-card__frame)), .fbw .fbw-card__frame, .fbw .fbw-lib-card__frame, .fbw .fbw-blog-card__frame)::before,
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card:not(:has(.fbw-blog-card__frame)), .fbw .fbw-card__frame, .fbw .fbw-lib-card__frame, .fbw .fbw-blog-card__frame)::after {
  content: ""; position: absolute; inset-block: var(--fbw-hb-inset); inline-size: var(--fbw-hb-w); border: var(--fbw-hb-b) solid var(--fbw-hb-color);
  background: none; clip-path: none; opacity: 0; pointer-events: none;
  transition: opacity var(--fbw-t-l) var(--ease-brand), translate var(--fbw-t-l) var(--ease-brand);
}
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card)::before, :is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card)::after { z-index: -1; }
:is(.fbw .fbw-card__frame, .fbw .fbw-lib-card__frame, .fbw .fbw-blog-card__frame)::before, :is(.fbw .fbw-card__frame, .fbw .fbw-lib-card__frame, .fbw .fbw-blog-card__frame)::after { z-index: 2; }
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card:not(:has(.fbw-blog-card__frame)), .fbw .fbw-card__frame, .fbw .fbw-lib-card__frame, .fbw .fbw-blog-card__frame)::before { inset-inline-start: var(--fbw-hb-inset); border-inline-end: 0; border-radius: var(--fbw-hb-r) 0 0 var(--fbw-hb-r); translate: -10px 0; }
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card:not(:has(.fbw-blog-card__frame)), .fbw .fbw-card__frame, .fbw .fbw-lib-card__frame, .fbw .fbw-blog-card__frame)::after { inset-inline-end: var(--fbw-hb-inset); inset-inline-start: auto; border-inline-start: 0; border-radius: 0 var(--fbw-hb-r) var(--fbw-hb-r) 0; translate: 10px 0; }
/* the states that show it */
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card:not(:has(.fbw-blog-card__frame))):is(:hover, :has(a:focus-visible))::before,
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card:not(:has(.fbw-blog-card__frame))):is(:hover, :has(a:focus-visible))::after,
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard):focus-visible::before,
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard):focus-visible::after,
:is(.fbw .fbw-card:hover, .fbw .fbw-card:focus-visible, .fbw .fbw-lib-card:not(.fbw-lib--list *):hover, .fbw .fbw-lib-card:not(.fbw-lib--list *):has(.fbw-lib-card__title a:focus-visible), .fbw .fbw-blog-card:hover, .fbw .fbw-blog-card:has(.fbw-blog-card__title a:focus-visible)) :is(.fbw-card__frame, .fbw-lib-card__frame, .fbw-blog-card__frame)::before,
:is(.fbw .fbw-card:hover, .fbw .fbw-card:focus-visible, .fbw .fbw-lib-card:not(.fbw-lib--list *):hover, .fbw .fbw-lib-card:not(.fbw-lib--list *):has(.fbw-lib-card__title a:focus-visible), .fbw .fbw-blog-card:hover, .fbw .fbw-blog-card:has(.fbw-blog-card__title a:focus-visible)) :is(.fbw-card__frame, .fbw-lib-card__frame, .fbw-blog-card__frame)::after { opacity: 1; translate: 0 0; }
/* a feature card that also holds a picture (home «WooCommerce» and «plugin»): only the card's brackets */
.fbw a.fbw-feature .fbw-card__frame::before, .fbw a.fbw-feature .fbw-card__frame::after { display: none; }
/* edges */
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard) { transition: border-color var(--fbw-t-s) var(--fbw-ease-color); }
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini):is(:hover, :focus-visible) { border-color: var(--fbw-line); }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard:is(:hover, :focus-visible) { --fbk-ui-state-bg: transparent; --fbk-ui-state-border: var(--fbw-line); }
/* the component's «Fill» variant grows a circle from the icon and turns the text to the fill's ink: on the web the
   ::before is a bracket, so the text keeps its colors */
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard.fbk-mcard--fill:is(:hover, :focus-visible) { color: inherit; }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard.fbk-mcard--fill:is(:hover, :focus-visible) :is(.fbk-mcard__title, .fbk-mcard__icon) { color: var(--heading-color); }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard.fbk-mcard--fill:is(:hover, :focus-visible) .fbk-mcard__text { color: var(--text-color); }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard.fbk-mcard--fill:is(:hover, :focus-visible) .fbk-mcard__badge { --fbk-ui-state-fg: var(--heading-color); --fbk-ui-state-bg: var(--primary-ultra-light); }
:is(.fbw .fbw-card:hover, .fbw .fbw-card:focus-visible) .fbw-card__frame, .fbw .fbw-lib-card:not(.fbw-lib--list *):hover .fbw-lib-card__frame { outline-color: var(--fbw-line); }
.fbw .fbw-blog-card:hover { border-color: var(--fbw-line); }
/* the icon: its tile fills yellow, its brick turns white (the mega card's bare icon gets the tile on hover, no shift) */
:is(.fbw a.fbw-feature, .fbw a.fbw-plugin-mini) .fbw-tile { transition: background-color var(--fbw-t-s) var(--fbw-ease-color); }
:is(.fbw a.fbw-feature, .fbw a.fbw-plugin-mini):is(:hover, :focus-visible) .fbw-tile { background: var(--primary); }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard__icon-box { position: relative; isolation: isolate; }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard__icon-box::before { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 10px; background: var(--primary); opacity: 0; transition: opacity var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard:is(:hover, :focus-visible) .fbk-mcard__icon-box::before { opacity: 1; }
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard) .fbw-icon__accent { transition: fill var(--fbw-t-s) var(--fbw-ease-color); }
:is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard):is(:hover, :focus-visible) .fbw-icon__accent { fill: var(--white); }
.fbw a.fbw-feature:focus-visible, .fbw a.fbw-plugin-mini:focus-visible { outline: 2px solid var(--base-ultra-dark); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  :is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card:not(:has(.fbw-blog-card__frame)), .fbw .fbw-card__frame, .fbw .fbw-lib-card__frame, .fbw .fbw-blog-card__frame)::before,
  :is(.fbw a.fbw-feature, .fbw a.fbw-cmp-row, .fbw a.fbw-plugin-mini, .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard, .fbw .fbw-blog-card:not(:has(.fbw-blog-card__frame)), .fbw .fbw-card__frame, .fbw .fbw-lib-card__frame, .fbw .fbw-blog-card__frame)::after { translate: none; }
}

/* ---------- Home «Built on your CSS framework»: the same card's CSS in the three frameworks ---------- */
.fbw .fbw-fwswap { display: grid; gap: var(--space-s); }
.fbw .fbw-fwswap .fbw-switch { justify-self: start; }
.fbw .fbw-fwswap__code { border-radius: var(--fbw-radius-l); background: var(--base-ultra-dark); color: #d6d6d6; overflow: hidden; }
.fbw .fbw-fwswap__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--space-s); padding: 0.85rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--text-xs); color: #bfbfbf; }
.fbw .fbw-fwswap__head b { color: var(--white); font-family: var(--font-mono); font-weight: 400; }
.fbw .fbw-fwswap pre { margin: 0; padding: 1.25rem; overflow-x: auto; background: none; font-family: var(--font-mono); font-size: var(--text-s); line-height: 1.7; tab-size: 2; }
.fbw .fbw-fwswap pre code { font: inherit; background: none; border: 0; padding: 0; color: inherit; }
/* Bricks colors a bare <pre> (its Code element styles): the code panel sets its own ink */
.fbw .fbw-fwswap .fbw-fwswap__code pre { color: #d6d6d6; }
.fbw .fbw-fwswap__s { color: var(--white); }
.fbw .fbw-fwswap__v { color: var(--primary); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary) 60%, transparent); }
.fbw .fbw-fwswap__legend { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--text-xs); color: var(--text-color); }
.fbw .fbw-fwswap__legend span { inline-size: 14px; block-size: 3px; border-radius: 2px; background: var(--primary); }

/* ---------- A white panel that holds chips next to a heading (home «Native Bricks components») ---------- */
.fbw .fbw-panel { display: grid; gap: var(--space-s); padding: var(--space-l); border-radius: var(--fbw-radius-l); background: var(--white); border: 1px solid var(--fbw-line-soft); }
.fbw .fbw-panel__k { margin: 0; font-size: var(--text-s); font-weight: 600; color: var(--heading-color); }
.fbw .fbw-fwswap pre { white-space: pre; }
.fbw .fbw-fwswap__short { display: none; }
@media (max-width: 600px) {
  .fbw .fbw-fwswap .fbw-switch { display: flex; justify-self: stretch; }
  .fbw .fbw-fwswap .fbw-switch button { flex: 1 1 0; }
  .fbw .fbw-fwswap__long { display: none; }
  .fbw .fbw-fwswap__short { display: inline; }
  .fbw .fbw-fwswap pre { padding: 1rem; font-size: var(--text-xs); }
  .fbw .fbw-fwswap__head { padding: 0.75rem 1rem; }
}

/* ---------- Nav: the brand's mini brick instead of the underline (owner, 2026-10-20: «cambia los underline hover del
   nav por algo de la marca… el ladrillo lateral»). The same yellow brick that marks the chosen segment and every
   eyebrow: it sits left of the label (no shift), grows in on hover, keyboard focus, an open menu and the current page. */
.fbw #brx-header .fbk-nav--underline .fbk-nav__link::after, .fbw #brx-header .fbk-nav--underline .fbk-nav__dropdown>.brx-submenu-toggle>:first-child::after, .fbw #brx-header .fbk-nav--underline :where(.fbk-nav__menu) .bricks-nav-menu>li>a::after, .fbw #brx-header .fbk-nav--underline :where(.fbk-nav__menu) .bricks-nav-menu>li>.brx-submenu-toggle>a::after {
  inset: 50% auto auto -12px; inline-size: 5px; block-size: 8px; border-radius: 1.5px; background-color: var(--primary);
  transform: scale(0.4); transform-origin: center; opacity: 0; translate: 0 -50%;
  transition: transform var(--fbw-t-s) var(--ease-brand), opacity var(--fbw-t-s) var(--fbw-ease-color);
}
.fbw #brx-header .fbk-nav--underline .fbk-nav__link:is(:hover,:focus-visible,[aria-current="page"])::after, .fbw #brx-header .fbk-nav--underline .fbk-nav__dropdown:is(:hover,.open)>.brx-submenu-toggle>:first-child::after, .fbw #brx-header .fbk-nav--underline :where(.fbk-nav__menu) .bricks-nav-menu>li>a:is(:hover,:focus-visible,[aria-current="page"])::after, .fbw #brx-header .fbk-nav--underline :where(.fbk-nav__menu) .bricks-nav-menu>li:is(:hover,.open,.current-menu-ancestor)>.brx-submenu-toggle>a::after, .fbw #brx-header .fbk-nav--underline :where(.fbk-nav__menu) .bricks-nav-menu>li>.brx-submenu-toggle:focus-within>a::after { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fbw #brx-header .fbk-nav--underline .fbk-nav__link::after, .fbw #brx-header .fbk-nav--underline .fbk-nav__dropdown>.brx-submenu-toggle>:first-child::after, .fbw #brx-header .fbk-nav--underline :where(.fbk-nav__menu) .bricks-nav-menu>li>a::after, .fbw #brx-header .fbk-nav--underline :where(.fbk-nav__menu) .bricks-nav-menu>li>.brx-submenu-toggle>a::after { transform: none; } }

/* Ghost button with brackets (header «My account»): on hover the brackets are the sign, the underline goes
   (owner, 2026-10-20: «al hacer hover creo que sobra el underline») */
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--ghost.fbk-btn--brackets:is(:hover, :focus-visible) { --fbk-btn-line: transparent; }

/* a linked card with its own CTA label (/frameworks/): one arrow, the CTA's, moving with the card's hover */
.fbw a.fbw-feature:has(.fbw-link--arrow) .fbw-card__title::after { display: none; }
.fbw a.fbw-feature:is(:hover, :focus-visible) .fbw-link--arrow::after { translate: 3px 0; }
.fbw a.fbw-feature .fbw-link--arrow { margin-block-start: auto; color: var(--heading-color); }

/* ---------- Edges of white boxes (owner, 2026-10-20: «unas tarjetas tienen borde y otras no»): on a white section a
   1 px --fbw-line-soft edge, on a soft section none (the gray already draws it); on hover the edge goes to --fbw-line.
   The FBK components pasted on the web (steps cards, quotes, the log-in card) follow it instead of their own 20 % ink
   edge and their ink hover edge. The plans keep theirs (--fbw-line; the featured one 2 px ink). */
.fbw .fbk-ui:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):is(.fbk-card, .fbk-quote, .fbk-logreg__card) { --fbk-ui-border: var(--fbw-line-soft); --fbk-ui-border-hover: var(--fbw-line); }
.fbw .fbk-accordion__item:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { border-color: var(--fbw-line-soft); }
.fbw :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))) .fbk-ui:is(.fbk-card, .fbk-quote) { --fbk-ui-border: transparent; }
.fbw :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))) .fbk-accordion__item { border-color: transparent; }
.fbw :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))) :is(.fbw-panel, .fbw-demo, .fbw-plan-note, .fbw-plugin-mini, .fbw-plugin-strip, .fbw-plugin-use__frame, .fbw-plugin-ecard__frame, .fbw-feature, .fbw-blog-card, .fbw-checks > li) { border-color: transparent; }
/* steps cards (cards-steps): the template's hover edge is ink; on the web it is the house --fbw-line, and its brackets
   are a step in so they clear the text (its padding is tighter than a feature card's) */
/* steps aren't links (owner, 2026-10-20): the template's own hover only — the number and its line light up — with no
   brackets and no edge change; the card keeps its resting edge */
.fbw main .fbk-stepcards:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-stepcards__step:hover .fbk-card { --fbk-ui-state-border: var(--fbk-ui-border); }
/* collapsed reviews: the button sits on the fade, not a section's gap below it (owner, 2026-10-20: «este espacio es muy
   grande»), and open it stays as close under the wall */
.fbw .fbw-expand__row { position: relative; z-index: 1; margin-top: calc(var(--space-xl) * -1); }  /* 32 px under the wall, open or not */

/* ---------- Audit 2 (2026-10-20) ---------- */
/* A3: one hover time for the pasted FBK pieces (menu, FAQ, steps, buttons, cards): every one reads --fbk-hover */
body.fbw { --fbk-hover: var(--fbw-t-s); }
.fbw :is(.fbk-header, .fbk-accordion, .fbk-stepcards, .fbk-compare):where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { --fbk-ease: var(--fbw-ease-color); }
/* M10: FBK buttons inherit Bricks' 0.5 px tracking; the web's text has none */
.fbw .fbk-btn:not(.fbw-demo-palette *) { letter-spacing: normal; }
/* mega cards: a token edge (the component's was ink at 20 %); the dark «Get the full library» card keeps no light edge */
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-mcard { --fbk-ui-border: var(--fbw-line-soft); --fbk-ui-border-hover: var(--fbw-line); }
.fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) :is(.fbk-card--solid, .fbk-scheme--dark) { border-color: transparent; }
/* white pieces on soft backgrounds: no edge (countdown boxes, the wishlist card's picture) */
.fbw :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))) :is(.fbw-plugin-cd .fb-countdown__item) { border-color: transparent; }
.fbw :is(.fbw-section--soft, .fbk-section--soft:where(:not(.fbw-demo-palette, .fbw-demo-palette *))) .fbw-plugin-pcard__img { outline-color: transparent; }

/* Icon audit (2026-10-20): the brand keeps round for avatars, radio buttons, rings and pills; the small boxes of the
   pasted FBK pieces that came round (Shape: Round) take the inner radius instead — FAQ markers, the comparison table's
   checks, the mega menu's icon items */
.fbw :is(.fbk-accordion__marker, .fbk-compare .fbk-ui__box, .fbk-icon-item__icon):where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { --fbk-ui-radius: var(--radius-inside, calc(var(--radius) * 0.5)); border-radius: var(--radius-inside, calc(var(--radius) * 0.5)); }

/* /plugin/ element cards (owner, 2026-10-20: «necesitan un estilo hover y debe poderse dar click en cualquier parte del
   contenido»). The frame holds the live element, so it stays the element (drag, spin, open); everything else in the
   card is the link (the title's link stretched under the frame). Hover = the house hover of a card with a picture:
   yellow brackets inside the frame, its edge darkens, the arrow moves. */
.fbw .fbw-plugin-ecard:has(h3 a) { position: relative; }
.fbw .fbw-plugin-ecard h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.fbw .fbw-plugin-ecard:has(h3 a) .fbw-plugin-ecard__frame { z-index: 2; isolation: isolate; transition: border-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-plugin-ecard:has(h3 a) .fbw-plugin-ecard__frame::before, .fbw .fbw-plugin-ecard:has(h3 a) .fbw-plugin-ecard__frame::after {
  content: ""; position: absolute; z-index: 3; inset-block: 12px; inline-size: 18px; border: 3px solid var(--primary); opacity: 0; pointer-events: none;
  transition: opacity var(--fbw-t-l) var(--ease-brand), translate var(--fbw-t-l) var(--ease-brand);
}
.fbw .fbw-plugin-ecard:has(h3 a) .fbw-plugin-ecard__frame::before { inset-inline-start: 12px; border-inline-end: 0; border-radius: 12px 0 0 12px; translate: -10px 0; }
.fbw .fbw-plugin-ecard:has(h3 a) .fbw-plugin-ecard__frame::after { inset-inline-end: 12px; border-inline-start: 0; border-radius: 0 12px 12px 0; translate: 10px 0; }
.fbw .fbw-plugin-ecard:has(h3 a):is(:hover, :focus-within) .fbw-plugin-ecard__frame::before,
.fbw .fbw-plugin-ecard:has(h3 a):is(:hover, :focus-within) .fbw-plugin-ecard__frame::after { opacity: 1; translate: 0 0; }
.fbw .fbw-plugin-ecard:has(h3 a):hover .fbw-plugin-ecard__frame { border-color: var(--fbw-line); }
.fbw .fbw-plugin-ecard:has(h3 a):is(:hover, :focus-within) h3 a::after { translate: 3px 0; background: var(--heading-color); }
@media (prefers-reduced-motion: reduce) { .fbw .fbw-plugin-ecard__frame::before, .fbw .fbw-plugin-ecard__frame::after { translate: none !important; } }

/* Widget demos fit one screen (owner, 2026-10-20: «no cabe en la pantalla»): the live element in a demo is 16:9 and
   never taller than the window minus the header, the demo bar and the demo's padding; narrower, centered */
.fbw .fbw-plugin-demo [data-fbw-pane] > :is(.fbw-plugin-cmp, .fbw-plugin-360, .fbw-plugin-pano) {
  inline-size: 100%; max-inline-size: calc((100svh - var(--fbw-header-h, 76px) - 15rem) * 16 / 9); margin-inline: auto;
}
.fbw .fbw-plugin-demo .fbw-plugin-cmp .fb-comparison__images { aspect-ratio: 16 / 9; }
.fbw .fbw-plugin-demo .fbw-plugin-cmp .fb-comparison__images img { object-fit: cover; block-size: 100%; }

/* ONE segmented control (owner, 2026-10-20: «en las demos el toggle es diferente»): the track is gray on white; on a
   soft surface (soft sections, the plugin demos, the copy bar) it is the copy bar's slightly darker gray, so the white
   chosen option always stands out. Never a white track (the demos had one: white chosen on white). */
:root .fbw :is(.fbw-section--soft, .fbk-section--soft, .fbw-plugin-demo, .fbw-lib-copybar, .fbw-vars, .fbw-mosaic__c) :is(.fbw-switch, .fbw-acct-seg, .fbw-seg, .fbw-lib-view, .fbw-single-seg):not(:is(.fbw-demo, .fbw-panel, .fbw-feature, .fbk-card, .fbw-fwswap, .fbw-single-copy) *) {
  /* 7 % over white (240 on 245) didn't show (owner, 2026-10-22: «sobre gris debería ser un poco más oscuro para que
     se note»): 9 % over the soft gray and the stronger edge */
  background: color-mix(in srgb, var(--base-ultra-dark) 9%, var(--base-ultra-light)); border-color: var(--fbw-line);
}

/* ---------- CTAs (W25, 2026-10-20; web/REVISION-CTAS.md, SISTEMA-UI «CTAs y siguiente paso») ----------
   A next step under a grid (.fbw-next) sits closer to what it follows than a new block would; actions in a dark
   closing are centered; links on the dark frame are white; lifetime is offered only inside the Black Friday window
   (body class fbw-lifetime-sale, fbw-web.php), otherwise «Back on special dates». */
.fbw .fbw-container > .fbw-next { margin-block-start: calc(var(--space-l) - var(--space-xl)); }
.fbw .fbk-section__container:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) > .fbw-next { margin-block-start: calc(-1 * var(--space-l)); }   /* in a 3.0 template (gap 96 px) */
.fbw .fbw-next { column-gap: var(--space-m); }
.fbw .fbw-row > .fbw-small { margin: 0; }
.fbw .fbw-row--center { justify-content: center; }
.fbw .fbw-frame-dark .fbw-row { column-gap: var(--space-m); }
.fbw .fbw-frame-dark .fbw-link { color: var(--white); text-decoration-color: rgb(255 255 255 / 0.4); }
.fbw .fbw-frame-dark .fbw-link:hover { text-decoration-color: var(--white); }
.fbw .fbw-hero__note .fbw-link { font-weight: inherit; }
.fbw .fbw-pw .fbw-pw__plan { font-size: var(--text-s); color: var(--heading-color); font-weight: 500; }
.fbw .fbw-lt { display: grid; }
.fbw .fbw-lt > .fbw-lt-cta, .fbw .fbw-lt > .fbw-lt-cta > * { inline-size: 100%; }
.fbw:not(.fbw-lifetime-sale) :is(.fbw-lt-cta, .fbw-pricing-top a[href*="/black/"]) { display: none; }
.fbw.fbw-lifetime-sale .fbw-lt-later { display: none; }

/* 360 spin frames crop from the center (an inherited object-position: 0% cut the car's front in the hero brick) */
.fbw .fbw-plugin-360 .fb-360__frame { object-position: 50% 50%; }

/* plugin pages: the line to the plans under «Settings you'll find in Bricks» (W25) */
.fbw .fbw-plugin-plans { margin: 0; text-align: center; font-size: var(--text-s); color: var(--text-color); }
.fbw .fbw-plugin-plans .fbw-link--arrow { display: inline-flex; margin-inline-start: 0.25rem; color: var(--heading-color); }

/* Interior heros (M4) — owner, 2026-10-20, «Según la página»: never a hero with the right half empty.
   · `.fbw-hero--mosaic` (/free/, /frameworks/ and its three children; web/build/page_frameworks.py mosaic_hero()):
     the shared «Intro con mosaico» above, bricks = real pieces of the page: a real template screenshot framed whole
     (__fig + __shot), the yellow brick with a duotone icon (its accent white on the yellow), chips (__chips li.fbw-on =
     the page's framework, ink), a dark brick with real variable names (__code, the converted one underlined, __v).
     The hero's main button may be the yellow one: the brick is decoration, not a button. No entrance animation of
     its own (the shared «pieces fit» of the mosaic is the only one).
   · `.fbw-hero--center` (text pages: /support/, /blog/, category, author and date archives): the text column
     centered, rows and breadcrumb too. */
.fbw .fbw-hero--mosaic .fbw-hero__text > h1 { text-wrap: balance; }
.fbw .fbw-hero--mosaic .fbw-lead { max-width: 38rem; }
.fbw .fbw-hero--mosaic .fbw-eyebrow a { color: inherit; text-decoration: none; }
.fbw .fbw-hero--mosaic .fbw-eyebrow a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fbw .fbw-mosaic__fig { inline-size: 100%; display: grid; gap: 0.625rem; justify-items: start; }
.fbw .fbw-mosaic .fbw-mosaic__shot { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; border-radius: calc(var(--radius) * 0.6); border: 1px solid var(--fbw-line-soft); background: var(--white); }
.fbw .fbw-mosaic__b .fbw-icon__accent { fill: var(--white); }
.fbw .fbw-mosaic__chips li.fbw-on { background: var(--base-ultra-dark); border-color: var(--base-ultra-dark); color: var(--white); }
.fbw .fbw-mosaic__code { display: block; margin: 0; padding: 0; background: none; border: 0; color: #d6d6d6; font-family: var(--font-mono); font-size: clamp(0.625rem, 7cqi, 0.8125rem); line-height: 1.6; white-space: nowrap; }
.fbw .fbw-mosaic__v { color: var(--white); box-shadow: inset 0 -2px 0 var(--primary); }
.fbw .fbw-hero--center .fbw-hero__text { margin-inline: auto; align-items: center; text-align: center; }
.fbw .fbw-hero--center .fbw-hero__text > :is(.fbw-row, .fbw-blog-crumbs) { justify-content: center; }

/* Audit 2 — rest (M3–M11, B) */
/* M5: one gap from an intro to what it introduces, --space-xl (64 px), for the own .fbw-heading (the container's gap)
   and the pasted FBK Intro (its section's gap was 96; the FAQ with search, 40 to the search box) */
.fbw .fbk-section__container:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) > .fbk-intro { margin-block-end: calc(var(--space-xl) - var(--fbk-section-gap, var(--space-xl))); }
.fbw .fbk-faqsearch:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) > .fbk-intro { margin-block-end: calc(var(--space-xl) - var(--space-l)); }
/* M5 eyebrow rule [approved by the owner 2026-10-20, SISTEMA-UI «Intro de sección»]: the eyebrow names the page
   above its H1 (heroes, /pricing/'s table intro); a section's H2 goes without. The generators no longer write one
   (FBK Intro «Hide eyebrow» on, head() without eb=): this stays as a safety net for a pasted template's own. */
.fbw main :is(.fbw-section:not(.fbw-hero), .fbk-section) .fbw-heading:not(:has(h1)) .fbw-eyebrow,
.fbw main .fbk-intro:not(:has(h1)):not(.fbw-demo-palette *) .fbk-intro__eyebrow[class] { display: none; }  /* a component demo (the FBK Intro page's examples) shows the library as it is (2026-10-22) */   /* [class]: over the pill-outline dress (0,4,0) */
/* M6: home «Accessible and clean by default» is the section's title: H2 at --h2 (it was --h3) */
.fbw .fbw-feature--intro h2 { font-size: var(--h2); line-height: 1.1; }
/* M11: the phone menu's items on the page gutter (16–374 at 390, they were 12–378), and every top link in ink */
.fbw #brx-header .brx-open > .fbk-nav__list { padding-inline: max(var(--fbw-gutter), calc(50% - 20em)); }
.fbw #brx-header .fbk-nav__list > li > :is(a, .brx-submenu-toggle) { color: var(--heading-color); }
/* B1: the focus ring appears at once: the FAQ search field animated `all` (the outline too) */
.fbw .fbk-faqsearch:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) input { transition-property: color, background-color, border-color, box-shadow; }
/* B7: buttons keep their height on a phone (M 45 → 48, S 33 → 35) */
.fbw .fbk-btn:not(.fbw-demo-palette *) { min-block-size: 3rem; }
.fbw .fbk-btn:not(.fbw-demo-palette *).fbk-btn--s { min-block-size: 2.1875rem; }
/* B11: the real Bricks panel screenshots sit on the panel's own dark (the image's background), as a token */
body.fbw { --fbw-shot-bg: #17191c; }
/* B12: mega menu link rows on the inner radius (they were 14 px) */
.fbw #brx-header .fbk-links a { border-radius: var(--radius-inside, calc(var(--radius) * 0.5)); }
/* 1024–1279: the mosaic column is ~380 px, its two-column bricks ~115 px: chips may wrap inside their pill and the
   text bricks lose a little padding, so no chip or variable name is clipped */
@media (min-width: 1024px) and (max-width: 1279px) {
  .fbw .fbw-hero--mosaic .fbw-mosaic__chips li { white-space: normal; padding-inline: 8px; }
  .fbw .fbw-hero--mosaic .fbw-mosaic__code { letter-spacing: -0.03em; }
  .fbw .fbw-hero--mosaic :is(.fbw-mosaic__c, .fbw-mosaic__d, .fbw-mosaic__e) > .fbw-mosaic__pad { padding: 0.5rem; }
}

/* live preview: the frame's soft edge above the iframe (owner, 2026-10-22: a white template showed no edge — the
   stage's own outline sits under the iframe). A layer over it, no pointer. */
.fbw .fbw-pv__stage::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 1px solid var(--fbw-line-soft); border-radius: inherit; pointer-events: none; }

/* One accordion (FAQ style) — owner, 2026-10-22: «hay que unificar estilos, aún algunos acordeones son diferentes a
   los de FAQs». Every accordion of the web is the home's FAQ (faq-search, FBK Accordion style «Cards»): white boxed
   items, radius --radius, 24 px sides, 16 px between items, the round-ish marker (--radius-inside) that fills ink on
   hover and open, title in ink when open. The pasted faq-lines keeps its markup; here its «Lines» variables
   (a rule under each item, the short accent line and the full-width ink rule of the open item) take the Cards values.
   Edges follow «Bordes de las cajas blancas» (soft line on white sections, none on soft ones; rules above). */
.fbw .fbk-accordion.fbk-ui:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) {
  --fbk-acc-item-frame: 1px;
  --fbk-acc-rule: 1px;
  --fbk-acc-gap: var(--space-s);
  --fbk-acc-pad-x: var(--fbk-pad-m, var(--space-m));
  --fbk-acc-item-bg: var(--fbk-acc-surface);
  --fbk-acc-open-bg: var(--fbk-acc-surface);
  --fbk-acc-item-radius: var(--radius);
  --fbk-acc-frame: 0;
  --fbk-acc-frame-radius: 0;
  --fbk-acc-focus-offset: -2px;
  --fbk-acc-line-show: 0;
  --fbk-acc-bar-show: 0;
  --fbk-acc-body-top: 0em;
  --fbk-acc-title-open: var(--heading-color);
}
/* its focus ring appears at once: Bricks animates the header's `all` (the outline too, ~350 ms of gray drift) */
.fbw .fbk-accordion:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-accordion__header { transition-property: color, background-color, border-color, box-shadow; }

/* Background selector (2026-10-22): the preview offers only the backgrounds the template was designed for
   (fbw_bg_offer / copy.js Preview.offer); the others stay in place, aria-disabled, with a tooltip that repeats their
   description «Not designed for this background». No choice = the group hides. */
.fbw .fbw-pv__group[hidden] { display: none; }
:root .fbw .fbw-pv .fbw-single-seg__btn[aria-disabled="true"] { position: relative; color: color-mix(in srgb, var(--text-color) 55%, transparent); cursor: not-allowed; }
:root .fbw .fbw-pv .fbw-single-seg__btn[aria-disabled="true"]:hover { color: color-mix(in srgb, var(--text-color) 55%, transparent); background: transparent; }
:root .fbw .fbw-pv .fbw-single-seg__btn[aria-disabled="true"] .fbw-icon { opacity: 0.55; }
:root .fbw .fbw-pv .fbw-single-seg__btn[aria-disabled="true"]::after {
  content: "Not designed for this background"; position: absolute; z-index: 5; inset-block-start: calc(100% + 6px); inset-inline-start: 50%; translate: -50% 0;
  padding: 0.4rem 0.6rem; border-radius: 0.5rem; background: var(--base-ultra-dark); color: var(--white);
  font: 500 var(--text-xs)/1.3 var(--font-sans); white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity var(--fbw-t-s) var(--fbw-ease-color), visibility 0s linear var(--fbw-t-s);
}
:root .fbw .fbw-pv .fbw-single-seg__btn[aria-disabled="true"]:is(:hover, :focus-visible)::after { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { :root .fbw .fbw-pv .fbw-single-seg__btn[aria-disabled="true"]::after { transition: none; } }
/* the Plugin mega menu: its eight widgets in one grid of four columns, two full rows (owner, 2026-10-22) */
@media (min-width: 1100px) { .fbw .fbk-header:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbw-nav-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* mega menu: «Browse all categories» under the six popular collections (owner, 2026-10-24) */
.fbw #brx-header .fbw-nav-all { align-self: flex-start; margin-block-start: var(--space-xs); font-weight: 600; color: var(--heading-color); }

/* back from Paddle, logged out (fbk-account.php, ?paid=1): the account page's own CSS only loads with a session */
.fbw .fbw-paid-notice { display: flex; align-items: flex-start; gap: 0.625rem; margin-block-start: var(--space-s); padding: 0.75rem 1rem; border-radius: var(--fbw-radius-btn); background: var(--base-ultra-light); color: var(--heading-color); font-size: var(--text-s); }
.fbw .fbw-paid-notice svg { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 2px; color: var(--success, currentColor); }