/* Branding: archivo editorial de identidades, con interfaz térmica Dixclaimer. */
.branding-page { --br-spectrum:linear-gradient(105deg,var(--blue),var(--violet) 28%,var(--pink) 54%,var(--orange) 78%,var(--amber)); font-family:var(--font-body,Arial,sans-serif); }
.branding-page .br-header { position:absolute; z-index:40; inset:0 0 auto; height:108px; }
.branding-page .br-header .mobile-menu { position:fixed; min-height:100dvh; }
.branding-page .br-main { overflow:clip; }
.branding-page .br-main [id] { scroll-margin-top:32px; }
.branding-page .br-main h1,.branding-page .br-main h2 { font-family:var(--font-title); font-weight:900; line-height:1.15; letter-spacing:-.015em; text-transform:uppercase; overflow-wrap:anywhere; }
.branding-page .br-main h3 { font-family:var(--font-title); font-weight:900; letter-spacing:-.015em; text-transform:uppercase; }
.branding-page a:focus-visible,.branding-page button:focus-visible,.branding-page summary:focus-visible { outline:3px solid var(--amber); outline-offset:5px; }
.br-eyebrow { margin:0 0 20px; font-size:10px; font-weight:600; line-height:1.5; letter-spacing:.17em; text-transform:uppercase; }
.br-body { margin:0; color:rgba(255,246,224,.72); font-size:clamp(15px,1.1vw,17px); line-height:1.85; }
.br-hero { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; min-height:100svh; padding:150px var(--pad) 25px; background:#09070f; }
.br-hero::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:var(--br-spectrum); }
.br-hero-heat { position:absolute; z-index:-1; pointer-events:none; inset:0; background:radial-gradient(ellipse at 73% 56%,rgba(255,90,0,.12),rgba(255,46,138,.1) 23%,rgba(106,0,255,.19) 44%,transparent 70%),radial-gradient(ellipse at 7% 90%,rgba(0,17,255,.1),transparent 55%); }
.br-hero-grid { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); align-items:center; gap:clamp(32px,4vw,76px); width:min(1480px,100%); margin:auto; }
.br-hero-copy { min-width:0; padding:15px 0; }
.br-hero h1 { margin:0 0 26px; max-width:650px; font-size:clamp(30px,2.55vw,44px); text-wrap:balance; }
.br-intro { margin:0; max-width:520px; font-size:clamp(15px,1.1vw,17px); line-height:1.8; color:rgba(255,246,224,.77); }
.br-actions { display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; margin-top:30px; }
.branding-page .contact-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; min-height:53px; padding:14px 18px; font-family:var(--font-body); font-size:12px; font-weight:600; line-height:1.5; }
.contact-cta span { color:var(--amber); font-size:19px; }
.br-showcase { min-width:0; position:relative; }
.br-showcase-top { display:flex; justify-content:space-between; gap:20px; margin-bottom:13px; color:rgba(255,246,224,.6); font-size:9px; line-height:1.5; text-transform:uppercase; letter-spacing:.14em; }
.br-showcase-top>span:first-child { display:flex; align-items:center; gap:9px; }
.br-showcase-top i { width:5px; height:5px; background:var(--amber); border-radius:50%; box-shadow:0 0 12px var(--orange); }
.br-showcase-window { position:relative; border:1px solid rgba(255,246,224,.18); background:#08080a; }
.br-showcase-window::before,.br-showcase-window::after { position:absolute; z-index:2; content:""; width:28px; height:28px; pointer-events:none; }
.br-showcase-window::before { top:-1px; left:-1px; border-top:2px solid var(--amber); border-left:2px solid var(--amber); }
.br-showcase-window::after { right:-1px; bottom:-1px; border-right:2px solid var(--pink); border-bottom:2px solid var(--pink); }
.br-showcase-panel[hidden] { display:none; }
.br-showcase-art { position:relative; display:block; overflow:hidden; background:#08080a; }
.br-showcase-art img { display:block; width:100%; height:clamp(310px,46vh,490px); object-fit:contain; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.br-showcase-art:hover img { transform:scale(1.025); }
.br-showcase-open { position:absolute; right:19px; bottom:18px; display:flex; align-items:center; gap:16px; padding:9px 12px; color:var(--cream); background:#100d17; border:1px solid rgba(255,246,224,.22); font-size:9px; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; }
.br-showcase-open>span { color:var(--amber); font-size:17px; }
.br-showcase-caption { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 20px; border-top:1px solid rgba(255,246,224,.14); }
.br-showcase-caption strong { font-size:18px; line-height:1.3; font-weight:500; }
.br-showcase-caption>span { color:rgba(255,246,224,.5); font-size:9px; line-height:1.5; letter-spacing:.1em; text-transform:uppercase; }
.br-showcase-tabs { display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.branding-page.br-enhanced .br-showcase-tabs { display:grid; }
.br-showcase-tabs button { display:flex; gap:10px; align-items:center; min-height:49px; padding:12px 0; border:0; color:rgba(255,246,224,.48); background:none; font:500 11px/1.5 var(--font-body); cursor:pointer; }
.br-showcase-tabs button>span { color:rgba(255,246,224,.4); font-size:8px; }
.br-showcase-tabs button[aria-selected="true"] { color:var(--cream); }.br-showcase-tabs button[aria-selected="true"]>span { color:var(--amber); }
.br-showcase-scale { position:relative; height:3px; background:rgba(255,246,224,.12); }
.br-showcase-scale>span { display:block; width:33.333%; height:100%; background:var(--br-spectrum); transition:width .45s cubic-bezier(.2,.7,.2,1); }
.br-hero-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; width:min(1480px,100%); margin:33px auto 0; padding-top:19px; border-top:1px solid rgba(255,246,224,.16); font-size:9px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; }
.br-hero-bottom>span { color:rgba(255,246,224,.5); }.br-hero-bottom nav { display:flex; flex-wrap:wrap; gap:18px 32px; padding-right:75px; }
.br-hero-bottom a { display:flex; align-items:center; gap:15px; min-height:32px; }.br-hero-bottom a:hover { color:var(--amber); }.br-hero-bottom a span { font-size:18px; }
.br-section { width:min(1560px,100%); margin:0 auto; padding:100px var(--pad); border-bottom:1px solid rgba(255,246,224,.13); }
.br-section h2 { margin:0; font-size:clamp(25px,2.15vw,36px); text-wrap:balance; }
.br-section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:clamp(30px,6vw,95px); margin-bottom:52px; }
.br-section-heading>.br-body { padding-top:31px; }
.br-project-grid { display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); gap:62px 42px; align-items:start; }
.br-project-card { min-width:0; }.br-project-card:nth-child(3n+2) { margin-top:86px; }
.br-project-link { display:block; }.br-project-image { position:relative; overflow:hidden; border:1px solid rgba(255,246,224,.13); background:#09090b; }
.br-project-image img { display:block; width:100%; height:auto; aspect-ratio:1.24; object-fit:contain; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.br-project-link:hover img { transform:scale(1.025); }.br-project-link:hover h3 { color:var(--amber); }
.br-project-index { position:absolute; left:18px; top:18px; padding:6px 8px; background:#0b090f; color:rgba(255,246,224,.7); font-size:9px; letter-spacing:.12em; }
.br-project-expand { position:absolute; bottom:17px; right:17px; display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,246,224,.3); border-radius:50%; color:var(--cream); background:#100d17; font-size:23px; transition:color .2s,border-color .2s; }
.br-project-link:hover .br-project-expand { color:var(--amber); border-color:var(--amber); }
.br-project-caption { padding-top:23px; }.br-project-caption>.br-eyebrow { margin-bottom:11px; color:rgba(255,246,224,.47); font-size:9px; }
.br-project-caption h3 { margin:0 0 13px; font-size:clamp(29px,2.6vw,42px); line-height:1.1; transition:color .2s; }
.br-project-caption>p:not(.br-eyebrow) { max-width:470px; margin:0 0 19px; color:rgba(255,246,224,.65); font-size:13px; line-height:1.8; }
.br-text-link { display:inline-flex; gap:24px; align-items:center; min-height:32px; font-size:10px; line-height:1.5; }.br-text-link span { color:var(--amber); font-size:17px; }
.br-project-card:nth-child(3n) { grid-column:1/-1; }.br-project-card:nth-child(3n) .br-project-link { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:clamp(35px,7vw,100px); }.br-project-card:nth-child(3n) .br-project-image img { aspect-ratio:1.45; }.br-project-card:nth-child(3n) .br-project-caption { padding-top:0; }
.br-direction,.br-process,.br-faq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,95px); align-items:start; }
.br-direction>.br-body { padding-top:33px; }.br-principles { counter-reset:principle; list-style:none; padding:0; margin:32px 0 0; }
.br-principles li { position:relative; display:flex; gap:23px; counter-increment:principle; padding:17px 0; border-top:1px solid rgba(255,246,224,.14); font-size:13px; line-height:1.8; }
.br-principles li::before { content:"0" counter(principle); color:var(--amber); font-size:9px; line-height:2.5; }
.br-design-lab { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); border:1px solid rgba(255,246,224,.16); background:#0c0912; }
.br-lab-controls { display:flex; flex-direction:column; justify-content:center; padding:36px; border-right:1px solid rgba(255,246,224,.14); }.br-lab-controls>.br-eyebrow { font-size:9px; max-width:180px; }
.br-lab-tabs { display:grid; gap:0; }.br-lab-tabs button { display:flex; gap:21px; align-items:baseline; padding:19px 0; border:0; border-bottom:1px solid rgba(255,246,224,.12); text-align:left; color:rgba(255,246,224,.4); background:none; font:400 10px/1.5 var(--font-body); cursor:pointer; }.br-lab-tabs button span { font-size:22px; letter-spacing:-.035em; }.br-lab-tabs button[aria-pressed="true"] { color:var(--amber); }.br-lab-tabs button[aria-pressed="true"] span { color:var(--cream); }
.br-lab-caption { margin:25px 0 0; max-width:200px; color:rgba(255,246,224,.4); font-size:10px; line-height:1.7; }
.br-lab-art { position:relative; min-height:385px; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 60% 50%,rgba(106,0,255,.13),transparent 60%); }
.br-lab-coordinates { position:absolute; z-index:2; inset:22px 25px auto; display:flex; justify-content:space-between; gap:20px; font-size:8px; line-height:1.6; letter-spacing:.13em; color:rgba(255,246,224,.36); }
.br-lab-orbit { position:absolute; left:50%; top:49%; width:228px; height:228px; transform:translate(-50%,-50%); transition:transform .7s; }
.br-lab-orbit i { position:absolute; inset:0; border:1px solid var(--violet); border-radius:38%; transform:rotate(0deg); transition:transform .7s,border-radius .7s; }.br-lab-orbit i:nth-child(2) { border-color:var(--pink); transform:rotate(60deg); }.br-lab-orbit i:nth-child(3) { border-color:var(--amber); transform:rotate(120deg); }
.br-lab-orbit b { position:absolute; inset:45px; background:radial-gradient(circle,var(--amber),var(--orange) 20%,var(--pink) 45%,var(--violet) 68%,var(--blue) 85%); filter:blur(15px); border-radius:50%; opacity:.6; }
.br-lab-palette { position:absolute; bottom:24px; left:25px; right:25px; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }.br-lab-palette i { height:4px; background:var(--blue); transition:height .65s; }.br-lab-palette i:nth-child(2) { background:var(--violet); }.br-lab-palette i:nth-child(3) { background:var(--pink); }.br-lab-palette i:nth-child(4) { background:var(--orange); }.br-lab-palette i:nth-child(5) { background:var(--amber); }
.br-lab-type { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85); display:flex; align-items:center; gap:35px; font-size:110px; line-height:1; letter-spacing:-.08em; opacity:0; transition:opacity .6s,transform .6s; }.br-lab-type>span { font-size:19px; line-height:1.25; letter-spacing:-.04em; white-space:nowrap; }
.br-lab-grid { position:absolute; z-index:-1; inset:0; opacity:.24; background-image:linear-gradient(rgba(255,246,224,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,246,224,.07) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(ellipse,black,transparent 80%); }
[data-br-mode="1"] .br-lab-orbit { transform:translate(-50%,-60%) scale(.65); }[data-br-mode="1"] .br-lab-orbit i { border-radius:50%; }[data-br-mode="1"] .br-lab-palette i { height:85px; }[data-br-mode="2"] .br-lab-orbit { opacity:.1; transform:translate(-50%,-50%) scale(1.25); }[data-br-mode="2"] .br-lab-type { opacity:1; transform:translate(-50%,-50%) scale(1); }
.br-process-copy .br-body { margin-top:27px; }.br-process-copy .contact-cta { margin-top:30px; }.br-process-map { position:relative; display:grid; gap:0; padding-left:36px; }.br-process-map::before { content:""; position:absolute; left:0; top:22px; bottom:32px; width:3px; background:linear-gradient(var(--blue),var(--violet),var(--pink),var(--orange),var(--amber)); }
.br-process-map>div { position:relative; padding:24px 0 27px; border-bottom:1px solid rgba(255,246,224,.13); }.br-process-map span { color:rgba(255,246,224,.46); font-size:9px; letter-spacing:.15em; text-transform:uppercase; }.br-process-map p { margin:15px 0 0; font-size:clamp(23px,2vw,30px); line-height:1.3; letter-spacing:-.04em; }.br-process-map i { position:absolute; top:29px; left:-40px; width:11px; height:11px; border:2px solid var(--blue); border-radius:50%; background:var(--black); box-shadow:0 0 13px rgba(106,0,255,.7); }.br-process-map>div:nth-child(2) i { border-color:var(--pink); }.br-process-map>div:nth-child(3) i { border-color:var(--amber); }
.br-faq .contact-cta { margin-top:30px; }.br-faq-list details { border-top:1px solid rgba(255,246,224,.2); }.br-faq-list details:last-child { border-bottom:1px solid rgba(255,246,224,.2); }.br-faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:24px 0; list-style:none; font-size:15px; line-height:1.6; cursor:pointer; }.br-faq-list summary::-webkit-details-marker { display:none; }.br-faq-list summary>span { flex:none; color:var(--amber); font-size:22px; font-weight:300; transition:transform .25s; }.br-faq-list details[open] summary>span { transform:rotate(45deg); }.br-faq-list details>p { margin:0; padding:0 35px 25px 0; color:rgba(255,246,224,.7); font-size:14px; line-height:1.85; }
@media (min-width:821px) and (max-height:800px) { .br-hero { padding-top:140px; }.br-showcase-art img { height:clamp(280px,42vh,360px); }.br-hero h1 { font-size:clamp(30px,2.35vw,40px); }.br-hero-bottom { margin-top:26px; } }
@media (max-width:1100px) { .br-hero-grid { gap:30px; }.br-hero h1 { font-size:30px; }.branding-page .contact-cta { font-size:11px; gap:15px; padding:13px 15px; }.br-project-grid { gap:42px 30px; }.br-project-card:nth-child(3n+2) { margin-top:60px; }.br-lab-controls { padding:26px; } }
@media (max-width:820px) { .branding-page .br-header { height:86px; }.br-hero { min-height:0; padding:116px 22px 24px; }.br-hero-grid { grid-template-columns:1fr; gap:36px; }.br-hero-copy { padding:0; }.br-hero h1 { max-width:680px; font-size:clamp(27px,5.2vw,38px); text-wrap:initial; }.br-intro { max-width:650px; font-size:15px; }.br-actions { margin-top:26px; }.br-showcase { width:100%; }.br-showcase-art img { height:auto; aspect-ratio:1.45; }.br-showcase-caption { padding:15px 18px; }.br-showcase-caption strong { font-size:17px; }.br-hero-bottom { display:block; margin-top:28px; padding-top:18px; }.br-hero-bottom>span { display:block; margin-bottom:9px; }.br-hero-bottom nav { gap:12px 24px; }.br-section { padding:62px 22px; }.br-section-heading,.br-direction,.br-process,.br-faq { grid-template-columns:1fr; gap:27px; }.br-section-heading { margin-bottom:35px; }.br-section-heading>.br-body { padding-top:0; }.br-section h2 { font-size:clamp(23px,4vw,31px); }.br-project-grid { gap:36px 24px; }.br-project-card:nth-child(3n+2) { margin-top:50px; }.br-project-caption h3 { font-size:29px; }.br-project-caption>p:not(.br-eyebrow) { font-size:12px; }.br-project-card:nth-child(3n) .br-project-link { gap:25px; }.br-project-card:nth-child(3n) .br-project-image img { aspect-ratio:1; }.br-design-lab { grid-template-columns:1fr; }.br-lab-controls { padding:23px; border-right:0; border-bottom:1px solid rgba(255,246,224,.14); }.br-lab-controls>.br-eyebrow { max-width:none; margin-bottom:9px; }.br-lab-tabs { display:flex; gap:30px; }.br-lab-tabs button { gap:10px; padding:12px 0; border-bottom:0; }.br-lab-tabs button span { font-size:18px; }.br-lab-caption { max-width:none; margin-top:5px; }.br-lab-art { min-height:340px; }.br-process-map { padding-left:27px; }.br-process-map i { left:-31px; }.br-faq .contact-cta { margin-top:24px; } }
@media (max-width:520px) { .br-hero h1 { font-size:clamp(25px,6.9vw,33px); }.br-eyebrow { font-size:9px; margin-bottom:19px; }.br-actions { display:grid; grid-template-columns:1fr; gap:11px; }.branding-page .contact-cta { min-height:51px; font-size:12px; padding:13px 16px; }.br-showcase-top { font-size:8px; letter-spacing:.08em; }.br-showcase-caption>span { font-size:8px; max-width:135px; text-align:right; }.br-showcase-open { right:12px; bottom:12px; padding:7px 9px; font-size:8px; }.br-showcase-tabs button { gap:7px; font-size:10px; }.br-hero-bottom nav { padding-right:60px; gap:9px 22px; }.br-hero-bottom { font-size:8px; }.br-project-grid { grid-template-columns:1fr; gap:38px; }.br-project-card:nth-child(3n+2) { margin-top:0; }.br-project-card:nth-child(3n) .br-project-link { display:block; }.br-project-card:nth-child(3n) .br-project-image img { aspect-ratio:1.24; }.br-project-card:nth-child(3n) .br-project-caption { padding-top:23px; }.br-project-caption h3 { font-size:32px; }.br-project-caption>p:not(.br-eyebrow) { font-size:13px; }.br-lab-controls { padding:22px 18px; }.br-lab-tabs { justify-content:space-between; gap:10px; }.br-lab-tabs button { gap:7px; font-size:8px; }.br-lab-tabs button span { font-size:16px; }.br-lab-art { min-height:300px; }.br-lab-coordinates { inset:18px 18px auto; font-size:7px; }.br-lab-orbit { width:184px; height:184px; }.br-lab-type { gap:18px; font-size:90px; }.br-lab-type>span { font-size:16px; }.br-lab-palette { left:18px; right:18px; bottom:20px; }.br-faq-list summary { font-size:14px; }.br-faq-list details>p { padding-right:12px; font-size:13px; } }
@media (prefers-reduced-motion:reduce) { .br-main * { scroll-behavior:auto!important; transition:none!important; }.br-showcase-art:hover img,.br-project-link:hover img { transform:none; } }