:root { --header-height:86px; --cream:#ede0c8; --ink:#0d0805; --muted:#b9ac99; --mobile-nav-bg:#0d0805; --mobile-nav-text:#ede0c8; --mobile-nav-accent:#ede0c8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--cream); font-family:Inter,Arial,sans-serif; }
.site-header { position:sticky; top:0; z-index:90; height:var(--header-height); padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; background:rgba(13,8,5,.95); backdrop-filter:blur(20px); }
.site-header a,.case-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 22px; border:1px solid #6c5e4b; border-radius:99px; text-decoration:none; color:inherit; font-size:13px; font-weight:750; transition:background var(--motion-fast),transform var(--motion-fast); }
.site-header a:hover,.case-action:hover { background:#3d2314; transform:translateY(-2px); }
.site-header span { font-size:11px; line-height:1.4; font-weight:750; letter-spacing:.08em; text-align:right; }
.chapter-nav { position:sticky; top:var(--header-height); z-index:80; background:rgba(13,8,5,.95); border-bottom:1px solid #3d3025; }
.chapter-links { max-width:1180px; margin:auto; display:flex; gap:32px; padding:0 24px; overflow:auto; scrollbar-width:none; }
.chapter-links a { padding:18px 0; color:var(--muted); text-decoration:none; font-size:12px; font-weight:750; white-space:nowrap; border-bottom:3px solid transparent; }
.chapter-links a[aria-current] { color:var(--cream); border-color:var(--cream); }
main { max-width:1180px; margin:auto; padding:0 24px; }
section { padding:64px 0; border-bottom:1px solid #3d3025; }
.eyebrow { margin:0 0 20px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
h1,h2 { font-family:'Bebas Neue',Impact,sans-serif; font-weight:400; letter-spacing:.01em; line-height:1; margin:0 0 24px; }
h1 { font-size:clamp(64px,9vw,124px); }
h2 { font-size:clamp(38px,5vw,64px); }
.intro { max-width:740px; font-size:clamp(17px,2vw,23px); line-height:1.65; color:var(--cream); margin:0; }
figure { margin:28px 0 0; }
figure img { display:block; width:100%; height:auto; border-radius:18px; }
figcaption { margin-top:16px; color:var(--muted); font-size:13px; line-height:1.6; }
.case-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:40px; }
.process-grid article { border-top:2px solid #b48247; padding-top:24px; }
.process-grid h3 { font:400 32px/1.1 'Bebas Neue',Impact,sans-serif; margin:16px 0; }
.process-grid p,.case-note { color:var(--muted); font-size:15px; line-height:1.7; }
.case-note { max-width:760px; margin-top:24px; font-size:12px; }
@media(max-width:760px) { .process-grid { grid-template-columns:1fr; gap:24px; margin-top:28px; } }
.case-action.primary { color:var(--ink); background:var(--cream); border-color:var(--cream); }
.case-action.primary:hover { background:#f5edd9; }
footer { max-width:1180px; margin:auto; padding:32px 24px; display:flex; justify-content:space-between; gap:20px; }
footer a { color:var(--cream); font-size:13px; padding-block:12px; }
[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity var(--motion-enter) var(--ease-interface),transform var(--motion-enter) var(--ease-interface); }
[data-reveal].is-visible { opacity:1; transform:none; }
@media(max-width:760px) { section { padding:36px 0; } .site-header { padding-inline:20px; } main { padding-inline:20px; } figure img { border-radius:12px; } footer { flex-wrap:wrap; } }

/* Each UX/UI case inherits the visual language of the interface it presents. */
.ux-theme {
  --theme-bg:#0d0805;
  --theme-panel:#17110d;
  --theme-text:#ede0c8;
  --theme-muted:#b9ac99;
  --theme-line:#3d3025;
  --theme-accent:#b48247;
  --theme-accent-2:#ede0c8;
  --theme-glow:rgba(180,130,71,.16);
  --cream:var(--theme-text);
  --ink:var(--theme-bg);
  --muted:var(--theme-muted);
  --mobile-nav-bg:var(--theme-bg);
  --mobile-nav-text:var(--theme-text);
  --mobile-nav-accent:var(--theme-accent);
  position:relative;
  overflow-x:hidden;
  background:var(--theme-bg);
  color:var(--theme-text);
}
.ux-theme::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:var(--theme-atmosphere,none);
}
.ux-theme .site-header,
.ux-theme .chapter-nav {
  background:color-mix(in srgb,var(--theme-bg) 88%,transparent);
  border-color:var(--theme-line);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
.ux-theme .site-header a { border-color:color-mix(in srgb,var(--theme-accent) 60%,var(--theme-line)); }
.ux-theme .site-header a:hover { background:color-mix(in srgb,var(--theme-accent) 16%,transparent); }
.ux-theme .chapter-links a { color:var(--theme-muted); }
.ux-theme .chapter-links a[aria-current] { color:var(--theme-text); border-color:var(--theme-accent); }
.ux-theme section { position:relative; border-color:var(--theme-line); }
.ux-theme section:not(#proyecto) { padding-inline:clamp(0px,2.4vw,30px); }
.ux-theme #proyecto { min-height:min(650px,calc(100svh - 142px)); display:flex; flex-direction:column; justify-content:center; }
.ux-theme #proyecto::after {
  content:"";
  position:absolute;
  width:min(440px,48vw);
  aspect-ratio:1;
  right:-8%;
  top:50%;
  translate:0 -50%;
  border-radius:50%;
  background:radial-gradient(circle,var(--theme-glow),transparent 68%);
  filter:blur(8px);
  pointer-events:none;
}
.ux-theme .eyebrow { color:var(--theme-accent); }
.ux-theme h1 { max-width:10ch; text-wrap:balance; color:var(--theme-title,var(--theme-text)); }
.ux-theme h2 { text-wrap:balance; }
.ux-theme .intro { color:var(--theme-text); }
.ux-theme figure { position:relative; }
.ux-theme figure img { border:1px solid color-mix(in srgb,var(--theme-accent) 34%,transparent); box-shadow:0 34px 90px color-mix(in srgb,var(--theme-bg) 74%,transparent),0 0 55px var(--theme-glow); }
.ux-theme figcaption,.ux-theme .process-grid p,.ux-theme .case-note { color:var(--theme-muted); }
.ux-theme .process-grid article {
  position:relative;
  overflow:hidden;
  min-height:230px;
  padding:24px;
  border:1px solid var(--theme-line);
  border-top:3px solid var(--theme-accent);
  border-radius:16px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--theme-panel) 94%,transparent),color-mix(in srgb,var(--theme-bg) 96%,transparent));
  box-shadow:0 18px 42px color-mix(in srgb,var(--theme-bg) 62%,transparent);
}
.ux-theme .process-grid article::after { content:""; position:absolute; width:110px; aspect-ratio:1; right:-55px; bottom:-60px; border-radius:50%; background:var(--theme-glow); filter:blur(8px); }
.ux-theme .case-action { border-color:color-mix(in srgb,var(--theme-accent) 58%,var(--theme-line)); }
.ux-theme .case-action:hover { background:color-mix(in srgb,var(--theme-accent) 16%,var(--theme-bg)); }
.ux-theme .case-action.primary { color:var(--theme-button-text,var(--theme-bg)); background:var(--theme-accent); border-color:var(--theme-accent); }
.ux-theme .case-action.primary:hover { background:var(--theme-accent-2); border-color:var(--theme-accent-2); }
.ux-theme footer { border-top:1px solid var(--theme-line); }
.brand-manual-section { display:block; }
.brand-manual-section .brand-manual-copy { min-width:0; max-width:820px; }
.brand-manual-reader { width:100%; height:clamp(520px,52vw,680px); margin-top:48px; overflow:hidden; border:1px solid var(--theme-line); border-radius:20px; background:var(--theme-bg); box-shadow:0 30px 70px color-mix(in srgb,var(--theme-bg) 72%,transparent); }
.brand-manual-reader iframe { display:block; width:100%; height:100%; border:0; }

.ux-theme--cierum {
  --theme-bg:#000000;
  --theme-panel:#0c0a08;
  --theme-text:#ffffff;
  --theme-muted:#c3b8a8;
  --theme-line:#3b2d1d;
  --theme-accent:#b17222;
  --theme-accent-2:#ecbb61;
  --theme-glow:rgba(236,187,97,.2);
  --theme-atmosphere:radial-gradient(circle at 82% 13%,rgba(177,114,34,.2),transparent 27%),radial-gradient(circle at 14% 65%,rgba(236,187,97,.08),transparent 28%);
  font-family:'Montserrat',Inter,Arial,sans-serif;
}
.ux-theme--cierum h1,.ux-theme--cierum h2,.ux-theme--cierum .process-grid h3 { font-family:'Montserrat',Inter,Arial,sans-serif; font-weight:700; letter-spacing:-.055em; }

.ux-theme--giantucchi {
  --theme-bg:#07070d;
  --theme-panel:#10101b;
  --theme-text:#f7f5ff;
  --theme-muted:#aaa7bc;
  --theme-line:#29263c;
  --theme-accent:#5a4696;
  --theme-accent-2:#129db3;
  --theme-glow:rgba(182,53,139,.27);
  --theme-button-text:#07070d;
  --theme-title:linear-gradient(100deg,#fff 0 56%,#b27aff 78%,#62d7ff 100%);
  --theme-atmosphere:radial-gradient(circle at 78% 15%,rgba(182,53,139,.22),transparent 26%),radial-gradient(circle at 12% 45%,rgba(55,104,176,.2),transparent 29%),radial-gradient(circle at 80% 82%,rgba(236,102,46,.13),transparent 22%);
  font-family:Inter,Arial,sans-serif;
}
.ux-theme--giantucchi h1 { background:linear-gradient(102deg,#fff 0 50%,#5a4696 62%,#b6358b 73%,#e73064 81%,#ec662e 89%,#f5a910 100%); color:transparent; -webkit-background-clip:text; background-clip:text; }
.ux-theme--giantucchi h1,.ux-theme--giantucchi h2,.ux-theme--giantucchi .process-grid h3 { font-family:Inter,Arial,sans-serif; font-weight:700; letter-spacing:-.055em; }
.ux-theme--giantucchi .case-action.primary { background:linear-gradient(110deg,#5a4696,#b6358b 44%,#e73064 67%,#ec662e); border-color:transparent; color:#fff; }
.ux-theme--giantucchi .process-grid article:nth-child(1) { border-top-color:#5a4696; }
.ux-theme--giantucchi .process-grid article:nth-child(2) { border-top-color:#b6358b; }
.ux-theme--giantucchi .process-grid article:nth-child(3) { border-top-color:#129db3; }

.ux-theme--pci {
  --theme-bg:#061a39;
  --theme-panel:#0a2752;
  --theme-text:#f7f9ff;
  --theme-muted:#a9bad1;
  --theme-line:#254871;
  --theme-accent:#ee6a2b;
  --theme-accent-2:#a70729;
  --theme-glow:rgba(238,106,43,.2);
  --theme-button-text:#fff;
  --theme-atmosphere:radial-gradient(circle at 83% 18%,rgba(240,102,32,.23),transparent 24%),radial-gradient(circle at 18% 28%,rgba(15,105,204,.24),transparent 32%),linear-gradient(165deg,transparent 55%,rgba(2,8,19,.55));
  font-family:'Space Grotesk',Inter,sans-serif;
}
.ux-theme--pci h1,.ux-theme--pci h2,.ux-theme--pci .process-grid h3 { font-family:'Antonio','Bebas Neue',Impact,sans-serif; letter-spacing:.015em; }
.ux-theme--pci .site-header a,.ux-theme--pci .case-action:not(.primary) { border-color:#6f89aa; }
.ux-theme--pci .case-action.primary { background:linear-gradient(110deg,#a70729,#ee6a2b); }
.ux-theme--pci .process-grid article:nth-child(2) { border-top-color:#a70729; }

@media(max-width:760px) {
  .ux-theme #proyecto { min-height:calc(100svh - 138px); }
  .ux-theme #proyecto::after { width:90vw; right:-48%; }
  .ux-theme section:not(#proyecto) { padding-inline:14px; }
  .ux-theme .process-grid article { min-height:0; padding:20px; }
  .brand-manual-reader { height:clamp(400px,62svh,520px); margin-top:32px; border-radius:14px; }
}