/* ============ 4b · Sticker — lista gruesa, negocio ============ */
.theme-sticker {
  --wb-bg: #F2F7FE;
  --wb-fg: var(--wb-graphite);
  --wb-muted: #5A6270;   /* AA sobre #F2F7FE: 5.71:1 */
}
.theme-sticker .wb-logo {
  border: 3px solid var(--wb-graphite);
  animation: wb-wobble 5s ease-in-out infinite;
}
@keyframes wb-wobble { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.theme-sticker .wb-tagline {
  padding: 5px 12px; border-radius: 999px;
  background: var(--wb-accent); color: #fff;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
/* The button skin only lands on button-like blocks. Excluded: the content blocks
   (heading/text/spacer) and the two blocks core.css already declares chrome-less
   (socials is a bare row of circles, marquee is a full-bleed tape).
   The exclusion lives inside :where() so it adds ZERO specificity: this rule stays
   at (0,2,0) and the per-block rules below still win. Every theme repeats the
   same chain. */
.theme-sticker .wb-block:not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  background: #fff;
  border: 2.5px solid var(--wb-graphite);
  box-shadow: 4px 4px 0 var(--wb-graphite);
  color: var(--wb-graphite);
}
.theme-sticker .wb-blocks > .wb-link:nth-child(even) { background: #DCEAFE; }
.theme-sticker .wb-cta {
  border: 2.5px solid var(--wb-graphite);
  box-shadow: 5px 5px 0 var(--wb-graphite);
  /* el mockup pone el botón principal en la familia de títulos; los links siguen en la del cuerpo */
  font-family: var(--wb-font-heading);
}
/* the heading wears the sticker's own ink rule, as thick as every border here */
.theme-sticker .wb-heading {
  font-size: 18px;
  padding-bottom: 7px;
  border-bottom: 2.5px solid currentColor;
}
.theme-sticker .wb-social { background: #fff; border: 2.5px solid var(--wb-graphite); }
.theme-sticker .wb-addblock { border: 2.5px dashed var(--wb-accent); color: color-mix(in srgb, var(--wb-accent) 65%, black); }

/* ============ 4c · Brutalista — cintas, negocio ============ */
.theme-brutalista {
  --wb-bg: #0A0C11;
  --wb-fg: #ffffff;
  --wb-muted: #7E8794;   /* AA sobre #0A0C11: 5.38:1 (antes 3.18) */
  --wb-logo-w: 52px;
  padding-left: 0; padding-right: 0;
}
/* el mockup pone logo y eyebrow en UNA fila (extremos opuestos) y el nombre debajo;
   el header es una columna flex, así que aquí pasa a grid de dos columnas */
.theme-brutalista .wb-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 0 22px;
  text-align: left;
}
.theme-brutalista .wb-logo { grid-column: 1; grid-row: 1; }
.theme-brutalista .wb-eyebrow { grid-column: 2; grid-row: 1; justify-self: end; }
.theme-brutalista .wb-name,
.theme-brutalista .wb-tagline { grid-column: 1 / -1; }
/* el footer ya va a extremos: ahí el handle y la firma no llevan separador */
.theme-brutalista .wb-handle + .wb-made::before { content: none; }
.theme-brutalista .wb-eyebrow { color: color-mix(in srgb, var(--wb-accent) 70%, white); }
.theme-brutalista .wb-name {
  font-size: 44px; line-height: .95; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.03em;
}
.theme-brutalista .wb-blocks { padding: 0 22px; gap: 9px; }
.theme-brutalista .wb-block:not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  border-radius: 0;
  border: 1.5px solid #22262F;
  padding: 17px 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  justify-content: space-between;
}
.theme-brutalista .wb-block:not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)):hover { border-color: var(--wb-accent); }
/* content blocks speak the theme's language: all-caps headings over the same
   hairline the rows are drawn with */
.theme-brutalista .wb-heading {
  text-transform: uppercase; letter-spacing: .06em; font-size: 16px;
  padding-top: 11px; border-top: 1.5px solid #22262F;
}
/* squared chips, never pills: the theme has no round corners */
.theme-brutalista .wb-social { border-radius: 0; border: 1.5px solid #22262F; }
.theme-brutalista .wb-link::after { content: '↗'; color: color-mix(in srgb, var(--wb-accent) 70%, white); }
.theme-brutalista .wb-cta {
  border-radius: 0; padding: 20px;
  text-transform: uppercase; font-size: 17px;
  justify-content: space-between;
}
.theme-brutalista .wb-cta::after { content: '↗'; }
/* the tape breaks out of the horizontal padding and tilts */
.theme-brutalista .wb-marquee { margin: 0 -22px; transform: rotate(-2deg); }
.theme-brutalista .wb-addblock {
  border-radius: 0; border: 1.5px dashed #2E3A4E; color: color-mix(in srgb, var(--wb-accent) 70%, white);
  text-transform: uppercase; letter-spacing: .1em; font-size: 13px;
}
.theme-brutalista .wb-footer { padding: 0 22px; justify-content: space-between; }

/* ============ 5a · Cromo azul — grid, negocio ============ */
.theme-cromo {
  --wb-bg: #0A0E14;
  --wb-fg: #ffffff;
  --wb-muted: rgba(255, 255, 255, .55);
  /* el mockup 5a dibuja el logo a 74px, dos menos que los 76 de core */
  --wb-logo-w: 74px;
  /* the chrome trio the whole theme borrows: tint for icons/edges, glass fill,
     card edge. mode-light redefines the three and every card follows. */
  --wb-chrome: color-mix(in srgb, var(--wb-accent) 43%, white);
  --wb-glass: rgba(255, 255, 255, .08);
  --wb-edge: color-mix(in srgb, var(--wb-chrome) 28%, transparent);
}
.theme-cromo .wb-logo { box-shadow: 0 8px 30px color-mix(in srgb, var(--wb-accent) 40%, transparent); }
.theme-cromo .wb-name { font-size: 22px; }
/* gradient-text only where color-mix exists — otherwise `color: transparent` alone
   would leave the business name invisible (old WebViews / Safari < 16.2) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .theme-cromo .wb-name {
    background: linear-gradient(100deg, #fff, color-mix(in srgb, var(--wb-accent) 43%, white), #fff);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: wb-shine 7s linear infinite;
  }
}
@keyframes wb-shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.theme-cromo .wb-cta {
  border-radius: 999px;
  font-family: var(--wb-font-heading);
  background: linear-gradient(180deg, color-mix(in srgb, var(--wb-accent) 81%, white), var(--wb-accent) 55%, color-mix(in srgb, var(--wb-accent) 72%, black));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 26px -12px color-mix(in srgb, var(--wb-accent) 75%, transparent);
  font-size: 16px;
}
/* every button-like block is a chrome-glass card — the grid only changes how a
   link lays out inside it, so `layout: lista` keeps the same skin */
.theme-cromo .wb-block:not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  border-radius: 20px;
  background: var(--wb-glass);
  border: 1px solid var(--wb-edge);
  backdrop-filter: blur(10px);
}
/* grid cards stack icon over label */
.theme-cromo .wb-blocks[data-layout="grid"] .wb-link {
  flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 17px;
}
.theme-cromo .wb-link-icon { color: var(--wb-chrome); font-size: 19px; }
.theme-cromo .wb-link-label { font-size: 13px; flex: none; }
/* headings read as chrome section labels, the same tint as the icons */
.theme-cromo .wb-heading {
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wb-chrome);
}
.theme-cromo .wb-membership {
  border-radius: 20px; padding: 16px 18px;
  background: color-mix(in srgb, var(--wb-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--wb-chrome) 30%, transparent);
}
.theme-cromo .wb-membership-price { color: var(--wb-chrome); }
.theme-cromo .wb-social { background: var(--wb-glass); border-color: var(--wb-edge); }
.theme-cromo .wb-addblock {
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-accent) 8%, transparent);
  border: 1.5px dashed color-mix(in srgb, color-mix(in srgb, var(--wb-accent) 43%, white) 45%, transparent);
  color: color-mix(in srgb, var(--wb-accent) 29%, white); font-weight: 400; font-size: 13.5px;
}

/* ============ 5b · Spa claro — arcos, negocio ============ */
.theme-spa {
  --wb-bg: #F4F8FE;
  --wb-fg: #2C2A2A;
  --wb-muted: #5A6270;   /* AA sobre #F4F8FE: 5.77:1 */
  /* a portrait-sized logo box; its default `arch` shape makes it 96 × 130 */
  --wb-logo-w: 96px;
}
.theme-spa .wb-logo { border: 1px solid #CFE0F8; }
.theme-spa .wb-name { font-family: var(--wb-font-heading); font-size: 32px; font-weight: 400; }
/* el mockup del spa pone el eyebrow bajo el nombre; el orden del DOM es al revés,
   así que el header (columna flex) lo reordena sin tocar render.js */
.theme-spa .wb-eyebrow { letter-spacing: .2em; order: 1; }
.theme-spa .wb-tagline { order: 2; }
.theme-spa .wb-cta {
  border-radius: 999px; font-size: 14.5px; font-weight: 400; letter-spacing: .06em;
}
.theme-spa .wb-block:not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  border-radius: 999px; padding: 16px 20px;
  background: #fff; border: 1px solid #DEE9F9;
  justify-content: space-between; font-size: 13.5px; font-weight: 400;
}
.theme-spa .wb-block:not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)):hover { border-color: var(--wb-accent); }
/* headings keep spa's light voice — the name's weight, the schedule's size */
.theme-spa .wb-heading { font-weight: 400; font-size: 19px; }
.theme-spa .wb-link::after { content: '→'; color: var(--wb-accent); }
.theme-spa .wb-schedule {
  border-radius: 24px; background: #E4EEFC; border: none;
  padding: 18px 20px; align-items: flex-start;
}
.theme-spa .wb-schedule-hours { font-family: var(--wb-font-heading); font-size: 19px; }
.theme-spa .wb-social { background: #fff; border: 1px solid #DEE9F9; }
.theme-spa .wb-addblock {
  border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--wb-accent) 43%, white);
  color: color-mix(in srgb, var(--wb-accent) 68%, black); font-weight: 400; font-size: 13.5px;
}

/* ============ Variantes de modo ============
   Each theme's palette above is its native mode; these blocks restyle the
   whole card when the console flips `mode`. .theme-X.mode-Y outweighs .theme-X. */

/* -- sticker: native light → dark variant (light borders keep the sticker look) -- */
.theme-sticker.mode-dark {
  --wb-bg: #0E1116;
  --wb-fg: #F2F5FA;
  --wb-muted: #8B93A3;
}
.theme-sticker.mode-dark .wb-logo { border-color: #F2F5FA; }
.theme-sticker.mode-dark .wb-block:not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  background: #151A21; color: #F2F5FA;
  border-color: #F2F5FA; box-shadow: 4px 4px 0 color-mix(in srgb, var(--wb-accent) 65%, black);
}
.theme-sticker.mode-dark .wb-blocks > .wb-link:nth-child(even) { background: #1B2634; }
.theme-sticker.mode-dark .wb-cta {
  color: #fff; box-shadow: 5px 5px 0 color-mix(in srgb, var(--wb-accent) 65%, black);
}
.theme-sticker.mode-dark .wb-social { background: #151A21; border-color: #F2F5FA; }
.theme-sticker.mode-dark .wb-addblock { color: color-mix(in srgb, var(--wb-accent) 55%, white); }

/* -- brutalista: native dark → light variant (print-like grays) -- */
.theme-brutalista.mode-light {
  --wb-bg: #F3F5F9;
  --wb-fg: #16181D;
  --wb-muted: #5A6270;   /* AA sobre #F3F5F9: 5.63:1 */
}
.theme-brutalista.mode-light .wb-eyebrow { color: color-mix(in srgb, var(--wb-accent) 80%, black); }
.theme-brutalista.mode-light .wb-block:not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) { border-color: #C9D1DE; background: #fff; }
.theme-brutalista.mode-light .wb-heading { border-top-color: #C9D1DE; }
.theme-brutalista.mode-light .wb-social { border-color: #C9D1DE; background: #fff; }
.theme-brutalista.mode-light .wb-link::after { color: color-mix(in srgb, var(--wb-accent) 80%, black); }
.theme-brutalista.mode-light .wb-addblock {
  border-color: #AEB9CC; color: color-mix(in srgb, var(--wb-accent) 75%, black);
}

/* -- cromo: native dark → light variant (chrome on paper) -- */
.theme-cromo.mode-light {
  --wb-bg: #EDF3FC;
  --wb-fg: #14161B;
  --wb-muted: rgba(20, 22, 27, .68);   /* AA sobre #EDF3FC: 5.94:1 (antes 3.91) */
  /* the chrome trio flips to ink-on-paper; every card and chip follows the vars */
  --wb-chrome: color-mix(in srgb, var(--wb-accent) 80%, black);
  --wb-glass: rgba(20, 50, 110, .06);
  --wb-edge: color-mix(in srgb, var(--wb-accent) 30%, transparent);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .theme-cromo.mode-light .wb-name {
    background: linear-gradient(100deg, #14161B, color-mix(in srgb, var(--wb-accent) 75%, black), #14161B);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.theme-cromo.mode-light .wb-addblock { color: color-mix(in srgb, var(--wb-accent) 75%, black); }

/* -- spa: native light → dark variant (night spa) -- */
.theme-spa.mode-dark {
  --wb-bg: #0F141C;
  --wb-fg: #F2F5FA;
  --wb-muted: #97A1B3;
}
.theme-spa.mode-dark .wb-logo { border-color: #2A3547; }
.theme-spa.mode-dark .wb-block:not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) { background: #171D27; border-color: #232C3B; color: #F2F5FA; }
.theme-spa.mode-dark .wb-cta { color: #fff; }
.theme-spa.mode-dark .wb-schedule { background: #1A2331; }
.theme-spa.mode-dark .wb-social { background: #171D27; border-color: #232C3B; }
.theme-spa.mode-dark .wb-addblock { color: color-mix(in srgb, var(--wb-accent) 55%, white); }