/* Los seis estilos comparten la misma agenda y los mismos controles de accesibilidad. */
.brand-page,.brand-preview{--brand-bg:#f5f5f4;--brand-surface:#fff;--brand-input:#f7f8fa;--brand-ink:#1c2834;--brand-muted:#627181;--brand-line:#dce0e5;--brand-radius:21px;--brand-accent-label:color-mix(in srgb,var(--accent) 30%,#111820);font-family:var(--brand-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}
.brand-page{background:var(--brand-bg)}
.brand-page body{min-height:100vh;background:var(--brand-bg);color:var(--brand-ink);font-family:var(--brand-font);--accent:inherit;--panel:var(--brand-surface);--line:var(--brand-line);--muted:var(--brand-muted);--ink:var(--brand-button-ink)}
.brand-page .top{background:var(--brand-surface)}
.brand-page .panel{background:var(--brand-surface);border-color:var(--brand-line);border-radius:var(--brand-radius)}
.brand-page input,.brand-page textarea,.brand-page select{background:var(--brand-input);color:var(--brand-ink);border-color:var(--brand-line)}
.brand-page .business-title,.brand-preview h2{overflow-wrap:anywhere}
.brand-page .service-option{background:var(--brand-surface);color:var(--brand-ink);border-color:var(--brand-line)}
.brand-page .service-option:has(input:checked){background:color-mix(in srgb,var(--accent) 10%,var(--brand-surface));border-color:var(--accent)}
.brand-page .notice.pilot{background:var(--brand-surface)}
.brand-page .btn:not(.sub):not(.ghost){color:var(--brand-button-ink)}
.brand-page .confirmation{color:#173923}
.brand-page .confirmation .muted{color:#486352}
.brand-page .public-step{color:var(--brand-muted)}
.brand-page .business-avatar{max-width:100%}
.brand-page .eyebrow,.brand-page .badge,.brand-page .logo span,.brand-preview .eyebrow{color:var(--brand-accent-label)}

/* Moderno: una cabecera con retrato y tarjetas amplias. */
.brand-page[data-template=modern],.brand-preview[data-template=modern]{--brand-bg:color-mix(in srgb,var(--accent) 7%,#f8fafc);--brand-line:#dce4ee;--brand-radius:26px}
.brand-page[data-template=modern] .cover{padding:54px 0 24px}
.brand-page[data-template=modern] .cover:has(.business-avatar:not(.hidden)){display:grid;grid-template-columns:minmax(0,1fr) 160px;column-gap:36px;align-items:start}
.brand-page[data-template=modern] .cover>*{grid-column:1}
.brand-page[data-template=modern] .cover .business-avatar{grid-column:2;grid-row:1/7;width:160px;height:160px;border-radius:32px;margin-top:10px}
.brand-page[data-template=modern] .business-title{font-size:clamp(38px,7vw,72px);letter-spacing:-2px;margin:18px 0}
.brand-page[data-template=modern] .panel{box-shadow:0 18px 55px #263c5910}
.brand-page[data-template=modern] #serviceOptions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.brand-page[data-template=modern] .service-option{height:100%;margin:0;border-radius:17px;line-height:1.7}

/* Editorial: papel, líneas rectas y resumen a la izquierda. */
.brand-page[data-template=editorial],.brand-preview[data-template=editorial]{--brand-bg:#f2f0e9;--brand-surface:#fcfbf7;--brand-input:#f4f2eb;--brand-ink:#282923;--brand-muted:#686b5f;--brand-line:#cdcfc4;--brand-radius:2px}
.brand-page[data-template=editorial] .cover{padding:56px 0 26px;border-bottom:2px solid var(--brand-ink);margin-bottom:22px}
.brand-page[data-template=editorial] .eyebrow{letter-spacing:3px}
.brand-page[data-template=editorial] .business-title{font-size:clamp(42px,8vw,80px);font-weight:500;letter-spacing:-3px}
.brand-page[data-template=editorial] .business-avatar{border-radius:0;float:right;width:120px;height:145px;margin:0 0 20px 24px}
.brand-page[data-template=editorial] .book-layout{grid-template-columns:minmax(250px,.7fr) minmax(0,1.4fr)}
.brand-page[data-template=editorial] .book-layout>form{grid-column:2;grid-row:1}
.brand-page[data-template=editorial] .book-layout>aside{grid-column:1;grid-row:1}
.brand-page[data-template=editorial] .service-option,.brand-page[data-template=editorial] .btn{border-radius:2px}
.brand-page[data-template=editorial] .panel{box-shadow:none}

/* Estudio: una marca centrada, formas suaves y fondo cálido. */
.brand-page[data-template=studio],.brand-preview[data-template=studio]{--brand-bg:color-mix(in srgb,var(--accent) 8%,#fffdf9);--brand-surface:#fff;--brand-input:#fbfaf7;--brand-line:color-mix(in srgb,var(--accent) 25%,#e7e3dd);--brand-ink:#38312f;--brand-muted:#786d68;--brand-radius:30px}
.brand-page[data-template=studio] main.wrap{max-width:1000px}
.brand-page[data-template=studio] .cover{text-align:center;padding:50px 0 24px}
.brand-page[data-template=studio] .cover p,.brand-page[data-template=studio] .business-title{margin-left:auto;margin-right:auto}
.brand-page[data-template=studio] .business-avatar{width:132px;height:132px;border-radius:50%;padding:5px;background:#fff;box-shadow:0 12px 35px #49392d12}
.brand-page[data-template=studio] .business-title{font-size:clamp(38px,7vw,66px);font-weight:500;letter-spacing:-2px}
.brand-page[data-template=studio] .service-option{border-radius:22px;background:color-mix(in srgb,var(--accent) 4%,white);padding:19px}
.brand-page[data-template=studio] .btn{border-radius:999px}
.brand-page[data-template=studio] .notice.pilot{text-align:center;border-radius:24px}

/* Galería: un escenario oscuro que destaca la foto de cada negocio. */
.brand-page[data-template=gallery],.brand-preview[data-template=gallery]{--brand-bg:#11171d;--brand-surface:#1b242d;--brand-input:#111a23;--brand-ink:#f4f6f8;--brand-muted:#b3bfcb;--brand-line:#394754;--brand-radius:14px;--brand-accent-label:color-mix(in srgb,var(--accent) 40%,white)}
.brand-page[data-template=gallery] .cover{padding:48px 0 30px}
.brand-page[data-template=gallery] .cover:has(.business-avatar:not(.hidden)){display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:0 36px;align-items:center}
.brand-page[data-template=gallery] .cover>*{grid-column:1}
.brand-page[data-template=gallery] .cover .business-avatar{grid-column:2;grid-row:1/7;width:240px;height:240px;border-radius:14px;object-fit:cover;box-shadow:0 22px 55px #0004}
.brand-page[data-template=gallery] .business-title{font-size:clamp(40px,7vw,76px);text-transform:uppercase;letter-spacing:-2px}
.brand-page[data-template=gallery] .service-option:has(input:checked){background:color-mix(in srgb,var(--accent) 16%,var(--brand-surface))}
.brand-page[data-template=gallery] .btn.sub{background:#34424f;color:#f7f8fa}
.brand-page[data-template=gallery] .footer{background:#0e141a}
.brand-page[data-template=gallery] .badge{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}

/* Firma: una cabecera de marca con cuerpo claro y contrastes suaves. */
.brand-page[data-template=premium],.brand-preview[data-template=premium]{--brand-bg:#f5f1eb;--brand-surface:#fffdf9;--brand-input:#f7f4ed;--brand-ink:#2c252f;--brand-muted:#776b79;--brand-line:#e0d8df;--brand-radius:25px}
.brand-page[data-template=premium] .top{background:#221d27;color:#f6f1fb}
.brand-page[data-template=premium] .cover{background:linear-gradient(125deg,#28222e,#17151d);color:#fff8ff;border-radius:26px;padding:42px;margin:30px 0 24px;box-shadow:0 22px 60px #26182e15}
.brand-page[data-template=premium] .cover .muted{color:#dbd1df}
.brand-page[data-template=premium] .top .badge,.brand-page[data-template=premium] .top .logo span,.brand-page[data-template=premium] .cover .eyebrow,.brand-preview[data-template=premium] .preview-cover .eyebrow{color:color-mix(in srgb,var(--accent) 40%,white)}
.brand-page[data-template=premium] .cover .business-avatar{float:right;width:145px;height:145px;margin:0 0 20px 28px;border-radius:50%;border:4px solid color-mix(in srgb,var(--accent) 75%,white)}
.brand-page[data-template=premium] .business-title{font-size:clamp(38px,7vw,70px);font-weight:500;letter-spacing:-2px}
.brand-page[data-template=premium] .service-option{border-radius:16px;padding:19px}
.brand-page[data-template=premium] .service-option:has(input:checked){box-shadow:inset 4px 0 var(--accent);border-color:var(--accent)}
.brand-page[data-template=premium] .notice.pilot{border:0;background:transparent;padding-left:3px}

/* Vista previa de marca: usa las mismas fuentes, paletas y superficies. */
.brand-preview{padding:0;overflow:hidden;overflow-wrap:anywhere;background:var(--brand-bg);color:var(--brand-ink);border-color:var(--brand-line);border-radius:var(--brand-radius);font-family:var(--brand-font)}
.brand-preview .preview-cover{padding:26px 24px 16px}
.brand-preview h2{font-size:31px;line-height:1.08;margin:12px 0;letter-spacing:-1px}
.brand-preview .eyebrow{font-size:9px;letter-spacing:1.5px}
.brand-preview .muted{color:var(--brand-muted)}
.brand-preview .avatar{width:76px;height:76px;margin-bottom:12px;border-color:var(--brand-line)}
.brand-preview .preview-content{padding:4px 24px 24px}
.brand-preview .preview-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--brand-muted)}
.brand-preview .preview-services{display:grid;gap:9px;margin-bottom:17px}
.brand-preview .preview-service{padding:12px;background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:13px;display:grid;gap:4px}
.brand-preview .preview-service strong{font-size:13px}
.brand-preview .preview-service span{color:var(--brand-muted)}
.brand-preview .preview-cta{display:block;background:var(--accent);color:var(--brand-button-ink);font-weight:750;text-align:center;padding:12px;border-radius:12px;font-size:13px}
.brand-preview[data-template=modern] .preview-cover{border-bottom:1px solid var(--brand-line)}
.brand-preview[data-template=modern] .avatar{float:right;border-radius:20px;margin:0 0 12px 14px}
.brand-preview[data-template=modern] .preview-service{border-radius:17px;box-shadow:0 6px 15px #30415b08}
.brand-preview[data-template=editorial] .preview-cover{border-bottom:2px solid var(--brand-ink)}
.brand-preview[data-template=editorial] h2{font-weight:500;font-size:36px}
.brand-preview[data-template=editorial] .avatar,.brand-preview[data-template=editorial] .preview-service,.brand-preview[data-template=editorial] .preview-cta{border-radius:0}
.brand-preview[data-template=studio] .preview-cover{text-align:center}
.brand-preview[data-template=studio] .avatar{border-radius:50%;width:90px;height:90px}
.brand-preview[data-template=studio] h2{font-weight:500}
.brand-preview[data-template=studio] .preview-service,.brand-preview[data-template=studio] .preview-cta{border-radius:22px}
.brand-preview[data-template=gallery] .avatar{width:100%;height:140px;object-fit:cover;border-radius:8px}
.brand-preview[data-template=gallery] h2{text-transform:uppercase;letter-spacing:-1px}
.brand-preview[data-template=premium] .preview-cover{background:linear-gradient(125deg,#28222e,#17151d);color:#fff8ff;margin:12px;border-radius:18px}
.brand-preview[data-template=premium] .preview-cover .muted{color:#dbd1df}
.brand-preview[data-template=premium] .avatar{float:right;margin:0 0 12px 12px;width:66px;height:66px;border-radius:50%;border:2px solid var(--accent)}
.brand-preview[data-template=premium] .preview-service{border-radius:12px}
#customColor{max-width:160px;height:50px;padding:5px}

@media(max-width:750px){
 .brand-page[data-template] .book-layout{grid-template-columns:minmax(0,1fr)}
 .brand-page[data-template=editorial] .book-layout>form,.brand-page[data-template=editorial] .book-layout>aside{grid-column:1;grid-row:auto}
 .brand-page[data-template=modern] #serviceOptions{grid-template-columns:1fr}
 .brand-page[data-template=modern] .cover:has(.business-avatar:not(.hidden)),.brand-page[data-template=gallery] .cover:has(.business-avatar:not(.hidden)){display:block}
 .brand-page[data-template=modern] .cover .business-avatar,.brand-page[data-template=gallery] .cover .business-avatar{float:none;width:112px;height:112px;margin:0 0 18px}
 .brand-page[data-template=gallery] .cover .business-avatar{width:100%;height:220px}
 .brand-page[data-template=editorial] .business-avatar{width:82px;height:105px;margin-left:15px}
 .brand-page[data-template=premium] .cover{padding:26px 22px;border-radius:20px;margin-top:22px}
 .brand-page[data-template=premium] .cover .business-avatar{float:none;width:100px;height:100px;margin:0 0 14px}
 .brand-page[data-template=editorial] .business-title{letter-spacing:-2px}
}