/* Diseños de la web que se eligen en Panel → Diseño.
   Sin atributo: «Marisma» (el de siempre, en app.css).
   data-design="pueblo": Pueblo blanco — cal, azulejo cobalto, zócalo almagra y albero.
   data-design="campo":  Señales del campo — amarillo señal, negro y verde canal, alto contraste. */

/* ═════════════════════════ PUEBLO BLANCO ═════════════════════════ */
:root[data-design="pueblo"] {
  --bg: #f6f7f3; --bg-alt: #eef0ea; --surface: #ffffff; --surface-2: #eef1f6;
  --ink: #16203a; --ink-2: #4a5670; --line: #d6dce6;
  --marisma: #1d4e9e; --marisma-ink: #ffffff; --arroz: #2a64bd; --espiga: #b07a12;
  --flamenco: #a8322a; --flamenco-soft: #f7e2de; --flamenco-ink: #8d2a23; --cielo: #1d4e9e; --band: #1d4e9e;
  --ok: #2c7a4b; --warn: #a86a0c; --bad: #b3261e;
  --sol: #e9b44c; --sol-ink: #1c1708; --sol-soft: #fbefd2; --cielo-soft: #e2ebf8; --arroz-soft: #e5edf9;
  --fb-blue: #1d4e9e; --fb-blue-soft: #e2ebf8;
  --shadow: 0 1px 0 rgba(22, 32, 58, .06);
  --f-display: "Young Serif", Georgia, "Times New Roman", serif;
  --f-serif: "Young Serif", Georgia, serif; --f-serif-text: "Atkinson Hyperlegible", system-ui, sans-serif;
  --r-s: 6px; --r-m: 10px; --r-l: 14px;
  /* Azulejo: estrella de ocho puntas cobalto con botón de albero, sobre cal */
  --tile-bg: #ffffff; --tile-fg: #1d4e9e; --tile-dot: #e9b44c;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23ffffff'/%3E%3Cpath d='M24 5l5 12 12-5-5 12 5 12-12-5-5 12-5-12-12 5 5-12-5-12 12 5z' fill='%231d4e9e'/%3E%3Ccircle cx='24' cy='24' r='4.5' fill='%23e9b44c'/%3E%3Cpath d='M0 0h9v2H2v7H0zM48 0v9h-2V2h-7V0zM0 48v-9h2v7h7v2zM48 48h-9v-2h7v-7h2z' fill='%231d4e9e'/%3E%3C/svg%3E");
  --tile-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%2312204a'/%3E%3Cpath d='M24 5l5 12 12-5-5 12 5 12-12-5-5 12-5-12-12 5 5-12-5-12 12 5z' fill='%23365fae'/%3E%3Ccircle cx='24' cy='24' r='4.5' fill='%23e9b44c'/%3E%3Cpath d='M0 0h9v2H2v7H0zM48 0v9h-2V2h-7V0zM0 48v-9h2v7h7v2zM48 48h-9v-2h7v-7h2z' fill='%23365fae'/%3E%3C/svg%3E");
  --wall: var(--tile);
}
@media (prefers-color-scheme: dark) {
  :root[data-design="pueblo"]:not([data-theme="light"]) {
    --bg: #0c1426; --bg-alt: #0f1930; --surface: #131e36; --surface-2: #1a2743; --ink: #eef2fa; --ink-2: #a9b6cf; --line: #2a3a5c;
    --marisma: #8db0f2; --marisma-ink: #0c1426; --arroz: #9dbcf5; --espiga: #e9b44c; --flamenco: #ee8a7e; --flamenco-soft: #3a1d1a; --flamenco-ink: #f3a196;
    --cielo: #8db0f2; --band: #12204a; --ok: #74d39b; --warn: #f2c25c; --bad: #ff8f86;
    --sol: #e9b44c; --sol-ink: #1c1708; --sol-soft: #3a2f12; --cielo-soft: #162745; --arroz-soft: #162745; --fb-blue: #8db0f2; --fb-blue-soft: #162745;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3); --wall: var(--tile-dark); color-scheme: dark;
  }
}
:root[data-design="pueblo"][data-theme="dark"] {
  --bg: #0c1426; --bg-alt: #0f1930; --surface: #131e36; --surface-2: #1a2743; --ink: #eef2fa; --ink-2: #a9b6cf; --line: #2a3a5c;
  --marisma: #8db0f2; --marisma-ink: #0c1426; --arroz: #9dbcf5; --espiga: #e9b44c; --flamenco: #ee8a7e; --flamenco-soft: #3a1d1a; --flamenco-ink: #f3a196;
  --cielo: #8db0f2; --band: #12204a; --ok: #74d39b; --warn: #f2c25c; --bad: #ff8f86;
  --sol: #e9b44c; --sol-ink: #1c1708; --sol-soft: #3a2f12; --cielo-soft: #162745; --arroz-soft: #162745; --fb-blue: #8db0f2; --fb-blue-soft: #162745;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3); --wall: var(--tile-dark); color-scheme: dark;
}
/* Young Serif solo tiene un grosor: nada de negritas falsas en los títulos */
:root[data-design="pueblo"] :is(h1, h2, h3, .h-page, .brand, .ph, .modal-title) { font-family: var(--f-display); font-weight: 400 !important; letter-spacing: 0; }
:root[data-design="pueblo"] h4 { font-family: var(--f-body); }

/* Cabecera: cal, con la franja de azulejo bajo ella */
:root[data-design="pueblo"] .top { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-design="pueblo"] .top::after { height: 10px; bottom: -10px; background: var(--wall) repeat-x 0 0 / 10px 10px; opacity: 1; }
:root[data-design="pueblo"] .brand .v { color: var(--marisma); }
:root[data-design="pueblo"] .brand small, :root[data-design="pueblo"] header.top .brand small { color: var(--flamenco); font-family: var(--f-body); font-weight: 700; }
:root[data-design="pueblo"] .nav a { border-radius: var(--r-s); }
:root[data-design="pueblo"] .nav a[aria-current="page"] { background: var(--marisma); color: var(--marisma-ink); }
:root[data-design="pueblo"] .icon-btn { border-radius: var(--r-s); }

/* Cabeceras de sección: placa de calle de azulejo sobre una pared alicatada */
:root[data-design="pueblo"] :is(.banner, .page-hero, .tl-hero, .biz-head.bh2) {
  background: var(--wall) repeat 0 0 / 48px 48px !important; color: var(--ink); min-height: 0;
  border-bottom: 8px solid var(--flamenco);
}
:root[data-design="pueblo"] .banner > img,
:root[data-design="pueblo"] .banner::before, :root[data-design="pueblo"] .banner::after,
:root[data-design="pueblo"] .page-hero::before, :root[data-design="pueblo"] .page-hero::after,
:root[data-design="pueblo"] .tl-hero::before, :root[data-design="pueblo"] .tl-hero::after,
:root[data-design="pueblo"] .biz-head.bh2::before, :root[data-design="pueblo"] .biz-head.bh2::after { display: none !important; }
:root[data-design="pueblo"] :is(.banner-in, .page-hero > .wrap, .tl-hero > .wrap) { padding-block: 2.2rem 2.2rem !important; }
:root[data-design="pueblo"] :is(.banner h1, .page-hero h1, .tl-hero h1, .biz-head.bh2 h1) {
  display: inline-block; max-width: 100%; background: #fff !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: #1d4e9e !important; filter: none !important; text-shadow: none; font-size: clamp(1.7rem, 4.6vw, 2.7rem); line-height: 1.12;
  padding: .32em .7em .38em; border-radius: 12px; border: 3px solid #1d4e9e; box-shadow: 0 0 0 5px #fff, 0 0 0 7px #1d4e9e, 0 10px 22px -8px rgba(10, 20, 50, .5);
  margin: 7px 7px .9rem; overflow-wrap: anywhere;
}
:root[data-design="pueblo"] :is(.banner p, .page-hero p, .tl-hero p:not(.tl-offline), .biz-head.bh2 p) {
  background: var(--surface); color: var(--ink) !important; font-family: var(--f-body) !important; max-width: 62ch; padding: .7rem .9rem; border-radius: var(--r-s);
  border-left: 5px solid var(--flamenco); text-shadow: none; opacity: 1; margin-top: 0;
}
:root[data-design="pueblo"] .ph-ico { background: var(--surface) !important; color: var(--marisma) !important; border: 3px solid var(--marisma) !important; border-radius: 12px; backdrop-filter: none !important; }
:root[data-design="pueblo"] .page-hero .wrap > div { min-width: 0; }

/* Portada: el paisaje se queda; el título va en su placa */
:root[data-design="pueblo"] .hero h1 {
  font-family: var(--f-display) !important; font-weight: 400 !important; background: #fff !important; color: #1d4e9e !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  display: inline-block; padding: .2em .55em .28em; border-radius: 14px; border: 3px solid #1d4e9e; box-shadow: 0 0 0 6px #fff, 0 0 0 8px #1d4e9e, 0 14px 30px -10px rgba(0, 0, 0, .55);
  text-shadow: none !important; filter: none !important; margin: 8px; max-width: calc(100% - 16px);
}
:root[data-design="pueblo"] .hero h1 .line2 { font-family: var(--f-body) !important; font-style: normal; font-weight: 700 !important; color: #a8322a !important; font-size: .4em; background: none !important; -webkit-text-fill-color: currentColor; }

/* Botones, fichas y tarjetas: planos, como la cerámica */
:root[data-design="pueblo"] .btn { border-radius: var(--r-s); box-shadow: none; background: var(--marisma); color: var(--marisma-ink); }
:root[data-design="pueblo"] .btn.hot { background: var(--sol); color: var(--sol-ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15) !important; }
:root[data-design="pueblo"] .btn.alt { background: var(--surface); color: var(--marisma); border: 1.5px solid var(--marisma); box-shadow: none; }
:root[data-design="pueblo"] .btn.ghost { color: var(--marisma); }
:root[data-design="pueblo"] .btn.danger, :root[data-design="pueblo"] .btn.alt.danger { color: var(--bad); border-color: currentColor; }
:root[data-design="pueblo"] .hero .btn.alt { background: #fff; color: #1d4e9e; border: 2px solid #1d4e9e; }
:root[data-design="pueblo"] :is(.card, .panel) { border-radius: var(--r-m); box-shadow: none; }
:root[data-design="pueblo"] .chip { border-radius: var(--r-s); }
:root[data-design="pueblo"] .chip[aria-pressed="true"] { background: var(--marisma); color: var(--marisma-ink); border-color: var(--marisma); }
:root[data-design="pueblo"] .tabs button { border-radius: var(--r-s); }
:root[data-design="pueblo"] .tabs button[aria-selected="true"] { background: var(--marisma); border-color: var(--marisma); color: var(--marisma-ink); }
:root[data-design="pueblo"] .input { border-radius: var(--r-s); }

/* Barra de abajo y pie */
:root[data-design="pueblo"] .a11y-fab { background: #1d4e9e; border-radius: 14px; }
:root[data-design="pueblo"] .tabbar { background: var(--surface); border-top: 3px solid var(--marisma); box-shadow: none; }
:root[data-design="pueblo"] .tab[aria-current="page"], :root[data-design="pueblo"] .tab.on { color: var(--marisma); }
:root[data-design="pueblo"] footer { background: #14366f; color: #e6edfa; }
:root[data-design="pueblo"] footer::before { height: 14px; background: var(--tile) repeat-x 0 0 / 14px 14px; }
:root[data-design="pueblo"] footer .brand .v { color: #e9b44c; }
:root[data-design="pueblo"] footer :is(.muted, .foot a) { color: rgba(230, 237, 250, .86); }

/* ═════════════════════════ SEÑALES DEL CAMPO ═════════════════════════ */
:root[data-design="campo"] {
  --bg: #ffffff; --bg-alt: #f2f2ec; --surface: #ffffff; --surface-2: #ededE6; --ink: #000000; --ink-2: #383838; --line: #1a1a1a;
  --marisma: #00676b; --marisma-ink: #ffffff; --arroz: #00676b; --espiga: #7a6000;
  --flamenco: #c8102e; --flamenco-soft: #fde3e7; --flamenco-ink: #a50d26; --cielo: #00676b; --band: #000000;
  --ok: #0f7a3d; --warn: #8a6100; --bad: #c8102e;
  --sol: #ffd100; --sol-ink: #000000; --sol-soft: #fff4bf; --cielo-soft: #dcefee; --arroz-soft: #e1f1ef;
  --fb-blue: #00676b; --fb-blue-soft: #dcefee;
  --shadow: none;
  --f-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-serif: var(--f-display); --f-serif-text: "Atkinson Hyperlegible", system-ui, sans-serif;
  --r-s: 3px; --r-m: 5px; --r-l: 6px;
  --edge: #000000; --sign: #ffd100; --sign-ink: #000000;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="campo"]:not([data-theme="light"]) {
    --bg: #0d1817; --bg-alt: #0f1d1c; --surface: #132322; --surface-2: #1b2f2d; --ink: #f6f6ef; --ink-2: #c3cbc8; --line: #d8dcd6;
    --marisma: #5fd0c9; --marisma-ink: #001f1e; --arroz: #5fd0c9; --espiga: #ffd100; --flamenco: #ff7a8c; --flamenco-soft: #3b1219; --flamenco-ink: #ff9aa8;
    --cielo: #5fd0c9; --band: #000; --ok: #6fdc9a; --warn: #ffd100; --bad: #ff7a8c;
    --sol: #ffd100; --sol-ink: #000; --sol-soft: #3a3000; --cielo-soft: #12302e; --arroz-soft: #12302e; --fb-blue: #5fd0c9; --fb-blue-soft: #12302e;
    --edge: #f6f6ef; color-scheme: dark;
  }
}
:root[data-design="campo"][data-theme="dark"] {
  --bg: #0d1817; --bg-alt: #0f1d1c; --surface: #132322; --surface-2: #1b2f2d; --ink: #f6f6ef; --ink-2: #c3cbc8; --line: #d8dcd6;
  --marisma: #5fd0c9; --marisma-ink: #001f1e; --arroz: #5fd0c9; --espiga: #ffd100; --flamenco: #ff7a8c; --flamenco-soft: #3b1219; --flamenco-ink: #ff9aa8;
  --cielo: #5fd0c9; --band: #000; --ok: #6fdc9a; --warn: #ffd100; --bad: #ff7a8c;
  --sol: #ffd100; --sol-ink: #000; --sol-soft: #3a3000; --cielo-soft: #12302e; --arroz-soft: #12302e; --fb-blue: #5fd0c9; --fb-blue-soft: #12302e;
  --edge: #f6f6ef; color-scheme: dark;
}
:root[data-design="campo"] :is(h1, h2, h3, .h-page, .ph, .modal-title) { font-family: var(--f-display); font-weight: 800; letter-spacing: .005em; line-height: 1.05; }
:root[data-design="campo"] :is(h2, .ph) { font-size: 1.55em; }
:root[data-design="campo"] h4 { font-family: var(--f-body); }
:root[data-design="campo"] .brand { font-family: var(--f-display); font-weight: 800; }

/* Cabecera: blanca con raya negra gruesa, como el borde de una señal */
:root[data-design="campo"] .top { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 4px solid var(--edge); }
:root[data-design="campo"] .top::after { display: none; }
:root[data-design="campo"] .brand .v { color: var(--marisma); }
:root[data-design="campo"] .brand small, :root[data-design="campo"] header.top .brand small { color: var(--ink-2); font-family: var(--f-body); }
:root[data-design="campo"] .nav a { border-radius: var(--r-s); color: var(--ink); }
:root[data-design="campo"] .nav a[aria-current="page"] { background: var(--sign); color: var(--sign-ink); box-shadow: inset 0 0 0 2px #000; }
:root[data-design="campo"] .icon-btn { border-radius: var(--r-s); border: 2px solid var(--edge); }

/* Cabeceras de sección: panel de señal amarillo */
:root[data-design="campo"] :is(.banner, .page-hero, .tl-hero, .biz-head.bh2) {
  background: var(--sign) !important; color: var(--sign-ink); min-height: 0; border-bottom: 4px solid #000;
}
:root[data-design="campo"] .banner > img,
:root[data-design="campo"] .banner::before, :root[data-design="campo"] .banner::after,
:root[data-design="campo"] .page-hero::before, :root[data-design="campo"] .page-hero::after,
:root[data-design="campo"] .tl-hero::before, :root[data-design="campo"] .tl-hero::after,
:root[data-design="campo"] .biz-head.bh2::before, :root[data-design="campo"] .biz-head.bh2::after { display: none !important; }
:root[data-design="campo"] :is(.banner-in, .page-hero > .wrap, .tl-hero > .wrap) { padding-block: 1.8rem 1.8rem !important; }
:root[data-design="campo"] :is(.banner h1, .page-hero h1, .tl-hero h1, .biz-head.bh2 h1) {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #000 !important; filter: none !important;
  font-family: var(--f-display) !important; font-weight: 900; font-size: clamp(2.3rem, 7vw, 4.2rem); line-height: .98; letter-spacing: 0; text-shadow: none; overflow-wrap: anywhere;
}
:root[data-design="campo"] :is(.banner p, .page-hero p, .tl-hero p:not(.tl-offline), .biz-head.bh2 p) { color: #000 !important; font-family: var(--f-body) !important; font-weight: 700; opacity: 1; text-shadow: none; max-width: 62ch; }
:root[data-design="campo"] :is(.banner, .page-hero, .tl-hero, .biz-head.bh2) a:not(.btn) { color: #000; }
:root[data-design="campo"] .ph-ico { background: #000 !important; color: var(--sign) !important; border: 0 !important; border-radius: var(--r-s); backdrop-filter: none !important; }
:root[data-design="campo"] .page-hero .wrap > div { min-width: 0; }

/* Portada: el paisaje se queda; el título va en una señal amarilla */
:root[data-design="campo"] .hero h1 {
  font-family: var(--f-display) !important; font-weight: 900 !important; background: var(--sign) !important; color: #000 !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  display: inline-block; padding: .14em .4em .18em; border: 4px solid #000; border-radius: var(--r-m); text-shadow: none !important; filter: none !important; box-shadow: 6px 6px 0 #000; max-width: calc(100% - 8px);
}
:root[data-design="campo"] .hero h1 .line2 { font-family: var(--f-body) !important; font-style: normal; font-weight: 700 !important; color: #000 !important; font-size: .36em; background: none !important; -webkit-text-fill-color: currentColor; }

/* Botones: pegatina con borde y sombra dura; al pulsar se «hunden» */
:root[data-design="campo"] .btn { border-radius: var(--r-s); border: 2.5px solid #000; box-shadow: 3px 3px 0 #000; background: var(--marisma); color: #fff; font-weight: 800; transform: none; }
:root[data-design="campo"] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
:root[data-design="campo"] .btn.hot { background: var(--sign); color: #000; box-shadow: 3px 3px 0 #000 !important; }
:root[data-design="campo"] .btn.alt { background: #fff; color: #000; border-color: #000; }
:root[data-design="campo"] .btn.ghost { background: transparent; color: var(--ink); border-color: var(--edge); box-shadow: none; }
:root[data-design="campo"] .btn.danger, :root[data-design="campo"] .btn.alt.danger { color: var(--bad); }
:root[data-design="campo"] .btn:disabled { box-shadow: none; opacity: .5; }
:root[data-design="campo"] .hero .btn.alt { background: #fff; color: #000; border: 2.5px solid #000; }
:root[data-design="campo"] :is(.card, .panel) { border: 2px solid var(--edge); border-radius: var(--r-m); box-shadow: none; }
:root[data-design="campo"] .chip { border-radius: var(--r-s); border: 2px solid var(--edge); color: var(--ink); font-weight: 700; }
:root[data-design="campo"] .chip[aria-pressed="true"] { background: var(--sign); color: #000; border-color: #000; }
:root[data-design="campo"] .tabs button { border-radius: var(--r-s); border: 2px solid var(--edge); }
:root[data-design="campo"] .tabs button[aria-selected="true"] { background: var(--sign); border-color: #000; color: #000; }
:root[data-design="campo"] .input { border-radius: var(--r-s); border: 2px solid var(--edge); }
:root[data-design="campo"] :focus-visible { outline: 3px solid var(--flamenco); outline-offset: 2px; }
:root[data-design="campo"] a { text-underline-offset: 3px; }

/* Barra de abajo y pie: negro y amarillo */
:root[data-design="campo"] .a11y-fab { background: #ffd100; color: #000; border: 3px solid #000; border-radius: 6px; box-shadow: 3px 3px 0 #000; }
:root[data-design="campo"] .tabbar { background: #000; border-top: 4px solid var(--sign); box-shadow: none; }
:root[data-design="campo"] .tabbar .tab { color: #e8e8e2; }
:root[data-design="campo"] .tabbar .tab[aria-current="page"], :root[data-design="campo"] .tabbar .tab.on { color: var(--sign); }
:root[data-design="campo"] footer { background: #000; color: #f2f2ec; }
:root[data-design="campo"] footer::before { height: 6px; background: var(--sign); }
:root[data-design="campo"] footer .brand .v { color: var(--sign); }
:root[data-design="campo"] footer :is(.muted, .foot a) { color: #e0e0d8; }

/* Accesibilidad: con «más contraste» o colores invertidos manda la herramienta, no el diseño */
html.a11y-contrast[data-design] :is(.banner, .page-hero, .tl-hero) { background: #000 !important; }
html.a11y-contrast[data-design] :is(.banner h1, .page-hero h1, .tl-hero h1) { background: #000 !important; color: #fff !important; box-shadow: none; border-color: #fff; }

/* Ajustes tras revisar las capturas */
:root[data-design="pueblo"] :is(.banner, .page-hero, .tl-hero) :is(.tl-offline, small, .ph-note) { display: inline-flex; background: var(--surface); color: var(--ink) !important; padding: .35rem .7rem; border-radius: var(--r-s); opacity: 1; text-shadow: none; }
:root[data-design="campo"] :is(.banner, .page-hero, .tl-hero) :is(.tl-offline, small, .ph-note) { color: #000 !important; opacity: 1; text-shadow: none; }
@media (max-width: 620px) {
  :root[data-design="pueblo"] .hero h1 { font-size: 2.5rem !important; }
  :root[data-design="campo"] .hero h1 { font-size: 3rem !important; }
}

/* El Chat también sigue el diseño (tiene su propia paleta tipo red social) */
:root[data-design="pueblo"] :is(.fb, .fb-modal) {
  --bg: #eef0ea; --surface: #ffffff; --surface-2: #eef1f6; --ink: #16203a; --ink-2: #4a5670; --line: #d6dce6;
  --marisma: #1d4e9e; --marisma-ink: #fff; --fb-blue: #1d4e9e; --fb-blue-soft: #e2ebf8; --fb-hover: #eef1f6; --fb-btn: #e3e8f1; --fb-shadow: 0 1px 0 rgba(22, 32, 58, .08);
  --f-body: "Atkinson Hyperlegible", system-ui, sans-serif; --f-display: "Young Serif", Georgia, serif;
}
:root[data-design="pueblo"] body[data-route="plaza"] { --feed-bg: #eef0ea; }
:root[data-design="campo"] :is(.fb, .fb-modal) {
  --bg: #f2f2ec; --surface: #ffffff; --surface-2: #ededE6; --ink: #000; --ink-2: #383838; --line: #1a1a1a;
  --marisma: #00676b; --marisma-ink: #fff; --fb-blue: #00676b; --fb-blue-soft: #dcefee; --fb-hover: #ededE6; --fb-btn: #ededE6; --fb-shadow: none;
  --f-body: "Atkinson Hyperlegible", system-ui, sans-serif; --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
}
:root[data-design="campo"] body[data-route="plaza"] { --feed-bg: #f2f2ec; }
@media (prefers-color-scheme: dark) {
  :root[data-design="pueblo"]:not([data-theme="light"]) :is(.fb, .fb-modal) { --bg: #0c1426; --surface: #131e36; --surface-2: #1a2743; --ink: #eef2fa; --ink-2: #a9b6cf; --line: #2a3a5c; --marisma: #8db0f2; --marisma-ink: #0c1426; --fb-blue: #8db0f2; --fb-blue-soft: #162745; --fb-hover: #1a2743; --fb-btn: #1a2743; }
  :root[data-design="pueblo"]:not([data-theme="light"]) body[data-route="plaza"] { --feed-bg: #0c1426; }
  :root[data-design="campo"]:not([data-theme="light"]) :is(.fb, .fb-modal) { --bg: #0d1817; --surface: #132322; --surface-2: #1b2f2d; --ink: #f6f6ef; --ink-2: #c3cbc8; --line: #d8dcd6; --marisma: #5fd0c9; --marisma-ink: #001f1e; --fb-blue: #5fd0c9; --fb-blue-soft: #12302e; --fb-hover: #1b2f2d; --fb-btn: #1b2f2d; }
  :root[data-design="campo"]:not([data-theme="light"]) body[data-route="plaza"] { --feed-bg: #0d1817; }
}
:root[data-design="pueblo"][data-theme="dark"] :is(.fb, .fb-modal) { --bg: #0c1426; --surface: #131e36; --surface-2: #1a2743; --ink: #eef2fa; --ink-2: #a9b6cf; --line: #2a3a5c; --marisma: #8db0f2; --marisma-ink: #0c1426; --fb-blue: #8db0f2; --fb-blue-soft: #162745; --fb-hover: #1a2743; --fb-btn: #1a2743; }
:root[data-design="pueblo"][data-theme="dark"] body[data-route="plaza"] { --feed-bg: #0c1426; }
:root[data-design="campo"][data-theme="dark"] :is(.fb, .fb-modal) { --bg: #0d1817; --surface: #132322; --surface-2: #1b2f2d; --ink: #f6f6ef; --ink-2: #c3cbc8; --line: #d8dcd6; --marisma: #5fd0c9; --marisma-ink: #001f1e; --fb-blue: #5fd0c9; --fb-blue-soft: #12302e; --fb-hover: #1b2f2d; --fb-btn: #1b2f2d; }
:root[data-design="campo"][data-theme="dark"] body[data-route="plaza"] { --feed-bg: #0d1817; }
:root[data-design="pueblo"] .fb :is(h1, .group-title) { font-family: var(--f-display); font-weight: 400 !important; }
:root[data-design="campo"] .fb :is(h1, .group-title) { font-family: var(--f-display); font-weight: 900; font-size: 2.2rem; }
:root[data-design="campo"] .fb :is(.post, .panel) { border: 2px solid var(--edge); }