/*
 * ZaazBook design system (zaazbook.com).
 *
 * Palette = ZaazTech brand kit v1.3 core tokens: Carbon, Signal Teal, Paper,
 * brand blue. Type: Space Grotesk (headings, wordmark) + Inter (text).
 *
 * Pages are ZaazBuilder layouts. Sections and columns carry the zbk-* classes
 * below through their "CSS class" setting; words live in heading/text widgets
 * so the copy stays editable. Only the hero's booking mock-up is an html widget.
 */

:root {
	--zbk-carbon: #0F1115;
	--zbk-carbon-2: #1B2029;
	--zbk-ink: #1D2430;
	--zbk-muted: #5B6575;
	--zbk-line: #DCE1E8;
	--zbk-paper: #EDEFF2;
	--zbk-white: #FFFFFF;
	--zbk-teal: #2BD0C0;
	--zbk-teal-ink: #0E8F84;   /* teal dark enough for text on white (AA) */
	--zbk-blue: #2A8CFF;
	--zbk-radius: 14px;
	--zbk-wrap: 1160px;
	--zbk-head: 'Space Grotesk', system-ui, sans-serif;
	--zbk-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- base ---------- */
body.zbk {
	margin: 0;
	background: var(--zbk-white);
	color: var(--zbk-ink);
	font-family: var(--zbk-text);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
.zbk h1, .zbk h2, .zbk h3, .zbk h4 {
	font-family: var(--zbk-head);
	color: var(--zbk-carbon);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 0.5em;
}
.zbk a { color: var(--zbk-teal-ink); }
.zbk-wrap { max-width: var(--zbk-wrap); margin: 0 auto; padding: 0 24px; }
.zbk-sr, .zbk-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zbk-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: var(--zbk-white); padding: 8px 14px; border-radius: 8px; }
.zbk :focus-visible { outline: 3px solid var(--zbk-teal); outline-offset: 2px; }

/* ---------- buttons (also usable inside text widgets: <a class="zbk-btn zbk-btn--primary">) ---------- */
.zbk .zbk-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 22px; border-radius: 999px;
	font-family: var(--zbk-head); font-weight: 600; font-size: 16px; line-height: 1;
	text-decoration: none; border: 2px solid transparent;
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.zbk .zbk-btn--primary { background: var(--zbk-teal, #2BD0C0); color: var(--zbk-carbon); }
.zbk .zbk-btn--primary:hover { background: #4BDCCD; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 17, 21, .18); }
.zbk .zbk-btn--ghost { border-color: currentColor; color: inherit; }
.zbk .zbk-btn--ghost:hover { transform: translateY(-1px); }
.zbk .zbk-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }

/* ---------- wordmark ---------- */
.zbk-wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--zbk-white); }
.zbk-wordmark__mark { display: block; color: inherit; }
.zbk-wordmark__txt { font-family: var(--zbk-head); font-weight: 700; font-size: 24px; letter-spacing: -0.04em; line-height: 1; }
.zbk-wordmark__suffix { font-weight: 500; color: var(--zbk-teal); margin-left: 3px; letter-spacing: -0.01em; }

/* ---------- header ---------- */
.zbk-header { background: var(--zbk-carbon); color: var(--zbk-white); position: sticky; top: 0; z-index: 50; }
.admin-bar .zbk-header { top: 32px; }
.zbk-header__row { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: 20px; }
.zbk-brand { text-decoration: none; }
.zbk-nav { display: flex; align-items: center; gap: 22px; }
.zbk-nav__list, .zbk-lang { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.zbk-nav__list a { color: #C7CFDA; text-decoration: none; font-size: 15px; font-weight: 500; }
.zbk-nav__list a:hover { color: var(--zbk-white); }
.zbk-lang { gap: 4px; }
.zbk-lang a { display: block; padding: 4px 8px; border-radius: 6px; color: #C7CFDA; font-size: 13px; font-weight: 600; text-decoration: none; }
.zbk-lang a[aria-current] { background: rgba(43, 208, 192, .16); color: var(--zbk-teal); }
.zbk-nav__cta.zbk-btn { padding: 10px 18px; font-size: 15px; }
.zbk-navtoggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.zbk-navtoggle__bar { display: block; width: 22px; height: 2px; margin: 5px 0; background: var(--zbk-white); border-radius: 2px; }

@media (max-width: 900px) {
	.zbk-navtoggle { display: block; }
	.zbk-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 14px;
		padding: 18px 24px 24px; background: var(--zbk-carbon); border-top: 1px solid #262C36;
	}
	.zbk-nav.is-open { display: flex; }
	.zbk-nav__list { flex-direction: column; gap: 4px; }
	.zbk-nav__list a { display: block; padding: 10px 0; font-size: 17px; }
	.zbk-nav__cta.zbk-btn { justify-content: center; }
}

/* ---------- builder sections ---------- */
/* One class per section (the builder keeps a single class): zbk-s white, zbk-sp paper, zbk-sd dark. */
.zbk .zb-section:is(.zbk-s, .zbk-sp, .zbk-sd) { padding: 88px 0; }
.zbk .zb-section .zb-container { max-width: var(--zbk-wrap); margin: 0 auto; padding: 0 9px; }
.zbk .zbk-sp { background: var(--zbk-paper); }
.zbk .zbk-sd { background: var(--zbk-carbon); color: #C7CFDA; }
.zbk .zbk-sd h1, .zbk .zbk-sd h2, .zbk .zbk-sd h3 { color: var(--zbk-white); }
.zbk .zbk-sd a:not(.zbk-btn) { color: var(--zbk-teal); }

/* section intro: eyebrow + h2 + lead, centred */
/* full-width column (so the cards after it always start a new row); the words inside are narrowed */
.zbk .zb-col.zbk-intro { text-align: center; margin-bottom: 16px; }
.zbk .zb-col.zbk-intro > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.zbk .zbk-intro .zb-widget-heading { font-size: clamp(30px, 4vw, 42px); }
.zbk .zbk-intro .zb-widget-text { color: var(--zbk-muted); font-size: 19px; }
.zbk .zbk-sd .zbk-intro .zb-widget-text { color: #AEB7C4; }
.zbk .zbk-eyebrow { display: inline-block; font-family: var(--zbk-head); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--zbk-teal-ink); margin: 0 0 12px; }
.zbk .zbk-sd .zbk-eyebrow { color: var(--zbk-teal); }

/* ---------- hero ---------- */
.zbk .zb-section.zbk-hero {
	padding: 84px 0 96px;
	background:
		radial-gradient(900px 420px at 85% 10%, rgba(43, 208, 192, .16), transparent 60%),
		radial-gradient(700px 380px at 0% 100%, rgba(42, 140, 255, .14), transparent 60%),
		var(--zbk-carbon);
	color: #C7CFDA;
}
.zbk .zbk-hero .zb-row { align-items: center; }
.zbk .zbk-hero h1.zb-widget-heading { color: var(--zbk-white); font-size: clamp(38px, 5.4vw, 60px); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 20px; }
.zbk .zbk-hero .zb-widget-text { font-size: 19px; color: #C7CFDA; }
.zbk .zbk-hero .zbk-btn--ghost { color: var(--zbk-white); }
.zbk .zbk-hero .zbk-note { font-size: 14px; color: #8F99A8; margin-top: 18px; }
.zbk .zbk-hero .zbk-eyebrow { color: var(--zbk-teal); }

/* hero booking mock-up (html widget, purely visual) */
.zbk-mock {
	background: var(--zbk-white); color: var(--zbk-ink); border-radius: 18px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35); padding: 22px; max-width: 430px; margin: 0 auto;
	font-size: 14px; line-height: 1.4;
}
.zbk-mock__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--zbk-line); }
.zbk-mock__avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--zbk-teal), var(--zbk-blue)); flex: none; }
.zbk-mock__title { font-family: var(--zbk-head); font-weight: 700; font-size: 16px; color: var(--zbk-carbon); }
.zbk-mock__meta { color: var(--zbk-muted); font-size: 13px; }
.zbk-mock__month { display: flex; justify-content: space-between; font-weight: 600; margin: 16px 0 10px; color: var(--zbk-carbon); }
.zbk-mock__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 13px; }
.zbk-mock__grid span { padding: 7px 0; border-radius: 8px; color: #A3ACB9; }
.zbk-mock__grid .is-dow { font-size: 11px; font-weight: 600; color: var(--zbk-muted); }
.zbk-mock__grid .is-open { color: var(--zbk-carbon); font-weight: 600; background: rgba(43, 208, 192, .14); }
.zbk-mock__grid .is-picked { background: var(--zbk-carbon); color: var(--zbk-white); font-weight: 700; }
.zbk-mock__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.zbk-mock__slots span { border: 1.5px solid var(--zbk-line); border-radius: 10px; padding: 9px 0; text-align: center; font-weight: 600; color: var(--zbk-carbon); }
.zbk-mock__slots .is-picked { border-color: var(--zbk-teal); background: rgba(43, 208, 192, .14); }
.zbk-mock__slots .is-taken { color: #B8C0CB; text-decoration: line-through; }
.zbk-mock__cta { display: block; text-align: center; background: var(--zbk-teal); color: var(--zbk-carbon); font-family: var(--zbk-head); font-weight: 700; border-radius: 10px; padding: 12px; }
.zbk-mock__foot { display: flex; justify-content: space-between; margin-top: 12px; color: var(--zbk-muted); font-size: 12px; }

/* ---------- cards: column class zbk-card, or zbk-card-<icon> for one with an icon ---------- */
.zbk .zb-col[class*="zbk-card"] { position: relative; padding: 12px; }
.zbk .zb-col[class*="zbk-card"]::before {
	content: ""; position: absolute; inset: 12px; z-index: 0;
	background: var(--zbk-white); border: 1px solid var(--zbk-line); border-radius: var(--zbk-radius);
}
.zbk .zb-col[class*="zbk-card"] > * { position: relative; z-index: 1; padding-left: 26px; padding-right: 26px; }
.zbk .zb-col[class*="zbk-card"] > :first-child { padding-top: 26px; margin-top: 0; }
.zbk .zb-col[class*="zbk-card"] > :last-child { padding-bottom: 20px; }
.zbk .zb-col[class*="zbk-card"] h3.zb-widget-heading { font-size: 20px; margin-bottom: 8px; }
.zbk .zb-col[class*="zbk-card"] .zb-widget-text { color: var(--zbk-muted); font-size: 16px; }
.zbk .zb-col[class*="zbk-card"] .zb-widget-text p:last-child { margin-bottom: 0; }
.zbk .zbk-sp .zb-col[class*="zbk-card"]::before { border-color: transparent; box-shadow: 0 1px 2px rgba(15, 17, 21, .06); }
.zbk .zbk-sd .zb-col[class*="zbk-card"]::before { background: var(--zbk-carbon-2); border-color: #2A313C; }
.zbk .zbk-sd .zb-col[class*="zbk-card"] .zb-widget-text { color: #AEB7C4; }

.zbk .zb-col[class*="zbk-card-"] > :first-child { padding-top: 84px; }
.zbk .zb-col[class*="zbk-card-"]::after {
	content: ""; position: absolute; z-index: 1; top: 38px; left: 38px; width: 40px; height: 40px; border-radius: 12px;
	background-color: rgba(43, 208, 192, .16);
	background-image: var(--zbk-ico); background-repeat: no-repeat; background-position: center; background-size: 22px;
}
.zbk .zbk-card-clock  { --zbk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.zbk .zbk-card-lock   { --zbk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.zbk .zbk-card-pay    { --zbk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E"); }
.zbk .zbk-card-bell   { --zbk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.zbk .zbk-card-video  { --zbk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='m16 10 6-3v10l-6-3'/%3E%3C/svg%3E"); }
.zbk .zbk-card-globe  { --zbk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.zbk .zbk-card-code   { --zbk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 7-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E"); }
.zbk .zbk-card-link   { --zbk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.zbk .zbk-card-crm    { --zbk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6'/%3E%3C/svg%3E"); }

/* "coming soon" tag: <span class="zbk-tag">Próximamente</span> inside a text widget */
.zbk .zbk-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: rgba(42, 140, 255, .12); color: #1F6FD1; vertical-align: middle; }

/* ---------- steps (columns with cssClass zbk-step) ---------- */
.zbk .zb-row { counter-reset: zbk-step; }
.zbk .zb-col.zbk-step { counter-increment: zbk-step; padding-top: 24px; }
.zbk .zbk-step::before {
	content: counter(zbk-step); display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%; margin: 0 0 16px 0;
	background: var(--zbk-carbon); color: var(--zbk-teal); font-family: var(--zbk-head); font-weight: 700; font-size: 18px;
}
.zbk .zbk-step h3.zb-widget-heading { font-size: 20px; margin-bottom: 6px; }
.zbk .zbk-step .zb-widget-text { color: var(--zbk-muted); font-size: 16px; }

/* ---------- FAQ (accordion widget) ---------- */
.zbk .zb-col.zbk-faq { max-width: 820px; margin: 0 auto; }
.zbk .zbk-faq .zb-widget--accordion { margin-top: 8px; }
.zbk .zbk-faq .zb-widget--accordion button { font-family: var(--zbk-head); font-weight: 600; font-size: 17px; }

/* ---------- closing CTA band ---------- */
.zbk .zb-section.zbk-cta {
	padding: 80px 0;
	background: radial-gradient(800px 300px at 50% 0%, rgba(43, 208, 192, .22), transparent 70%), var(--zbk-carbon);
	text-align: center; color: #C7CFDA;
}
.zbk .zbk-cta h2.zb-widget-heading { color: var(--zbk-white); font-size: clamp(30px, 4vw, 44px); }
.zbk .zbk-cta .zb-widget-text { max-width: 640px; margin: 0 auto; font-size: 19px; }
.zbk .zbk-cta .zbk-btns { justify-content: center; margin-top: 18px; }
.zbk .zbk-cta .zbk-btn--ghost { color: var(--zbk-white); }

/* ---------- legal pages (column class zbk-legal) ---------- */
.zbk .zb-section.zbk-s:has(.zbk-legal) { padding-top: 64px; }
.zbk .zb-col.zbk-legal { max-width: 780px; margin: 0 auto; }
.zbk .zbk-legal h1.zb-widget-heading { font-size: clamp(34px, 4.5vw, 46px); margin-bottom: 4px; }
.zbk .zbk-legal h2.zb-widget-heading { font-size: 22px; margin: 36px 0 8px; }
.zbk .zbk-legal .zbk-updated { color: var(--zbk-muted); font-size: 15px; margin-top: 0; }
.zbk .zbk-legal li { margin-bottom: 6px; }

/* ---------- prose (non-builder pages) ---------- */
.zbk-sec { padding: 72px 0; }
.zbk-prose { max-width: 760px; }

/* ---------- footer ---------- */
.zbk-footer { background: #0A0C0F; color: #8F99A8; font-size: 15px; padding: 56px 0 28px; }
.zbk-footer a { color: #C7CFDA; text-decoration: none; }
.zbk-footer a:hover { color: var(--zbk-teal); }
.zbk-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.zbk-footer__brand p { max-width: 360px; margin: 14px 0 0; }
.zbk-footer__h { font-family: var(--zbk-head); font-weight: 600; color: var(--zbk-white); margin: 0 0 10px; }
.zbk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zbk-footer .zbk-lang--footer { display: flex; gap: 4px; margin-top: 14px; }
.zbk-footer__legal { border-top: 1px solid #1E232B; margin-top: 40px; padding-top: 20px; font-size: 14px; }
.zbk-footer__legal p { margin: 0; }

@media (max-width: 900px) {
	.zbk .zb-section.zbk-s { padding: 64px 0; }
	.zbk .zb-section.zbk-hero { padding: 56px 0 64px; }
	.zbk .zbk-hero .zb-col + .zb-col { margin-top: 28px; }
	.zbk-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.zbk .zbk-btn { transition: none; }
}