@font-face {
  font-family: "Playfair Display";
  src: url("/el-punto-cero/fonts/playfair-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/el-punto-cero/fonts/playfair-display-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/el-punto-cero/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/el-punto-cero/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  --grad: linear-gradient(135deg, #743594, #9853a6);
}

body { background: #ffffed; color: #1a1a1a; }
h1, h2, h3, h4 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
h2 { line-height: 1.16; }
strong, .card h3, .card h4, .mark b, .applied p b, .tbl td b, .out .v, .cz-per b { color: #1a1a1a; }

.top {
  position: relative;
  background: #ffffed;
  color: #1a1a1a;
  border-bottom: 1px solid #ddd7cd;
  box-shadow: none;
}
.top .in { min-height: 82px; gap: 1.5rem; }
.top .brand { flex: none; display: inline-flex; width: 145px; align-items: center; }
.top .brand img { display: block; width: 100%; height: auto; }
.top .top-title { flex: 1; min-width: 0; text-align: center; }
.top .kicker { color: #743594; opacity: 1; }
.top h1 { margin-top: .15rem; font-size: clamp(1.15rem, 2.4vw, 1.55rem); }
.top .chip { border: 1px solid #1a1a1a; border-radius: 100px; background: #ecd8fc; color: #1a1a1a; }

.tabs { background: #ffffed; border-bottom: 1px solid #1a1a1a; box-shadow: 0 6px 18px rgb(26 26 26 / 5%); }
.tb { color: #6a606e; }
.tb:hover { color: #743594; }
.tb[aria-selected="true"] { color: #1a1a1a; border-bottom-color: #743594; }

.card, .fig, .builder, .scrollx, .cz-box, .cz-per button { background: #fffefa; }
.intro, .cz-call { background: #f9f0ff; border-color: #d9b8e8; }
.good { background: #effaf4; }
.bad { background: #fff2e9; }
.out { background: #fffefa; }
.opt { background: #fffefa; }
.opt[aria-pressed="true"] { background: #f3e5fc; color: #5e257f; }
.opt.cy[aria-pressed="true"] { background: #e9f7fa; color: #236e83; }
.cz-b.g, .cz-b.m, .cz-b.e, .cz-b.x, .cz-b.w, .cz-steps button.on { color: #1a1a1a; }
.cz-in { background: #f9f0ff; }
.cz-in textarea, .field input, .field textarea { background: #fffefa; color: #1a1a1a; }
.cz-b.m { background: #ecd8fc; }
.btn { background: #1a1a1a; color: #fff; border-radius: .35rem; }
.btn:hover { background: #743594; }
.btn.ghost { color: #1a1a1a; border-color: #1a1a1a; }
.btn.ghost:hover { color: #fff; border-color: #743594; }
.tag { border: 1px solid currentColor; }
.fig svg { max-width: 100%; }
a { color: #743594; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #743594; outline-offset: 3px; }

@media (max-width: 640px) {
  .top .in { min-height: 72px; gap: .7rem; }
  .top .brand { width: 100px; }
  .top .kicker { font-size: .5rem; letter-spacing: .08em; }
  .top h1 { font-size: 1.1rem; }
  .top .chip { display: none; }
  .fig { overflow-x: auto; }
  .fig svg { min-width: 650px; }
}