/* Un caso de marca se lee como sistema: signo, color, variantes y aplicaciones. */
.brand-project-dialog {
 --viewer-ink:#151219; --viewer-paper:#f5f1e7; --viewer-dark:#101014; --viewer-accent:#b9a4ff;
 --system-color-1:#21152f; --system-color-2:#8e6bdf; --system-color-3:#21152f; --system-color-4:#8e6bdf;
 width:min(94vw,1480px); max-width:calc(100vw - 24px); max-height:90dvh;
 margin:auto; padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
 border:1px solid rgba(255,246,224,.22); border-radius:5px;
 color:#fff6e0; background:var(--viewer-dark);
 box-shadow:0 35px 110px rgba(0,0,0,.6); font-family:var(--font-body,Arial,sans-serif);
 scrollbar-width:thin; scrollbar-color:var(--viewer-accent) var(--viewer-dark);
}
.brand-project-dialog:not([open]),.brand-project-dialog [hidden] { display:none!important; }
.brand-project-dialog::backdrop { background:rgba(4,3,8,.88); backdrop-filter:blur(9px); }
.brand-project-dialog__toolbar {
 position:sticky; z-index:7; top:0; display:flex; justify-content:space-between; align-items:center;
 gap:24px; padding:13px 25px; color:#fff6e0; background:var(--viewer-dark);
 border-bottom:1px solid rgba(255,246,224,.2);
}
.brand-project-dialog__toolbar::after { content:""; position:absolute; left:0; bottom:-1px; width:28%; height:2px; background:var(--viewer-accent); }
.brand-project-dialog__toolbar>p { display:flex; flex-wrap:wrap; gap:8px 12px; margin:0; font-size:9px; font-weight:500; line-height:1.6; letter-spacing:.1em; text-transform:uppercase; }
.brand-project-dialog__close {
 display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0;
 border:1px solid rgba(255,246,224,.7); border-radius:50%; color:#fff6e0;
 background:none; cursor:pointer; transition:transform .2s;
}
.brand-project-dialog__close span { font-family:var(--font-body,Arial,sans-serif); font-size:29px; font-weight:400; line-height:1; }
.brand-project-dialog__close:hover { transform:rotate(90deg); }
.brand-project-dialog button:focus-visible { outline:3px solid var(--viewer-accent); outline-offset:4px; }
.brand-project-dialog__hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:stretch; gap:0; padding:0; }
.brand-project-dialog__story { min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(28px,3.5vw,55px); color:var(--viewer-ink); background:var(--viewer-paper); }
.brand-project-dialog__eyebrow { margin:0 0 23px; font-size:9px; font-weight:600; line-height:1.7; letter-spacing:.12em; text-transform:uppercase; }
.branding-page .brand-project-dialog .brand-project-dialog__title { margin:0; font-family:var(--font-title,Arial,sans-serif); font-size:clamp(25px,3vw,47px); font-weight:900; line-height:1.13; letter-spacing:-.025em; text-transform:uppercase; overflow-wrap:anywhere; color:var(--viewer-ink); }
.brand-project-dialog__legend { margin-top:29px; }
.brand-project-dialog__legend>span { display:block; margin-bottom:12px; font-size:8px; font-weight:600; line-height:1.5; letter-spacing:.13em; text-transform:uppercase; }
.brand-project-dialog__legend>p { max-width:580px; margin:0; color:var(--viewer-ink); font-size:clamp(13px,1.03vw,15px); line-height:1.85; }
.brand-project-dialog__explore { display:inline-flex; align-items:center; gap:28px; min-height:44px; margin-top:25px; padding:8px 0; border:0; border-bottom:1px solid var(--viewer-ink); color:var(--viewer-ink); background:none; font:600 10px/1.5 var(--font-body); cursor:pointer; }
.brand-project-dialog__explore>span { color:var(--viewer-ink); font-size:21px; }
.brand-project-dialog__story button:focus-visible { outline-color:var(--viewer-ink); }
.brand-project-dialog__moodboard { position:relative; min-width:0; height:clamp(420px,38vw,540px); min-height:0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(10,minmax(0,1fr)); padding:24px; gap:9px; overflow:hidden; isolation:isolate; background:#1a181f; }
.brand-project-dialog__zone { position:absolute; z-index:-1; pointer-events:none; }
.brand-project-dialog__zone--one { inset:0 38% 0 0; background:var(--system-color-1); }
.brand-project-dialog__zone--two { inset:0 0 43% 62%; background:var(--system-color-2); }
.brand-project-dialog__zone--three { inset:57% 0 0 62%; background:var(--system-color-3); }
.brand-project-dialog.has-system-gradient .brand-project-dialog__zone--three { background-image:var(--system-gradient); }
.brand-project-dialog__cover { position:relative; z-index:2; display:flex; flex-direction:column; min-width:0; min-height:0; grid-column:1/13; grid-row:2/10; margin:0; padding:9px; background:#f5f1e7; box-shadow:0 20px 44px rgba(0,0,0,.25); transform:rotate(-2deg); }
.brand-project-dialog__cover>img { display:block; flex:1; min-height:0; width:100%; height:100%; object-fit:contain; background:#131217; }
.brand-project-dialog__cover[data-surface="light"]>img { background:#f5f3ee; }
.brand-project-dialog__cover>figcaption { display:flex; justify-content:space-between; gap:14px; padding:11px 2px 2px; color:var(--viewer-ink); font-size:8px; line-height:1.6; letter-spacing:.07em; text-transform:uppercase; }
.brand-project-dialog__cover>figcaption>span:last-child { flex:none; }
.brand-project-dialog__moodboard.has-variants .brand-project-dialog__cover { grid-column:1/9; grid-row:2/10; }
.brand-project-dialog__moodboard-logos { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); z-index:3; gap:11px; grid-column:8/13; grid-row:1/8; min-width:0; min-height:0; transform:rotate(3deg); }
.brand-project-dialog__moodboard-logos[data-count="1"] { grid-template-rows:1fr; grid-row:2/7; }
.brand-project-dialog__moodboard-logo { min-width:0; min-height:0; margin:0; padding:8px; background:#131217; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.brand-project-dialog__moodboard-logo[data-surface="light"] { background:#f5f3ee; }
.brand-project-dialog__moodboard-logo>img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-project-dialog__moodboard-note { grid-column:9/13; grid-row:9/11; z-index:1; align-self:end; padding:7px; color:#151219; background:#f5f1e7; font-size:7px; line-height:1.65; letter-spacing:.07em; text-transform:uppercase; }
.brand-project-dialog__colors,.brand-project-dialog__collection,.brand-project-dialog__gallery { padding:33px clamp(25px,3.5vw,55px) 38px; border-top:1px solid rgba(255,246,224,.17); scroll-margin-top:82px; }
.brand-project-dialog__colors { background:#19171d; }
.brand-project-dialog__section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:25px; margin-bottom:23px; }
.branding-page .brand-project-dialog .brand-project-dialog__section-heading>h3 { margin:0; font-family:var(--font-title,Arial,sans-serif); font-size:clamp(16px,1.55vw,22px); line-height:1.35; font-weight:900; letter-spacing:-.015em; text-transform:uppercase; color:#fff6e0; overflow-wrap:anywhere; }
.brand-project-dialog__section-heading>p { max-width:400px; margin:0; color:#fff6e0; font-size:9px; line-height:1.7; }
.brand-project-dialog__swatches { display:flex; flex-wrap:wrap; min-width:0; }
.brand-project-dialog__swatch { display:flex; flex:1 1 120px; min-width:100px; min-height:96px; flex-direction:column; justify-content:space-between; gap:18px; padding:17px; }
.brand-project-dialog__swatch>strong { font-size:11px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }.brand-project-dialog__swatch>span { font-size:9px; font-weight:500; line-height:1.5; letter-spacing:.07em; }
.brand-project-dialog__gradient { display:flex; align-items:flex-end; min-height:90px; margin-top:13px; padding:13px; background-size:100% 100%; }
.brand-project-dialog__gradient>span { padding:6px 8px; color:#151219; background:#f5f1e7; font-size:8px; font-weight:500; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; }
.brand-project-dialog__collection-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:20px; }
.brand-project-dialog__collection-piece { display:block; min-width:0; padding:0; border:0; color:#fff6e0; background:none; text-align:left; cursor:pointer; }
.brand-project-dialog__collection-image { display:block; height:clamp(200px,22vw,290px); min-width:0; margin:0; background:#17151c; overflow:hidden; }
.brand-project-dialog__collection-image[data-surface="light"] { background:#f5f3ee; }
.brand-project-dialog__collection-image>img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .4s; }
.brand-project-dialog__collection-caption { display:flex; justify-content:space-between; align-items:start; gap:20px; padding-top:12px; color:#fff6e0; font:400 10px/1.7 var(--font-body); }
.brand-project-dialog__collection-caption>b { flex:none; color:var(--viewer-accent); font-size:19px; font-weight:400; }
.brand-project-dialog__collection-piece:hover img { transform:scale(1.025); }
.brand-project-dialog__gallery:focus { outline:none; }
.brand-project-dialog__stage { position:relative; min-width:0; margin:0; }
.brand-project-dialog__stage>img { display:block; width:100%; height:clamp(260px,60dvh,630px); object-fit:contain; background:#141218; }
.brand-project-dialog__stage[data-surface="light"]>img { background:#f5f3ee; }
.brand-project-dialog__stage.is-loading>img { opacity:.6; }
.brand-project-dialog__stage>figcaption { display:flex; align-items:start; justify-content:space-between; gap:24px; padding:15px 0; color:#fff6e0; font-size:10px; line-height:1.7; }
.brand-project-dialog__stage>figcaption>span:first-child { min-width:0; }.brand-project-dialog__stage>figcaption>span:last-child { flex:none; padding-top:1px; font-size:9px; letter-spacing:.1em; }
.brand-project-dialog__image-error { display:grid; place-items:center; min-height:260px; padding:30px; margin:0; color:#fff6e0; background:#211b2a; font-size:14px; line-height:1.8; text-align:center; }
.brand-project-dialog__thumbnails { display:flex; align-items:stretch; gap:11px; padding:8px 4px 14px; margin:0 -4px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--viewer-accent) var(--viewer-dark); }
.brand-project-dialog__thumbnail { position:relative; display:block; flex:0 0 100px; min-width:100px; height:77px; margin:0; padding:4px; border:2px solid transparent; color:#fff6e0; background:#211b2a; cursor:pointer; transition:border-color .2s,transform .2s; }
.brand-project-dialog__thumbnail>img { display:block; width:100%; height:100%; object-fit:contain; background:#141218; }.brand-project-dialog__thumbnail[data-surface="light"]>img { background:#f5f3ee; }
.brand-project-dialog__thumbnail>span { position:absolute; left:7px; bottom:7px; padding:2px 4px; color:#fff6e0; background:#141218; font:500 8px/1.5 var(--font-body); }.brand-project-dialog__thumbnail[aria-pressed="true"] { border-color:var(--viewer-accent); }.brand-project-dialog__thumbnail:hover { transform:translateY(-3px); }
.brand-project-dialog.is-entering { animation:brandCaseEnter .42s cubic-bezier(.2,.7,.2,1) both; }
.brand-project-dialog.is-entering::backdrop { animation:brandCaseFade .3s ease-out both; }
.brand-project-dialog.is-entering .brand-project-dialog__story { animation:brandCaseStory .55s .04s cubic-bezier(.2,.7,.2,1) both; }
.brand-project-dialog.is-entering .brand-project-dialog__cover { animation:brandCaseCover .65s .08s cubic-bezier(.2,.7,.2,1) both; }
.brand-project-dialog.is-entering .brand-project-dialog__moodboard-logos { animation:brandCaseLogos .65s .13s cubic-bezier(.2,.7,.2,1) both; }
.brand-project-dialog.is-entering .brand-project-dialog__zone--one { animation:brandCaseZone .55s cubic-bezier(.2,.7,.2,1) both; transform-origin:left; }
@keyframes brandCaseEnter { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes brandCaseFade { from { opacity:0; } to { opacity:1; } }
@keyframes brandCaseZone { from { transform:scaleX(.1); } to { transform:scaleX(1); } }
@keyframes brandCaseStory { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes brandCaseCover { from { opacity:0; transform:translate(22px,12px) rotate(3deg); } to { opacity:1; transform:rotate(-2deg); } }
@keyframes brandCaseLogos { from { opacity:0; transform:translateY(-18px) rotate(-3deg); } to { opacity:1; transform:rotate(3deg); } }
@media (max-width:1050px) {
 .brand-project-dialog__hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.brand-project-dialog__story { padding:30px; }.brand-project-dialog__moodboard { height:430px; min-height:0; padding:18px; gap:7px; }
 .branding-page .brand-project-dialog .brand-project-dialog__title { font-size:clamp(24px,3.1vw,35px); }.brand-project-dialog__legend { margin-top:22px; }.brand-project-dialog__legend>p { font-size:13px; }
}
@media (max-width:820px) {
 .brand-project-dialog { width:calc(100vw - 24px); max-width:calc(100vw - 24px); max-height:90dvh; }
 .brand-project-dialog__toolbar { padding:11px 17px; gap:18px; }.brand-project-dialog__toolbar>p { font-size:8px; gap:4px 9px; max-width:440px; }
 .brand-project-dialog__hero { display:flex; flex-direction:column; }.brand-project-dialog__moodboard { order:0; min-height:350px; height:350px; width:100%; }.brand-project-dialog__story { order:1; padding:30px 25px; }
 .brand-project-dialog__eyebrow { margin-bottom:16px; font-size:8px; }.branding-page .brand-project-dialog .brand-project-dialog__title { max-width:630px; font-size:clamp(25px,5vw,37px); }
 .brand-project-dialog__legend { margin-top:22px; }.brand-project-dialog__legend>p { max-width:650px; font-size:14px; line-height:1.8; }.brand-project-dialog__explore { margin-top:18px; }
 .brand-project-dialog__colors,.brand-project-dialog__collection,.brand-project-dialog__gallery { padding:27px 22px 30px; scroll-margin-top:76px; }.brand-project-dialog__section-heading { gap:20px; }
 .brand-project-dialog__section-heading>p { font-size:8px; }.branding-page .brand-project-dialog .brand-project-dialog__section-heading>h3 { font-size:19px; }
 .brand-project-dialog__stage>img { height:clamp(235px,54dvh,480px); }.brand-project-dialog__collection-grid { gap:18px; }.brand-project-dialog__collection-image { display:block; height:260px; }
}
@media (max-width:520px) {
 .brand-project-dialog__toolbar { padding:10px 14px; }.brand-project-dialog__toolbar>p { max-width:220px; font-size:7px; letter-spacing:.07em; }
 .brand-project-dialog__moodboard { min-height:300px; height:300px; padding:14px; gap:6px; }.brand-project-dialog__moodboard-logo { padding:5px; }.brand-project-dialog__cover { padding:6px; }.brand-project-dialog__cover>figcaption { padding-top:8px; font-size:6px; letter-spacing:.02em; gap:7px; }.brand-project-dialog__moodboard-note { font-size:6px; padding:5px; }
 .brand-project-dialog__story { padding:26px 19px; }.branding-page .brand-project-dialog .brand-project-dialog__title { font-size:clamp(22px,6.2vw,30px); line-height:1.18; }.brand-project-dialog__legend>p { font-size:13px; line-height:1.8; }.brand-project-dialog__legend>span { font-size:7px; }
 .brand-project-dialog__colors,.brand-project-dialog__collection,.brand-project-dialog__gallery { padding:24px 17px 27px; }.brand-project-dialog__section-heading { display:block; margin-bottom:19px; }.branding-page .brand-project-dialog .brand-project-dialog__section-heading>h3 { font-size:17px; }.brand-project-dialog__section-heading>p { margin-top:9px; font-size:8px; }
 .brand-project-dialog__swatch { min-width:80px; flex-basis:90px; min-height:87px; padding:12px; gap:13px; }.brand-project-dialog__swatch>strong { font-size:10px; }.brand-project-dialog__swatch>span { font-size:8px; }
 .brand-project-dialog__collection-grid { grid-template-columns:1fr; gap:23px; }.brand-project-dialog__collection-image { display:block; height:240px; }.brand-project-dialog__collection-caption { font-size:9px; }
 .brand-project-dialog__stage>img { height:clamp(225px,44dvh,380px); }.brand-project-dialog__stage>figcaption { gap:17px; font-size:9px; }.brand-project-dialog__stage>figcaption>span:last-child { font-size:8px; }.brand-project-dialog__thumbnail { flex-basis:82px; min-width:82px; height:67px; }
}
@media (prefers-reduced-motion:reduce) {
 .brand-project-dialog,.brand-project-dialog *,.brand-project-dialog::before,.brand-project-dialog::backdrop { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
 .brand-project-dialog__close:hover,.brand-project-dialog__thumbnail:hover,.brand-project-dialog__collection-piece:hover img { transform:none; }.brand-project-dialog::backdrop { backdrop-filter:none; }
}




.brand-project-dialog__moodboard-palette { display:flex; position:absolute; z-index:4; left:0; right:0; bottom:0; height:14px; }
.brand-project-dialog__moodboard-palette>span { flex:1; min-width:0; }