/* "Presencia online", measured on Fresha at 1280 px: grey page, 28/36 titles,
   white 20 px cards with a hairline border, black pill tabs and 36 px buttons. */
.team-page.ob-page { background: var(--db-f5f5f5, rgb(245, 245, 245)); position: relative; }
.ob-wrap { max-width: 1200px; margin: 0 auto; }
.ob-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.ob-head h1 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.ob-head h1 .count { height: 20px; min-width: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 600 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-lead { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-lead a, .ob-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.ob-lead a:hover, .ob-link:hover { text-decoration: underline; }
.ob-card { background: var(--db-ffffff, #fff); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .1); }

/* ---------- Perfil del marketplace ---------- */
.ob-stats { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ob-stat { min-height: 99px; padding: 16px; }
.ob-stat-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ob-stat-h p { margin: 0; font: 600 15px/20px var(--font); }
.ob-stat strong { display: flex; align-items: center; gap: 4px; margin-top: 12px; font: 600 24px/32px var(--font); }
.ob-stat strong svg { width: 20px; height: 20px; color: rgb(255, 176, 0); }
.ob-info { position: relative; display: inline-grid; width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); cursor: default; flex: none; }
.ob-info svg { width: 20px; height: 20px; }
.ob-info[data-tip]:hover::after, .ob-info[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 280px; padding: 8px 12px; border-radius: 8px; background: var(--db-0d0d0d-h, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); font: 500 13px/18px var(--font); white-space: normal; text-align: left; pointer-events: none; }
.ob-stat-v { font: 500 15px/20px var(--font); color: var(--accent); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.ob-stat-v svg { width: 16px; height: 16px; }
.ob-foot { margin: 15px 0 0; font: 400 15px/20px var(--font); }
.ob-foot .dot { margin: 0 6px; color: var(--df-767676, rgb(118, 118, 118)); }
.ob-tabs { margin: 32px 0 0; padding: 0; list-style: none; display: flex; gap: 4px; }
.ob-tabs li { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; cursor: pointer; }
.ob-tabs li:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.ob-tabs li[aria-selected="true"] { background: var(--ink); color: var(--do-ffffff, #fff); }
.ob-tabs .n { font: 600 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-tabs li[aria-selected="true"] .n { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff; }
.ob-tools { margin-top: 16px; display: flex; align-items: center; gap: 8px; }
.ob-tools .t-search { width: 256px; }
.ob-tools .sp { flex: 1; }
.ob-locs { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; }
.ob-loc { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 32px; min-height: 208px; overflow: hidden; }
.ob-loc-img { display: grid; place-items: center; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); }
.ob-loc-img svg { width: 40px; height: 40px; }
.ob-loc-b { padding: 32px 32px 32px 0; display: flex; flex-direction: column; min-width: 0; }
.ob-loc-t { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ob-loc-t h2 { margin: 0; font: 600 20px/28px var(--font); }
.ob-loc p { margin: 0; font: 400 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-loc-f { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 8px; }
.ob-loc-f .upd { margin-left: auto; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-pill { height: 32px; padding: 0 16px; display: inline-flex; align-items: center; flex: none; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 500 15px/20px var(--font); white-space: nowrap; }
.ob-pill.on { background: var(--db-edfbe9, rgb(237, 251, 233)); box-shadow: inset 0 0 0 1px var(--ds-d2f6c9, rgb(210, 246, 201)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.ob-pill.sm { height: 24px; padding: 0 12px; font: 500 13px/16px var(--font); }
.ob-pill.red { background: var(--db-feeceb, rgb(254, 236, 235)); box-shadow: inset 0 0 0 1px var(--ds-fee3e2, rgb(254, 227, 226)); color: var(--df-d4163a, rgb(212, 22, 58)); }
.ob-dots { width: 36px; height: 36px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); display: inline-grid; place-items: center; flex: none; }
.ob-dots svg { width: 20px; height: 20px; }
.ob-dots:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.ob-none { margin-top: 24px; padding: 48px 32px; text-align: center; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }

/* The Porfolio tab: text on the left, a collage of work on the right. */
.ob-promo { margin-top: 24px; padding: 48px; display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 48px; overflow: hidden; position: relative; }
.ob-promo h2 { margin: 40px 0 16px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.ob-promo p { margin: 0; font: 400 15px/20px var(--font); }
.ob-promo ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ob-promo li { display: flex; gap: 12px; font: 400 15px/20px var(--font); }
.ob-promo li svg { width: 20px; height: 20px; flex: none; }
.ob-promo .btns { margin: 32px 0 32px; display: flex; gap: 8px; }
.ob-collage { position: relative; min-height: 452px; background: radial-gradient(60% 60% at 70% 30%, var(--db-ffe4c4, rgb(255, 228, 196)), transparent 70%), radial-gradient(50% 50% at 90% 80%, var(--db-ffd6e7, rgb(255, 214, 231)), transparent 70%); border-radius: 20px; }
.ob-collage i { position: absolute; border-radius: 6px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .7); }

/* ---------- Landings (Google, Facebook) ---------- */
.ob-land { display: grid; grid-template-columns: minmax(0, 433px) minmax(0, 1fr); gap: 32px; align-items: center; min-height: calc(100vh - 160px); }
.ob-land.with-bg { position: relative; }
.ob-land-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; pointer-events: none; z-index: 0; }
.ob-land > * { position: relative; z-index: 1; }
.ob-land-text { padding-left: 12px; }
.ob-badge { display: inline-flex; align-items: center; gap: 12px; font: 600 15px/20px var(--font); }
.ob-badge span:first-child { width: 48px; height: 48px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); display: grid; place-items: center; }
.ob-land h1 { margin: 8px 0 16px; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.ob-land .lead { margin: 0 0 24px; font: 400 17px/24px var(--font); }
.ob-land ul { margin: 0; padding: 0; list-style: none; }
.ob-land li { display: flex; gap: 12px; padding-bottom: 8px; font: 400 15px/20px var(--font); }
.ob-land li svg { width: 20px; height: 20px; flex: none; }
.ob-land .plan { margin: 32px 0 0; font: 600 20px/28px var(--font); }
.ob-land .btns { margin-top: 32px; display: flex; gap: 4px; }
.ob-land .btns .tbtn { height: 48px; padding: 0 20px; font-size: 17px; }
.ob-land .btns .ghost { border-color: transparent; background: transparent; }
.ob-art { justify-self: center; position: relative; width: min(100%, 360px); height: 480px; }
.ob-phone { position: absolute; background: var(--db-ffffff, #fff); border-radius: 16px; box-shadow: 0 12px 40px rgba(19, 19, 19, .18); overflow: hidden; font: 500 10px/14px var(--font); color: var(--ink); }
.ob-phone b { font-weight: 600; }
.ob-map { background: repeating-linear-gradient(35deg, var(--db-e8ecf0, rgb(232, 236, 240)) 0 2px, var(--db-f6f7f9, rgb(246, 247, 249)) 2px 22px), var(--db-f6f7f9, rgb(246, 247, 249)); position: relative; }
.ob-mk { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: rgb(200, 34, 34); }
.ob-slot { display: inline-block; padding: 4px 8px; margin: 3px 3px 0 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.ob-tile { border-radius: 4px; }

/* ---------- Panel del perfil ---------- */
.ob-crumbs { display: flex; align-items: center; gap: 12px; font: 400 13px/16px var(--font); }
.ob-crumbs a { color: var(--ink); text-decoration: none; }
.ob-crumbs .dot { color: var(--df-767676, rgb(118, 118, 118)); }
.ob-ph { margin-top: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ob-ph h1 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 28px/36px var(--font); }
.ob-ph .sub { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-ph .sub b { color: var(--ink); font-weight: 600; }
.ob-ph .acts { display: flex; gap: 8px; flex: none; }
.ob-cols { margin-top: 24px; display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 32px; align-items: start; }
.ob-nav { padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.ob-nav a { height: 44px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-radius: 16px; font: 400 15px/20px var(--font); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; }
.ob-nav a span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ob-nav a svg { width: 20px; height: 20px; flex: none; }
.ob-nav a:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.ob-nav a.is-active { background: var(--db-f0f0ff, rgb(240, 240, 255)); font-weight: 500; }
.ob-nav a.ext { color: var(--df-767676, rgb(118, 118, 118)); }
.ob-nav hr { margin: 8px 12px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.ob-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ob-sec { padding: 40px; border-radius: 24px; }
.ob-sec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ob-sec-h h2 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 20px/28px var(--font); }
.ob-sec-h h2 .count { font: 600 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-sec-h p { margin: 4px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-sec-b { margin-top: 24px; }
.ob-kv { display: flex; flex-direction: column; gap: 16px; }
.ob-kv p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-kv b { display: block; font: 500 15px/20px var(--font); color: var(--ink); }
.ob-perf { display: flex; flex-direction: column; gap: 8px; }
.ob-perf div { min-height: 64px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; border-radius: 20px; background: var(--db-f0f0ff, rgb(240, 240, 255)); font: 400 15px/20px var(--font); }
.ob-perf div svg { width: 20px; height: 20px; flex: none; }
.ob-perf div strong { margin-left: auto; font: 600 20px/28px var(--font); }
.ob-table { width: 100%; border-collapse: collapse; font: 400 15px/20px var(--font); }
.ob-table th { padding: 12px 10px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.ob-table td { padding: 16px 10px; border-bottom: 1px solid var(--de-f2f2f2, rgb(242, 242, 242)); }
.ob-table tr:last-child td { border-bottom: 0; }
.ob-addons { display: flex; flex-direction: column; gap: 16px; }
.ob-addon { display: flex; align-items: center; gap: 16px; font: 600 15px/20px var(--font); }
.ob-addon .ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); }
.ob-addon .ic.star { background: linear-gradient(135deg, rgb(255, 176, 32), rgb(240, 120, 40)); box-shadow: none; color: #fff; }
.ob-addon .tbtn { margin-left: auto; }
.ob-hours { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ob-hours div { display: flex; justify-content: space-between; font: 400 15px/20px var(--font); }
.ob-hours dt { font-weight: 500; }
.ob-hours dd { margin: 0; color: var(--df-767676, rgb(118, 118, 118)); }
.ob-mapbox { position: relative; height: 270px; border-radius: 12px; overflow: hidden; background: var(--db-f0f0f0, rgb(240, 240, 240)); }
.ob-mapbox .lp-map { position: absolute; inset: 0; }
.ob-pin { position: absolute; left: 50%; top: 50%; z-index: 500; transform: translate(-50%, -100%); width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--do-ffffff, #fff); display: grid; place-items: center; pointer-events: none; }
.ob-pin svg { width: 18px; height: 18px; }
.ob-pin::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.ob-empty { padding: 40px 24px; text-align: center; }
.ob-empty h3 { margin: 0; font: 600 17px/24px var(--font); }
.ob-empty p { margin: 8px auto 20px; max-width: 420px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-photos .ph { aspect-ratio: 16 / 10; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); display: grid; place-items: center; color: var(--accent); }
.ob-photos .ph:first-child { grid-column: 1 / -1; }
.ob-photos .ph svg { width: 32px; height: 32px; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); font: 500 15px/20px var(--font); cursor: pointer; }
.ob-chip:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.ob-chip[aria-pressed="true"] { background: var(--db-f0f0ff, rgb(240, 240, 255)); box-shadow: inset 0 0 0 2px var(--accent); }
.ob-chip svg { width: 16px; height: 16px; }
.ob-chip-grp + .ob-chip-grp { margin-top: 32px; }
.ob-chip-grp h3 { margin: 0 0 16px; font: 600 17px/24px var(--font); }
.ob-ig { padding: 48px 32px; text-align: center; }
.ob-ig .ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(45deg, rgb(255, 196, 0), rgb(255, 0, 105), rgb(130, 50, 230)); color: #fff; }
.ob-ig .ic svg { width: 32px; height: 32px; }
.ob-ig h3 { margin: 0; font: 600 20px/28px var(--font); }
.ob-ig p { margin: 8px auto 24px; max-width: 480px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }

/* ---------- Asistentes a pantalla completa (perfil, porfolio, tienda) ---------- */
.ob-wz { position: fixed; inset: 0; z-index: 60; background: var(--db-ffffff, #fff); display: flex; flex-direction: column; overflow: hidden; }
.ob-wz-top { flex: none; height: 84px; padding: 0 24px; display: flex; align-items: center; gap: 8px; position: relative; }
.ob-wz-top .sp { flex: 1; }
.ob-wz-top .title { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; font: 600 24px/32px var(--font); }
.ob-wz-top .title small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-wz-top .tbtn { height: 48px; padding: 0 20px; }
.ob-wz-bar { flex: none; height: 4px; margin: 0 32px; display: flex; gap: 8px; }
.ob-wz-bar i { flex: 1; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); overflow: hidden; position: relative; }
.ob-wz-bar i b { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 999px; transition: width .3s; }
.ob-wz-body { flex: 1; overflow-y: auto; }
.ob-wz-in { max-width: 600px; margin: 0 auto; padding: 40px 0 80px; }
.ob-wz-in.wide { max-width: 960px; }
.ob-wz-in h1 { margin: 0 0 8px; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.ob-wz-in > p.lead { margin: 0 0 32px; font: 400 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-wz-step { display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
.ob-wz-step small { font: 600 15px/20px var(--font); color: var(--accent); }
.ob-wz-step h1 { margin-top: 8px; }
.ob-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ob-rules h3 { margin: 0 0 12px; font: 600 15px/20px var(--font); }
.ob-rules .pic { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; }
.ob-rules .pic .mark { position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; border-radius: 999px; background: var(--db-ffffff, #fff); display: grid; place-items: center; }
.ob-rules .pic .mark svg { width: 16px; height: 16px; }
.ob-rules ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ob-rules li { display: flex; gap: 8px; font: 400 15px/20px var(--font); }
.ob-rules li svg { width: 20px; height: 20px; flex: none; }
.ob-rules .ok svg { color: var(--df-1f8900, rgb(31, 137, 0)); }
.ob-rules .ko svg { color: var(--df-d4163a, rgb(212, 22, 58)); }
.ob-drop { padding: 48px 24px; border: 1px dashed var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 16px; background: var(--db-f9f9f9, rgb(249, 249, 249)); text-align: center; }
.ob-drop svg { width: 24px; height: 24px; display: block; margin: 0 auto; }
.ob-drop p { margin: 12px 0 16px; font: 600 17px/24px var(--font); }
.ob-drop small { display: block; margin: -8px 0 16px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-hint { margin: 8px 0 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-daytabs { margin-bottom: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.ob-daytabs button { height: 40px; min-width: 56px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); font: 500 15px/20px var(--font); }
.ob-daytabs button.on { background: var(--ink); color: var(--do-ffffff, #fff); box-shadow: none; }
.ob-daytabs button.off:not(.on) { color: var(--df-acacac, rgb(172, 172, 172)); }
.ob-dayrow { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--de-f2f2f2, rgb(242, 242, 242)); }
.ob-dayrow > label { width: 180px; display: flex; align-items: center; gap: 12px; font: 500 15px/20px var(--font); }
.ob-dayrow .times { display: flex; align-items: center; gap: 8px; }
.ob-dayrow .times .lp-time { min-width: 120px; }

/* ---------- Enlaces directos ---------- */
.ob-links-h { margin: 32px 0 12px; font: 600 20px/28px var(--font); }
.ob-tools + .ob-links-h { margin-top: 32px; }
.ob-rows { display: flex; flex-direction: column; gap: 12px; }
.ob-row { min-height: 88px; padding: 20px; display: flex; align-items: center; gap: 12px; }
.ob-row .ic { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; flex: none; color: #fff; }
.ob-row .ic svg { width: 20px; height: 20px; }
.ob-row .tx { flex: 1; min-width: 0; }
.ob-row .tx b { display: block; font: 600 15px/20px var(--font); }
.ob-row .tx small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-split { display: inline-flex; flex: none; }
.ob-split .tbtn:first-child { border-radius: 999px 0 0 999px; }
.ob-split .tbtn:last-child { margin-left: -1px; width: 40px; padding: 0; border-radius: 0 999px 999px 0; }
.ob-g-all { background: linear-gradient(135deg, rgb(135, 95, 255), rgb(90, 40, 220)); }
.ob-g-appt { background: linear-gradient(135deg, rgb(235, 90, 160), rgb(170, 40, 120)); }
.ob-g-mem { background: linear-gradient(135deg, rgb(240, 90, 160), rgb(150, 60, 220)); }
.ob-g-bono { background: linear-gradient(135deg, rgb(255, 160, 60), rgb(235, 70, 110)); }
.ob-g-gift { background: linear-gradient(135deg, rgb(160, 100, 255), rgb(110, 50, 230)); }
.ob-g-card { background: linear-gradient(135deg, rgb(80, 160, 255), rgb(60, 90, 230)); }
.ob-g-gbono { background: linear-gradient(135deg, rgb(255, 120, 120), rgb(220, 60, 160)); }
.ob-custom-empty { padding: 32px; text-align: center; }
.ob-custom-empty h3 { margin: 0; font: 600 17px/24px var(--font); }
.ob-custom-empty p { margin: 8px auto 16px; max-width: 420px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-form { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.ob-type { position: relative; }
.ob-type .bf-input { gap: 12px; padding-left: 8px; }
.ob-type .ic { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; color: #fff; flex: none; }
.ob-type .ic svg { width: 16px; height: 16px; }
.ob-type select { flex: 1; border: 0; background: transparent; font: inherit; appearance: none; height: 100%; outline: none; cursor: pointer; }
.ob-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); font: 400 15px/20px var(--font); }
.ob-pick button { color: var(--accent); font: 500 15px/20px var(--font); }
.ob-lbl { margin: 0 0 8px; font: 600 15px/20px var(--font); }
.ob-det { padding: 32px; }
.ob-det h2 { margin: 0 0 24px; font: 600 20px/28px var(--font); }
.ob-det .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.ob-det .grid p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-det .grid b { display: block; font: 400 15px/20px var(--font); color: var(--ink); }
.ob-mhead { margin-top: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ob-mhead h1 { margin: 0; font: 600 28px/36px var(--font); }
.ob-mhead .acts { display: flex; gap: 8px; flex: none; }
.ob-joined { display: inline-flex; }
.ob-joined .tbtn:first-child { border-radius: 999px 0 0 999px; }
.ob-joined .tbtn:last-child { margin-left: -1px; width: 48px; padding: 0; border-radius: 0 999px 999px 0; }
.ob-qr { display: grid; place-items: center; padding: 8px 0 16px; }
.ob-qr svg { width: 240px; height: 240px; }
.ob-list { display: flex; flex-direction: column; }
.ob-list label { min-height: 56px; padding: 8px 4px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--de-f2f2f2, rgb(242, 242, 242)); font: 400 15px/20px var(--font); cursor: pointer; }
.ob-list label.grp { font-weight: 600; }
.ob-list label.in { padding-left: 32px; }
.ob-list label .tx { flex: 1; min-width: 0; }
.ob-list label small { display: block; color: var(--df-767676, rgb(118, 118, 118)); }
.ob-list label .pr { font-weight: 500; }
.ob-list .count { font: 600 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-filter { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Sitio web inteligente ---------- */
.ob-web { padding-top: 8px; }
.ob-web .app { display: flex; align-items: center; gap: 12px; }
.ob-web .app i { width: 48px; height: 48px; border-radius: 8px; background: linear-gradient(135deg, rgb(70, 200, 210), rgb(80, 70, 210)); display: grid; place-items: center; color: #fff; }
.ob-web .app i svg { width: 24px; height: 24px; }
.ob-web .app b { display: block; font: 600 15px/20px var(--font); }
.ob-web .app small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-web h1 { margin: 28px 0 8px; font: 600 24px/32px var(--font); }
.ob-web > p { margin: 0; max-width: 755px; font: 400 15px/20px var(--font); }
.ob-web ul { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ob-web li { display: flex; gap: 12px; font: 400 15px/20px var(--font); }
.ob-web li svg { width: 20px; height: 20px; flex: none; }
.ob-web .price { margin: 32px 0 0; font: 600 20px/28px var(--font); }
.ob-web .btns { margin-top: 16px; display: flex; gap: 8px; }
.ob-web .btns .tbtn { height: 48px; padding: 0 20px; font-size: 17px; }
.ob-sites { margin-top: 48px; display: flex; gap: 24px; align-items: center; overflow: hidden; }
.ob-site { flex: none; width: 260px; height: 190px; border-radius: 8px; box-shadow: 0 8px 30px rgba(19, 19, 19, .14); overflow: hidden; position: relative; color: #fff; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.ob-site.big { width: 340px; height: 250px; }
.ob-site b { font: 600 26px/28px Georgia, serif; }
.ob-site small { font: 500 11px/14px var(--font); opacity: .85; }
.ob-site .nav { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; font: 500 8px/10px var(--font); opacity: .8; }

/* ---------- Tienda de productos ---------- */
.ob-store { margin-top: 24px; padding: 24px 32px; display: flex; flex-direction: column; gap: 4px; max-width: 642px; }
.ob-store .top { display: flex; justify-content: space-between; gap: 16px; }
.ob-store h2 { margin: 0; font: 600 20px/28px var(--font); }
.ob-store .upd { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-store .meta { display: flex; align-items: center; gap: 4px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-store .meta svg { width: 16px; height: 16px; }
.ob-store .bot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.ob-sc { display: grid; grid-template-columns: 382px minmax(0, 1fr); flex: 1; min-height: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.ob-sc-side { padding: 16px 24px 40px; overflow-y: auto; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; gap: 16px; }
.ob-sc-side h2 { margin: 0; font: 600 20px/28px var(--font); }
.ob-sc-side > p { margin: -12px 0 0; font: 400 15px/20px var(--font); }
.ob-sc-side .tbtn { width: 100%; height: 48px; }
.ob-sc-side hr { width: 100%; margin: 24px 0 0; border: 0; }
.ob-logo { height: 150px; width: 150px; border-radius: 8px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 500 15px/20px var(--font); }
.ob-logo svg { width: 20px; height: 20px; }
.ob-sc-prev { overflow-y: auto; background: var(--db-ffffff, #fff); }
.ob-sc-prev .bar { height: 64px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 400 17px/24px var(--font); }
.ob-sc-prev .bar span { display: inline-flex; align-items: center; gap: 8px; }
.ob-sc-prev .bar svg { width: 22px; height: 22px; }
.ob-sc-prev h3 { margin: 40px 0 8px; text-align: center; font: 600 20px/28px var(--font); }
.ob-sc-prev .desc { margin: 0 auto 40px; max-width: 480px; text-align: center; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-prods { padding: 0 20px 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 44px; }
.ob-prod .pic { aspect-ratio: 1; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); display: grid; place-items: center; color: var(--df-e5e5e5, rgb(229, 229, 229)); }
.ob-prod .pic svg { width: 40%; height: 60%; }
.ob-prod .price { margin-top: 16px; font: 600 20px/28px var(--font); }
.ob-prod .price em { font: 500 17px/24px var(--font); font-style: normal; color: var(--df-1f8900, rgb(31, 137, 0)); margin-left: 8px; }
.ob-prod p { margin: 4px 0 0; font: 400 17px/24px var(--font); }
.ob-prod small { display: block; margin-top: 8px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ob-prod .tbtn { margin-top: 16px; }

@media (max-width: 1023px) {
  .ob-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-loc { grid-template-columns: 1fr; gap: 0; }
  .ob-loc-img { min-height: 160px; }
  .ob-loc-b { padding: 24px; }
  .ob-promo, .ob-land { grid-template-columns: 1fr; }
  .ob-collage { min-height: 300px; }
  .ob-cols { grid-template-columns: 1fr; }
  .ob-land-bg { display: none; }
  .ob-sc { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ob-head, .ob-ph, .ob-mhead { flex-direction: column; }
  .ob-tools { flex-wrap: wrap; }
  .ob-tools .t-search { width: 100%; }
  .ob-tools .sp { display: none; }
  .ob-rules { grid-template-columns: 1fr; }
  .ob-wz-in { padding: 24px 16px 80px; }
  .ob-wz-in h1, .ob-land h1 { font-size: 28px; line-height: 36px; }
  .ob-wz-top { padding: 0 16px; }
  .ob-wz-top .title { position: static; transform: none; flex: 1; }
  .ob-det .grid { grid-template-columns: 1fr; }
  .ob-row { flex-wrap: wrap; }
  .ob-sec { padding: 24px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pkp-body .ob-list { margin-top: 16px; }
.pkp-body .bf-lead { margin: 8px 0 16px; }
/* "Descripción del lugar" (Fresha): one 15 px-cornered box with the AI button inside at the
   bottom left; it grows with the text. */
.ob-descbox { position: relative; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15px; background: var(--db-ffffff, #fff); transition: border-color .15s, box-shadow .15s; }
.ob-descbox:hover { border-color: var(--de-acacac, rgb(172, 172, 172)); }
.ob-descbox:focus-within { border-color: rgb(105, 80, 243); box-shadow: 0 0 0 1px rgb(105, 80, 243); }
.ob-descbox .ob-desc { display: block; width: 100%; box-sizing: border-box; min-height: 120px; max-height: 480px; field-sizing: content; padding: 16px 16px 68px; border: 0; border-radius: 15px; background: none; box-shadow: none; resize: vertical; font: 400 15px/20px var(--font); }
.ob-descbox .ob-desc:focus { outline: none; box-shadow: none; }
.ob-descbox .ob-desc::placeholder { color: var(--df-acacac, rgb(172, 172, 172)); }
.ob-descbox .ai-btn { position: absolute; left: 16px; bottom: 16px; }
.ob-descbox + .lp-help { margin-top: 8px; }
.ob-descbox:has(.ob-desc.bad) { border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.lp-area.bad { border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.ob-chip.ro { cursor: default; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
/* The presentation full screen over Complementos (Fresha's intro window). */
.ob-over { position: fixed; inset: 0; z-index: 35; background: var(--db-ffffff, #fff); overflow: auto; animation: ob-over-in .2s ease-out; }
@keyframes ob-over-in { from { opacity: 0; transform: translateY(12px); } }
.ob-over-x { position: fixed; top: 24px; right: 24px; z-index: 2; width: 48px; height: 48px; }
.ob-over-x svg { width: 24px; height: 24px; }
.ob-over-in { position: relative; min-height: 100%; padding: 64px 48px; box-sizing: border-box; }
.ob-over-in .ob-land { min-height: calc(100vh - 128px); }
.ob-price { margin-top: 48px; }
.ob-price .save { display: block; font: 400 15px/20px var(--font); color: var(--df-1f8900, rgb(31, 137, 0)); }
.ob-price b { display: block; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.ob-price s { color: var(--df-767676, rgb(118, 118, 118)); }
.ob-price p { margin: 0; font: 500 17px/24px var(--font); }
.ob-badge.grad span:first-child { width: 32px; height: 32px; border-radius: 8px; box-shadow: none; color: #fff; }
.ob-badge.grad span:first-child svg { width: 18px; height: 18px; }
.ob-badge small { display: block; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* The add-on art: its picture large, on a soft ring, as Fresha's illustrations. */
.ob-addon-art { position: absolute; inset: 40px 0; display: grid; place-items: center; }
.ob-addon-art .ring { width: 300px; height: 300px; border-radius: 72px; display: grid; place-items: center; opacity: .95; box-shadow: 0 30px 60px rgba(105, 80, 243, 0.18); }
.ob-addon-art .ring i { width: 220px; height: 220px; border-radius: 52px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); color: #fff; }
.ob-addon-art .ring svg { width: 110px; height: 110px; stroke-width: 1.4; }
.ob-addon-art .ring.white { background: var(--db-ffffff, #fff); box-shadow: 0 30px 60px rgba(19, 19, 19, 0.12), inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.ob-addon-art .ring.white i { background: none; box-shadow: none; }
.ob-addon-art .ring.white svg, .ob-addon-art .ring.white b { transform: scale(3.2); }
/* "Recepcionista virtual con IA": Fresha's dark version. */
.ob-over.dark { background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); }
.ob-over.dark .ob-over-x { color: #fff; background: rgba(255, 255, 255, 0.12); }
.ob-over.dark .ob-land .lead, .ob-over.dark .ob-land li { color: rgba(255, 255, 255, 0.85); }
.ob-over.dark .tbtn.dark { background: var(--db-ffffff, #fff); color: var(--df-0d0d0d, rgb(13, 13, 13)); border-color: var(--de-ffffff, #fff); }
.ob-over.dark .tbtn.ghost { color: #fff; }
.ob-over.dark .tbtn.try { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.ob-over.dark .ob-badge small { color: rgba(255, 255, 255, 0.6); }
.ob-dark-art { position: fixed; top: 16px; right: 16px; bottom: 16px; width: calc(45% - 16px); border-radius: 24px; background: radial-gradient(80% 60% at 70% 10%, rgb(196, 140, 255), transparent 70%), radial-gradient(70% 70% at 30% 80%, rgb(70, 60, 200), transparent 70%), linear-gradient(160deg, rgb(120, 80, 230), rgb(40, 30, 120)); }
.ob-over.dark .ob-art { visibility: visible; }
@media (max-width: 767px) { .ob-dark-art { display: none; } }
/* Phones (Fresha's Presencia online at 402 px). Enlaces directos: "+ Añadir" in the bar, the
   search with a round filter button, each link a plain row with a ⋮. Perfil del marketplace:
   one card with the figures as rows and the note under a line; search and the place filter
   on one line, no sort button. */
@media (max-width: 767px) {
  .sec-app .ob-head > .tbtn.dark { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 18px); right: 20px; margin: 0; height: 36px; padding: 0 16px 0 12px; gap: 4px; border-color: var(--t-border); background: var(--db-ffffff, #fff); color: var(--ink); font-size: 0; }
  .sec-app .ob-head > .tbtn.dark::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>') center / 20px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>') center / 20px no-repeat; }
  .sec-app .ob-head > .tbtn.dark::after { content: attr(data-m); font: 600 15px/20px var(--font); }
  .ob-tools { flex-wrap: nowrap; gap: 12px; }
  .ob-tools .t-search { flex: 1; width: auto; }
  .ob-tools > #filters { width: 36px; padding: 0; justify-content: center; flex: none; position: relative; }
  .ob-tools > #filters > span:not([data-icon]):not(.menu-badge) { display: none; }
  .ob-tools > #sort, .ob-tools > .sp { display: none; }
  .ob-rows { gap: 4px; }
  .ob-row { min-height: 0; padding: 12px 0; border-radius: 0; box-shadow: none; background: none; }
  .ob-row .ic { width: 40px; height: 40px; }
  .ob-split .tbtn:first-child { display: none; }
  .ob-split .tbtn:last-child { width: 36px; margin: 0; border: 0; border-radius: 999px; background: none; font-size: 0; }
  .ob-split .tbtn:last-child svg { display: none; }
  .ob-split .tbtn:last-child::after { content: ""; width: 24px; height: 24px; background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 23.33A2.33 2.33 0 1 1 16 28a2.33 2.33 0 0 1 0-4.67m0-9.66a2.33 2.33 0 1 1 0 4.66 2.33 2.33 0 0 1 0-4.66M16 4a2.33 2.33 0 1 1 0 4.67A2.33 2.33 0 0 1 16 4"/></svg>') center / 24px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 23.33A2.33 2.33 0 1 1 16 28a2.33 2.33 0 0 1 0-4.67m0-9.66a2.33 2.33 0 1 1 0 4.66 2.33 2.33 0 0 1 0-4.66M16 4a2.33 2.33 0 1 1 0 4.67A2.33 2.33 0 0 1 16 4"/></svg>') center / 24px no-repeat; }
  .ob-stats { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 16px; border-radius: 20px 20px 0 0; background: var(--db-ffffff, #fff); box-shadow: inset 1px 1px 0 rgba(19, 19, 19, .1), inset -1px 0 0 rgba(19, 19, 19, .1); }
  .ob-stat { min-height: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; border-radius: 0; box-shadow: none; background: none; }
  .ob-stat-h p { font: 400 15px/20px var(--font); }
  .ob-stat-h :is(button, span[data-tip], .ob-i) { display: none; }
  .ob-stat strong { margin: 0; font: 600 15px/20px var(--font); }
  .ob-stat:nth-child(4) { display: none; }
  .ob-foot { margin: 0; padding: 16px 24px 24px; border-radius: 0 0 20px 20px; background: var(--db-ffffff, #fff); box-shadow: inset 1px 0 0 rgba(19, 19, 19, .1), inset -1px -1px 0 rgba(19, 19, 19, .1), inset 0 1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
}

/* ---------- "Publicar" / "Editar" del perfil del marketplace (Fresha's wizard, measured) ----------
   The bar (two segments, one per part) sits on top; under it ←, the step's title when the
   page has scrolled, and the buttons, 48 px tall. Blocks appear one after another. */
.ob-wz.pf { --pf-pad: 32px; }
.pf .ob-wz-bar { order: -1; height: 4px; margin: 12px var(--pf-pad) 0; }
.pf .ob-wz-bar i { background: var(--db-131313-5, rgba(19, 19, 19, 0.05)); }
.pf .ob-wz-bar i b { background: rgb(105, 80, 243); transition: width .3s cubic-bezier(.85, 0, .15, 1); }
.pf .ob-wz-top { height: auto; padding: 12px var(--pf-pad) 12px; gap: 8px; }
.pf .ob-wz-top > * { margin: 0; }
.pf .ob-wz-top .tbtn { height: 48px; padding: 0 20px; font: 600 17px/24px var(--font); }
.pf .ob-wz-top .tbtn svg { width: 24px; height: 24px; }
.pf .ob-wz-top .tbtn.ghost:disabled { opacity: 1; color: var(--df-acacac, rgb(172, 172, 172)); background: none; }
.pf-back { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); cursor: pointer; }
.pf-back:hover { background: var(--db-f4f4f4-h, #f4f4f4); }
.pf-back svg, .pf-ico svg { width: 24px; height: 24px; }
.pf-title { margin-left: 8px; font: 600 20px/28px var(--font); letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s cubic-bezier(.85, 0, .15, 1); }
.pf.scrolled .pf-title { opacity: 1; }
.pf-ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; }
.pf-ico:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.pf-ico:disabled { opacity: .3; cursor: default; }
.pf-ico.del { color: var(--df-d4163a, rgb(212, 22, 58)); }
.pf-m { display: none; }
.pf-foot { display: flex; }
.pf .ob-wz-in { max-width: 632px; padding: 48px 0 96px; }
.pf .ob-wz-in.wide { max-width: 1264px; padding-left: 40px; padding-right: 40px; box-sizing: border-box; }
.pf .ob-drop { min-height: 284px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; border-radius: 15px; cursor: pointer; transition: background-color .15s;
  background: var(--db-f9f9f9, rgb(249, 249, 249)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='.5' y='.5' width='calc(100%25 - 1px)' height='calc(100%25 - 1px)' rx='15' fill='none' stroke='%23d3d3d3' stroke-dasharray='4 4'/%3E%3C/svg%3E"); }
.pf .ob-drop:hover .tbtn { background: var(--db-f4f4f4-h, #f4f4f4); }
.pf .ob-drop.over { background-color: var(--db-f0f0ff, rgb(240, 240, 255)); }
.pf .ob-drop svg { width: 32px; height: 32px; }
.pf .ob-drop p { margin: 12px 0 0; font: 600 20px/28px var(--font); }
.pf .ob-drop small { margin: 12px 0 24px; }
.pf .ob-drop .tbtn { width: auto; height: 36px; padding: 0 15px; }
.pf .ob-wz-in h1 { margin: 0 0 12px; letter-spacing: -0.2px; }
.pf .ob-wz-in > p.lead { margin: 0 0 32px; }
.pf-info .ob-wz-in > p.lead { margin-bottom: 32px; }
@keyframes pf-appear { from { opacity: 0; transform: translateY(12px); } }
.ob-ap { animation: pf-appear .2s cubic-bezier(0, .55, .45, 1) both; animation-delay: calc(var(--ap, 0) * 50ms); }
@media (prefers-reduced-motion: reduce) { .ob-ap { animation: none; } }

/* Presentation: the claim on the left, the three steps on the right, both 480 px. */
.pf-hero .ob-wz-in { max-width: 1024px; min-height: 100%; display: flex; padding: 20px 0 134px; box-sizing: border-box; }
.pf-hero .pf-hero { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pf-hero h1 { margin: 0; font: 700 48px/52px var(--font); letter-spacing: -0.2px; }
.pf-grad { background: linear-gradient(90deg, rgb(105, 80, 243), rgb(166, 99, 255) 60%, rgb(196, 112, 245)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-hero ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 32px; }
.pf-hero hr { margin: 6px 0 0; border: 0; height: 1px; background: var(--db-e5e5e5, rgb(229, 229, 229)); }
.pf-hero li hr + .row { padding-top: 32px; }
.pf-hero .row { display: flex; align-items: flex-start; gap: 12px; }
.pf-hero .row > b, .pf-hero .t { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.pf-hero .row > div { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.pf-hero .x { margin: 0; font: 400 17px/24px var(--font); letter-spacing: -0.2px; color: var(--df-767676, rgb(118, 118, 118)); }
.pf-hero .art { width: 80px; height: 80px; flex: none; }
.pf-hero .art svg, .pf-intro .art svg { width: 100%; height: 100%; display: block; }

/* "Paso 1" / "Paso 2": the picture centred, the text under it. */
.pf-intro .ob-wz-in { max-width: 960px; min-height: 100%; display: flex; padding: 0 0 96px; box-sizing: border-box; }
.pf-intro .pf-intro { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pf-intro .art { width: 220px; height: 220px; margin: 0 auto 24px; }
.pf-intro .n { margin: 0 0 16px; font: 600 17px/24px var(--font); }
.pf .pf-intro h1 { margin: 0 0 24px; }
.pf-intro .x { margin: 0; font: 400 17px/24px var(--font); }

/* Instrucciones sobre imágenes: the two photos side by side, 16:9. */
.pf .ob-rules { gap: 32px; }
.pf .ob-rules h3 { margin: 0 0 16px; font: 600 17px/24px var(--font); }
.pf .ob-rules .pic { aspect-ratio: 16 / 9; border-radius: 10px; background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.pf .ob-rules .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf .ob-rules .pic .mark { top: 14px; left: 14px; width: 28px; height: 28px; }
.pf .ob-rules .ok .pic .mark svg { color: var(--df-1f8900, rgb(31, 137, 0)); }
.pf .ob-rules .ko .pic .mark svg { color: var(--df-0d0d0d, rgb(13, 13, 13)); }
.pf .ob-rules .pic .logo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font: 500 34px/40px Georgia, serif; letter-spacing: 4px; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.pf .ob-rules .pic .logo i { font-style: normal; font-size: 30px; line-height: 34px; }
.pf .ob-rules .pic .logo small { font: italic 400 15px/20px Georgia, serif; letter-spacing: 1px; }
.pf .ob-rules ul { margin-top: 24px; }

/* Horario de atención. */
.pf-days { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.pf-day { width: 64px; height: 64px; border-radius: 999px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); color: var(--ink); font: 600 17px/24px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.pf-day:hover { background: var(--db-f4f4f4-h, #f4f4f4); }
.pf-day[aria-pressed="true"] { border-color: rgb(105, 80, 243); background: rgb(105, 80, 243); color: #fff; }
.pf-week { display: flex; flex-direction: column; gap: 16px; }
.pf-wd { display: flex; align-items: flex-start; }
.pf-wd.closed { display: none; }
.pf-chk { width: 202px; flex: none; display: flex; gap: 16px; }
.pf-chk input { display: none; }
.pf-chk h3, .pf-chk h4 { margin: 0; font: 600 15px/20px var(--font); }
.pf-chk h4 { font-weight: 400; color: var(--df-1f8900, rgb(31, 137, 0)); }
.pf-wd.closed .pf-chk h4 { color: var(--df-767676, rgb(118, 118, 118)); }
.pf-rs { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.pf-range { display: flex; align-items: center; gap: 16px; }
.pf-range .to { font: 400 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pf-range .pf-ico { margin-left: auto; }
.pf-sel { position: relative; width: 145px; height: 48px; flex: none; }
.pf-sel select { width: 100%; height: 100%; padding: 0 40px 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 12px; background: var(--db-ffffff, #fff); color: var(--ink); font: 400 15px/20px var(--font); appearance: none; cursor: pointer; }
.pf-sel select:hover { border-color: var(--de-acacac, rgb(172, 172, 172)); }
.pf-sel select:focus { outline: none; border-color: rgb(105, 80, 243); box-shadow: 0 0 0 1px rgb(105, 80, 243); }
.pf-sel svg { position: absolute; right: 16px; top: 14px; width: 20px; height: 20px; pointer-events: none; }
.pf-copy { width: 403px; max-width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.pf-copy p { flex: 1; margin: 0; font: 400 15px/20px var(--font); }
.pf-copy .tbtn { flex: none; }
.pf-mr, .pf-mx { display: none; }

/* Menus and the hours sheet open over the wizard. */
body:has(.ob-wz.pf) .popover, body:has(.ob-wz.pf) .mn-wrap, .team-backdrop:has(.pf-sheet-dlg) { z-index: 80; }
.pf-sheet { position: relative; display: flex; flex-direction: column; }
.pf-sheet > .pf-ico { position: absolute; top: -12px; right: -12px; }
.pf-sheet h2 { margin: 24px 0 24px; font: 600 28px/36px var(--font); }
.pf-sheet .pf-range { gap: 12px; }
.pf-sheet .pf-sel { flex: 1; width: auto; }
.pf-sheet .tbtn { margin-top: 32px; }

@media (max-width: 1023px) {
  .pf-hero .pf-hero { gap: 48px; }
  .pf .ob-wz-in { padding-left: var(--pf-pad); padding-right: var(--pf-pad); }
}
/* Phones (402 px): ← ⋮ ×, Continuar fixed at the bottom, the steps stacked. */
@media (max-width: 767px) {
  .ob-wz.pf { --pf-pad: 20px; }
  .pf .ob-wz-top { padding: 12px 8px; }
  .pf-d, .pf-title { display: none; }
  .pf-m { display: grid; }
  .pf-back { border: 0; background: none; }
  .pf-foot { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--db-ffffff, #fff); box-shadow: 0 -1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
  .pf-foot .pf-next { width: 100%; height: 48px; }
  .pf-foot .pf-next svg { display: none; }
  .pf .ob-wz-body { padding-bottom: 80px; }
  .pf .ob-wz-in, .pf-hero .ob-wz-in, .pf-intro .ob-wz-in { padding: 8px 20px 32px; }
  .pf .ob-wz-in.wide { padding-left: 20px; padding-right: 20px; }
  .pf .ob-drop { min-height: 240px; padding: 24px 20px; text-align: center; }
  .pf .ob-wz-in h1 { font: 600 28px/36px var(--font); }
  .pf-hero .ob-wz-in { display: block; padding-top: 40px; }
  .pf-hero .pf-hero { display: block; }
  .pf .pf-hero h1 { margin-bottom: 32px; }
  .pf-hero .row > b, .pf-hero .t { font: 600 20px/28px var(--font); }
  .pf-hero .x { font: 400 15px/20px var(--font); }
  .pf-hero .art { width: 64px; height: 64px; }
  .pf-intro .art { width: 180px; height: 180px; }
  .pf .ob-rules { gap: 32px; }
  .pf-days { display: none; }
  .pf-week { gap: 24px; }
  .pf-wd, .pf-wd.closed { display: flex; align-items: center; gap: 12px; }
  .pf-chk { width: auto; flex: 1; align-items: flex-start; cursor: pointer; }
  .pf-chk input { display: block; flex: none; width: 28px; height: 28px; margin: 0; accent-color: var(--df-6950f3, rgb(105, 80, 243)); }
  .pf-chk h3 { font: 400 17px/24px var(--font); }
  .pf-rs { display: none; }
  .pf-mr { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
  .pf-mr > * { flex: none; }
  .pf .pf-link { margin: 0; border: 0; background: none; padding: 0; color: var(--df-6950f3, rgb(105, 80, 243)); font: 400 17px/24px var(--font); cursor: pointer; }
  .pf-mx { display: grid; }
  .team-backdrop:has(.pf-sheet-dlg) { padding: 0; align-items: end; }
  .team-dialog.pf-sheet-dlg { max-width: none; height: calc(100dvh - 48px); max-height: none; border-radius: 24px 24px 0 0; padding: 24px 20px calc(16px + env(safe-area-inset-bottom)); display: flex; }
  .pf-sheet-dlg .pf-sheet { flex: 1; }
  .pf-sheet > .pf-ico { top: -8px; right: -8px; }
  .pf-sheet .tbtn { margin-top: auto; width: 100%; }
}

/* "¿Dónde se encuentra tu negocio?": search box, then the map card with the address and Editar. */
.pf .ob-lbl { display: block; margin: 0 0 8px; }
.pf-search { position: relative; z-index: 1000; margin-bottom: 24px; }
.pf-search-in { height: 48px; display: flex; align-items: center; gap: 0; padding-left: 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 12px; background: var(--db-ffffff, #fff); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.pf-search-in:hover { border-color: var(--de-acacac, rgb(172, 172, 172)); }
.pf-search-in:focus-within { border-color: rgb(105, 80, 243); box-shadow: 0 0 0 1px rgb(105, 80, 243); }
.pf-search-in svg { width: 20px; height: 20px; flex: none; color: var(--df-767676, rgb(118, 118, 118)); }
.pf-search-in input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 0; background: none; font: 400 15px/20px var(--font); color: var(--ink); outline: none; }
.pf-hits { position: absolute; z-index: 5; top: 56px; left: 0; right: 0; margin: 0; padding: 8px 0; list-style: none; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)), 0 8px 24px rgba(19, 19, 19, .12); max-height: 320px; overflow-y: auto; }
.pf-hits li { display: block; padding: 14px 20px; font: 400 15px/20px var(--font); cursor: pointer; }
.pf-hits li:hover, .pf-hits li.on { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.pf-hits li svg { width: 20px; height: 20px; flex: none; color: var(--df-767676, rgb(118, 118, 118)); }
.pf-hits li.none { color: var(--df-767676, rgb(118, 118, 118)); cursor: default; background: none; }
.pf-mapcard { border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); }
.pf-mapwrap { position: relative; height: 356px; background: var(--db-f0f0f0, rgb(240, 240, 240)); }
.pf-mapwrap:empty { display: none; }
.pf-mapwrap .lp-map { position: absolute; inset: 0; }
.pf-addr { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.pf-addr p { margin: 0; display: flex; flex-direction: column; font: 400 15px/20px var(--font); }
.pf-addr .tbtn { flex: none; height: 36px; padding: 0 15px; font: 500 15px/20px var(--font); }
.pf-maphint { margin-top: 10px; font: 400 15px/20px var(--font); }

/* "Introduce la dirección manualmente" (720 px, the country locked). */
.team-backdrop:has(.pf-man) { z-index: 80; background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
.team-dialog.pf-man { max-width: 720px; padding: 0; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; }
.pf-man-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 40px 8px 48px; }
.pf-man-small { margin: 0; font: 600 20px/28px var(--font); opacity: 0; transition: opacity .2s; }
.pf-man.scrolled .pf-man-small { opacity: 1; }
.pf-man.scrolled .pf-man-head { box-shadow: 0 1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
.pf-man-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 48px 16px; }
.pf-man-body h2 { margin: 0 0 32px; padding: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.pf-man-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-bottom: 24px; }
.pf-man-body .bf-field { margin: 0; }
.pf-man-body > .bf-field + .bf-field { margin-top: 24px; }
.pf-man-body .lp-area { min-height: 120px; }
.pf-locked { position: relative; background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.pf-locked select { width: 100%; height: 46px; padding: 0 40px 0 16px; border: 0; background: none; color: var(--df-808080, rgb(128, 128, 128)); font: 400 15px/20px var(--font); appearance: none; opacity: 1; }
.pf-locked svg { position: absolute; right: 16px; top: 14px; width: 20px; height: 20px; color: var(--df-acacac, rgb(172, 172, 172)); pointer-events: none; }
.pf-man-foot { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 48px 32px; }
.pf-man-foot .tbtn { height: 48px; font: 600 17px/24px var(--font); }
@media (max-width: 767px) {
  .pf-mapwrap { height: 280px; }
  .team-backdrop:has(.pf-man) { padding: 0; align-items: end; }
  .team-dialog.pf-man { height: calc(100dvh - 48px); max-height: none; border-radius: 24px 24px 0 0; }
  .pf-man-head { padding: 16px 12px 8px 20px; }
  .pf-man-body { padding: 8px 20px 16px; }
  .pf-man-grid { grid-template-columns: 1fr; }
  .pf-man-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
}

/* Venue photos: the box turns red under 3 ("Debes tener al menos 3 imágenes", as Fresha);
   the thumbnails in a grid, the first one the cover, dragged to change the order. */
.pf .ob-drop.bad { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='.5' y='.5' width='calc(100%25 - 1px)' height='calc(100%25 - 1px)' rx='15' fill='none' stroke='%23d4163a' stroke-dasharray='4 4'/%3E%3C/svg%3E"); }
.pf-err { margin: 8px 0 0; font: 400 13px/16px var(--font); color: var(--df-d4163a, rgb(212, 22, 58)); }
/* Fresha's grid (measured): 3 columns 8 px / 12 px apart, 16:9 tiles with 15 px corners,
   the cover over two columns and two rows, ⋮ white 28 px at the top right, a grey + tile. */
.pf-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-top: 16px; align-items: start; }
.pf-photos:empty { display: none; }
.pf-photo { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 15px; overflow: hidden; background: var(--db-f2f2f2, rgb(242, 242, 242)); box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .08); cursor: grab; transition: opacity .15s, box-shadow .15s; }
.pf-photo:first-child { grid-column: span 2; grid-row: span 2; }
.pf-photos.ro .pf-photo { cursor: default; }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pf-photo.drag { opacity: .45; box-shadow: 0 0 0 2px rgb(105, 80, 243); }
.pf-photo.up { display: grid; place-items: center; cursor: default; --busy-ink: rgb(118, 118, 118); }
.pf-photo.up .btn-loader { position: static; transform: none; }
.pf-view { position: absolute; inset: 0; border: 0; background: none; cursor: inherit; }
.pf-cover { position: absolute; left: 8px; bottom: 8px; height: 24px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--df-6950f3, rgb(105, 80, 243)); font: 500 13px/16px var(--font); pointer-events: none; }
.pf-more { position: absolute; right: 9px; top: 9px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--ink); box-shadow: rgba(13, 13, 13, .12) 0 8px 40px; cursor: pointer; }
.pf-more svg { width: 16px; height: 16px; }
.pf-add { aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 15px; background: var(--db-f2f2f2, rgb(242, 242, 242)); cursor: pointer; transition: background .15s; }
.pf-add:hover { background: var(--db-e8e8e8-h, rgb(232, 232, 232)); }
.pf-add svg { width: 24px; height: 24px; }
/* With photos, the drop box is Fresha's slim bar: the text on the left, the button on the right. */
.pf .ob-drop.compact { min-height: 92px; flex-direction: row; justify-content: space-between; padding: 0 24px; border-radius: 20px; text-align: left; }
.pf .ob-drop.compact > svg { display: none; }
.pf .ob-drop.compact p { margin: 0; font: 600 17px/24px var(--font); }
.pf .ob-drop.compact small { margin: 0; }
.pf .ob-drop.compact p + small { display: block; }
.pf .ob-drop.compact { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; column-gap: 16px; }
.pf .ob-drop.compact .tbtn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (max-width: 767px) {
  .pf-photos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf .ob-drop.compact { padding: 16px 20px; }
}
/* "Recortar imagen" (720 px) and the full-screen viewer. */
.team-backdrop:has(.pf-crop-dlg), .team-backdrop:has(.pf-lb-dlg) { z-index: 80; background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
.team-dialog.pf-crop-dlg { max-width: 720px; padding: 30px 48px 32px; border-radius: 30px; }
.pf-crop-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.pf-crop-head h2 { margin: 0; padding: 0; font: 600 20px/28px var(--font); }
.pf-crop-head p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pf-crop-head .pf-ico { margin: -10px -12px 0 0; }
.pf-crop { position: relative; user-select: none; touch-action: none; }
.pf-crop img { display: block; width: 100%; height: auto; cursor: crosshair; }
.pf-crop-box { position: absolute; box-sizing: border-box; border: 1px dashed var(--de-ffffff, #fff); outline: 1px dashed var(--de-0d0d0d, rgb(13, 13, 13)); outline-offset: -1px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); cursor: move; }
.pf-crop { overflow: hidden; }
.pf-crop-box i { position: absolute; }
.pf-crop-box [data-e="n"], .pf-crop-box [data-e="s"] { left: 0; right: 0; height: 12px; cursor: ns-resize; }
.pf-crop-box [data-e="n"] { top: -6px; } .pf-crop-box [data-e="s"] { bottom: -6px; }
.pf-crop-box [data-e="e"], .pf-crop-box [data-e="w"] { top: 0; bottom: 0; width: 12px; cursor: ew-resize; }
.pf-crop-box [data-e="e"] { right: -6px; } .pf-crop-box [data-e="w"] { left: -6px; }
.pf-crop-foot { display: flex; justify-content: flex-end; gap: 16px; margin-top: 32px; }
.team-backdrop:has(.pf-lb-dlg) { padding: 0; background: var(--db-0d0d0d-92, rgba(13, 13, 13, .92)); }
.team-dialog.pf-lb-dlg { max-width: none; width: 100vw; height: 100dvh; max-height: none; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.pf-lb { position: relative; height: 100%; display: grid; place-items: center; }
.pf-lb img { max-width: calc(100% - 160px); max-height: calc(100% - 120px); border-radius: 12px; }
.pf-lb .pf-ico { position: absolute; background: var(--db-ffffff, #fff); color: var(--ink); }
.pf-lb-x { top: 24px; right: 24px; }
.pf-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.pf-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.pf-lb-n { position: absolute; bottom: 24px; margin: 0; color: #fff; font: 500 15px/20px var(--font); }
@media (max-width: 767px) {
  .team-dialog.pf-crop-dlg { padding: 24px 20px; border-radius: 24px; }
  .pf-lb img { max-width: 100%; border-radius: 0; }
  .pf-lb-prev, .pf-lb-next { top: auto; bottom: 16px; transform: none; }
}
.ob-loc-img { position: relative; overflow: hidden; }
.ob-loc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* "Haz que tu perfil destaque": Fresha's chips (36 px, icon 20 px, 6 px from the text). */
.ob-chip-grp .ob-chip { height: 36px; padding: 0 15px; gap: 6px; }
.ob-chip-grp .ob-chip svg { width: 20px; height: 20px; flex: none; }
.ob-chip-grp .ob-chips { gap: 12px 8px; }
@media (min-width: 1200px) { .pf-form .ob-wz-in:not(.wide) { max-width: 696px; } }

/* First screen of Perfil del marketplace, before any profile exists (Fresha, 2026-11-06). */
.ob-intro-page { padding: 0 !important; max-width: none !important; width: 100% !important; }
.ob-intro { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 48px; min-height: calc(100dvh - 64px); padding: 40px 32px; background: radial-gradient(circle at 100% 90%, var(--db-d2f5be, rgb(210, 245, 190)) 0%, transparent 28%), radial-gradient(circle at 100% 25%, rgb(140, 235, 225) 0%, transparent 42%), var(--db-f7f7f7, rgb(247, 247, 247)); }
.ob-intro-t { width: min(510px, 100%); }
.ob-intro-t h1 { margin: 0 0 20px; font: 700 40px/44px var(--font); letter-spacing: -.5px; }
.ob-intro-l { margin: 0 0 16px; font: 400 17px/24px var(--font); }
.ob-intro-t ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 15px/20px var(--font); }
.ob-intro-t li { display: flex; gap: 12px; }
.ob-intro-t li svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.ob-intro-f { display: flex; align-items: center; gap: 8px; margin-top: 48px; }
.ob-intro-f .tbtn { text-decoration: none; }
.ob-intro-art { flex: none; font-size: 16px; }
@media (max-width: 1023px) { .ob-intro { flex-direction: column; align-items: flex-start; } .ob-intro-art { align-self: center; font-size: 13px; } }
@media (max-width: 767px) { .ob-intro { min-height: 0; padding: 24px 20px 40px; gap: 32px; } .ob-intro-t h1 { font: 700 28px/36px var(--font); } .ob-intro-art { font-size: 12px; } .ob-intro-f { margin-top: 24px; flex-wrap: wrap; } }

/* Enlaces directos while no centre is on the marketplace (Fresha, 1024 × 180 at 1470). */
.ob-market { position: relative; min-height: 180px; margin: 24px 0 8px; border-radius: 15.24px; overflow: hidden; color: #fff;
  background: linear-gradient(100deg, #6f2ee3 0%, #8f3fe6 45%, #b778ee 75%, var(--db-d9b6f7, #d9b6f7) 100%); }
.ob-market-t { position: relative; z-index: 1; box-sizing: border-box; width: min(746px, 100% - 300px); padding: 24px; }
.ob-market h2 { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; color: #fff; }
.ob-market p { margin: 4px 0 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.ob-market-b { display: flex; gap: 8px; margin-top: 24px; }
.ob-market-b .tbtn { height: 36px; padding: 0 16px; text-decoration: none; }
.ob-market-b a.tbtn { background: var(--db-ffffff, #fff); border-color: var(--de-ffffff, #fff); color: var(--df-0d0d0d, #0d0d0d); }
.ob-market-b .tbtn.ghost { background: none; border-color: transparent; color: #fff; }
.ob-market-art { position: absolute; right: 24px; top: 10px; font-size: 11px; }
@media (max-width: 767px) { .ob-market-t { width: auto; } .ob-market-art { display: none; } }
html[data-theme="dark"] .ob-market-b a.tbtn { background: #fff; border-color: #fff; color: #0d0d0d; } html[data-theme="dark"] .ob-market h2, html[data-theme="dark"] .ob-market { color: #fff; }